How to design a WordPress header

Most WordPress themes include headers that you can customize by adding your site’s name, a custom image, or changing the text and background colours. As with most WordPress customizations, there is more than one way to do this, depending on the WordPress theme and version you’re using. In this article, we’re customizing the WordPress Classic theme header by editing the theme’s header.php and style.css files. Generally, header.php defines what content is included in the site header, such as the title and description, and style.css defines how the content looks, such as fonts and colours.

Note: Back up all of the files in the app/themes/[your_theme] folder before you edit any files. Syntax errors, even a minor typo, can cause your site to become unusable.

There are a few ways to access and edit your WordPress site’s files:

  • cPanel File Manager – Log in to your HostPapa dashboard and go to cPanel > File Manager and open the app/themes/[your_theme] folder. Select the file you want to edit and click Edit.
  • FTP client – Log in to your site using your FTP client and download the files in the app/themes/[your_theme] folder. Edit the files in your preferred text editor and then upload the changed files. 
  • The WordPress theme editor – In the WordPress dashboard, go to Appearance > Editor and select the files to edit.

The examples below use the WordPress theme editor.

Editing the theme header file

In the WordPress dashboard, go to Appearance Editor and click Theme Header (header.php).

This is the main header section:

<h1 id="header">
 <a href="<?php bloginfo('url'); ?>/"><?php bloginfo('name'); ?></a>
 <span id="tagline"><?php bloginfo('description'); ?></span>
</h1>

It includes the bloginfo() template tag with three different parameters:

  • bloginfo (‘url’) specifies that the site name is a link to the site’s main page 
  • bloginfo (‘name’) returns the site name;
  • bloginfo (‘description’) returns your site’s tagline defined in General Settings.

Styling the header

Now let’s change the styling by editing the stylesheet. In the WordPress dashboard, go to Appearance > Editor and click Stylesheet (style.css).

Find the #header section.

#header {
 background: #90a090;
 border-bottom: 3px double #aba;
 border-left: 1px solid #9a9;
 border-right: 1px solid #565;
 border-top: 1px solid #9a9;
 font: italic normal 230% 'Times New Roman', Times, serif;
 letter-spacing: 0.2em;
 margin: 0;
 padding: 15px 10px 15px 60px;
}

Let’s look at the CSS that defines how the default header is styled.

Property Value Description
background #90a090  A solid shade of green.
border-bottom  3px double #aba 3-pixel double border in a shade of green similar to the background colour.
border-left  1px solid #9a9 1-pixel solid border in a shade of green similar to the background colour.
border-right  1px solid #565 1-pixel solid border in a darker shade of green.
border-top   1px solid #9a9 1-pixel solid border in the same shade of green as border-left.
font italic normal 230% ‘Times New Roman’ Times serif Italic – the font style
Normal – the font weight
230% – the font size relative to the body font size
Times New Roman – the first choice font family
Times – the second choice font family
Serif – the generic font family
letter-spacing  0.2em The letter spacing is increased by 20% of the default letter spacing for the font.
margin  0 There is no space around the outside border of the header.
padding  15px 10px 15px 60px The padding around the header text is 15px on the top, 10 pixels on the right, 15 pixels on the bottom, and 60 pixels on the left.

And this is the result:

Now we’ll make some changes. First, replace the green background with an image. Make sure you add the image to the media library before editing the stylesheet.

background-image: url("https://mysite.com/app/uploads/2017/09/header-background.jpg");
Make all the borders 1 pixel solid black:

border-bottom: 1px double #000000; 
border-left: 1px solid #000000; 
border-right: 1px solid #000000; 
border-top: 1px solid #000000;

Change the font style, weight, size, and family:
font: normal bold 200% arial, arial, sans;
Reduce the letter spacing:
letter-spacing: 0.1em;
Change the padding:
padding: 30px 10px 100px 60px;
Put it all together and the new header section looks like this:

#header {
 background-image: url("https://mysite.com/app/uploads/2017/09/header-background.jpg");
 border-bottom: 1px solid #000000;
 border-left: 1px solid #000000;
 border-right: 1px solid #000000;
 border-top: 1px solid #000000;
 font: normal bold 200% arial, arial, sans;
 letter-spacing: 0.1em;
 margin: 0;
 padding: 30px 10px 100px 60px;
}

And here is the result of our new header styles:

If you need help with your HostPapa account, please open a support ticket from your dashboard.

Related Articles

Get online with our affordable web hosting

Get online with our affordable web hosting

Learn more now
HostPapa Mustache