In this WordPress theme tutorial, before we actually begin styling the header, we need to set the width of our page layout and center the main container that holds all our content. In the case of Underscores, we are talking about the div with the id of “page”.
Let us scroll to the end of the Typography section in our stylesheet and add the following code:
[code language="html" 1="true"]#page {
background: white;
max-width: 960px;
margin: 60px auto;
-webkit-box-shadow: 0px 0px 30px 0px #999;
box-shadow: 0px 0px 30px 0px #999;
}[/code]
What this code does is to apply a white background to our “page” id, set the max-width of the container to 960px, center the content within the page, apply top and bottom margin of 60px and apply a box-shadow to the entire “page” container.
This is what we get as a result:
It is now time to build our header so that it matches our design. If you open the header.php file in your code editor, you will see that we already have our header markup in place and we only need to style the existing elements.
As we work from top to bottom in our design, and in the header section of our site in particular, I would like to start by adding the logo.
Create a new directory in the root directory of the theme and name it “images”. Then add in it the logo.png file, which you can find in the “3. img” folder.
After you do this, insert the following code immediately after the opening header tag of your header.php file:[code language="html" 1="true"]
<div id="header-image">
<a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">
<img src="<?php echo get_template_directory_uri(); ?>/images/logo.png" alt="Logo" width="86" height="83" />
</a>
</div><!-- #header-image -->
[/code]
This code creates a new div with the id of “header-image” and uses the WordPress function get_template_directory_uri() to point to the images directory we just created and prints our image. I’ve also wrapped the image into an anchor tag and used the home_url() function so that when someone clicks the image, he will be redirected to the home page of the site.
The next thing we would like to do is to style the logo so that it appears right in the middle of the page. I’ll add a new section called Header immediately after the Typography section in style.css. This section will hold all our header-related code.[code language="css" 1="true"]
/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
#header-image {
max-width: 100px;
margin: 0 auto;
padding-top: 70px;
}
#header-image a img {
display: block;
margin: 0 auto;
}[/code]
The first style sets the maximum width of the image container div to 100px so that the anchor tag doesn’t span the full width of the page and centers the div, while the second style displays the image as a block level element and centers it within the #header-img div.
Let us also add a background color to the header so that we can better see what we have done so far with the logo. Add the following code in the # Header section:[code language="css" 1="true"]
#masthead {
background: #7bc144;
}[/code]
If you have done everything right, you should have a similar result to this:
Next, I’m adding a series of styles to make our site title and site description match our design:
[code language="css" 1="true"]
.site-branding {
padding-bottom: 70px;
}.site-branding h1.site-title {
font-size: 100px;
font-size: 10rem;
font-family: "Times New Roman", Times, serif;
font-weight: normal;
text-transform: none;
text-align: center;
margin: 0;
line-height: normal;
}.site-branding h1.site-title a{
color: white;
}.site-branding p.site-description {
color: white;
font-size: 24px;
font-size: 2.4rem;
font-family: Arial, Helvetica, sans-serif;
text-transform: uppercase;
margin: 0px;
text-align: center;
}[/code]
First, I’m adding a bottom padding to our site-branding div, so that there is an equal amount of space between the description and the menu and between the logo and the start of the header. Next I’m adding the proper color, font size and font-families to the title and the description of our theme and I’m centering them too.
Once again, if you have done everything properly in this WordPress theme tutorial, you should see the same result as me:
But why not make the header somewhat responsive? If you noticed, Underscores uses a media query with a certain brakepoint (37.5em) to switch between the menu for wide screen devices and the mobile menu. I would like to use it to make our title and description smaller at widths below that brakepoint.
Just paste the following code immediately after the code we have already added in our Header section of style.css:[code language="css" 1="true"]
@media screen and (max-width: 37.5em) {
.site-branding h1.site-title {
font-size: 60px;
font-size: 6rem;
}
.site-branding p.site-description {
font-size: 18px;
font-size: 1.8rem;
}
}[/code]
Save it and refresh the page. Then reduce the width of the browser screen until the mobile menu kicks in. You should see the size of the site title and site description reduce at the same time the mobile menu appears.
We have done it! Now our header is complete and we have a somewhat different look for mobile devices. Good job making it through part 3 of this WordPress theme tutorial- The menu comes next!
Here is a list of all the other parts to the WordPress theme tutorial: part 1, part 2, part 4, part 5, part 6, part 7, part 8, part 9, part 10, part 11, part 12, part 13, part 14
