Build a simple custom theme – Part 1

Step 3: Let’s look at the header

Looking at our design, we can see that our header area is 115px tall and contains a logo and navigation.

The header.php in our basic theme has a logo and tagline and below the header div comes the navigation.

Our design doesn’t have a tagline, so we can simply remove it.

We can then move our navigation inside our header div.

So our codes in the header.php should now look like:

<header id="branding">
  <div id="logo"><a href="<?php echo home_url() ?>/"><?php bloginfo( 'name' ); ?></a></div>
  <nav id="top_nav">
	<?php wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'primary' ) ); ?>
  </nav>
</header>

Now that we’ve modified this template, we need to make the following adjustments to our header div in your style.css.

#branding {
	float:left;
	width:900px; height:115px;
	background: #FFF url(images/header.gif) bottom repeat-x;
	border-left:30px solid #FFF;
	border-right:30px solid #FFF;
	-webkit-box-shadow: 0 0 5px rgba(0,0,0,.6);
	-moz-box-shadow: 0 0 5px rgba(0,0,0,.6);
	box-shadow: 0 0 5px rgba(0,0,0,.6);
}

We also need to adjust the logo div to make it display:

#logo a {
	display:block;
	width: 212px; height: 45px;
	float:left;
	margin:30px 0 0 0px;
	text-indent:-9999em;
	outline:0;
	background:url(images/logo.png) top left no-repeat;
}

Below the #logo, comes the #tagline. Since, we’ve deleted this div from our header.php we can no longer need the css. So let’s just delete that code.