The header template of the basic blog framework contains the following information:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<title><?php if (is_home()) : ?><?php bloginfo('name'); ?> - <?php bloginfo('description'); ?>
<?php else : ?><?php wp_title('', 'false'); ?> - <?php bloginfo('name'); ?>
<?php endif; ?></title>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<div id="wrap">
<div id="header">
<div id="logo"><a href="<?php bloginfo('siteurl'); ?>"><span><?php bloginfo('name'); ?></span></a></div>
<div id="tagline"><?php bloginfo('description'); ?></div>
</div>
<div id="top_nav">
<ul>
<li><a href="<?php bloginfo('siteurl'); ?>">Home</a></li>
<?php wp_list_pages('depth=1&title_li=' ); ?>
</ul>
</div>The information contained in between the head tags is pretty straightforward and can stay as is.
The area following the wrap div is what needs attention.
- Our design doesn’t include a tagline, so we can simply eliminate that div.
- The top navigation is currently generated below the header div. Let’s move it above the logo.
- Since our blog will have a home page and a separate blog page, we also need to remove the first list item.
- Finally, we also need to incorporate the social media icons, so we’ll add them below the logo.
Our header.php template should now look like so:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<title><?php if (is_front_page()) : ?><?php bloginfo('name'); ?> - <?php bloginfo('description'); ?>
<?php else : ?><?php wp_title('', 'false'); ?> - <?php bloginfo('name'); ?>
<?php endif; ?></title>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<div id="wrap">
<div id="header">
<div id="top_nav">
<ul>
<?php wp_list_pages('depth=1&title_li=');?>
</ul>
</div>
<div id="logo"><a href="<?php bloginfo('siteurl'); ?>"><span><?php bloginfo('name'); ?></span></a></div>
<ul id="icons">
<li id="twitter"><a href=""><span>Follow me on Twitter</span></a></li>
<li id="rss"><a href=""><span>Subscribe to our rss feed</span></a></li>
<li id="linkedin"><a href=""><span>View my profile on Linked in</span></a></li>
</ul>
</div>Let’s add some styles
If you were to look at your site after making this change, you’ll notice that the header doesn’t look quite right. We’ll need to adjust our CSS template to match our Photoshop file.
The height of the header area needs to be adjusted as so:
#header {
float:left;
width:960px; height:125px;
background:url(images/header.gif) bottom right no-repeat;
}Our top navigation can be styled using the following CSS:
#top_nav {
float:left;
width:960px; height:30px;
font-size:12px;
}
#top_nav ul {list-style:none;}
#top_nav ul li {
float:left;
padding:5px 10px;
background:url(images/nav_bg.gif) top right no-repeat;
}
#top_nav ul li a {color:#FFF; text-decoration:none; text-transform:lowercase;}Our social media icons are generated using the sprite technique.
#icons {
float:right;
width: 109px; height: 32px;
margin: 60px 20px 0 0; padding: 0;
background: url(images/icons.gif);
position: relative;
}
#icons li {
margin: 0px; padding: 0;
list-style: none;
position: absolute; top: 0;
}
#icons li, #icons a {
height: 32px; display: block;
}
#twitter {left: 0; width: 33px;}
#rss {left: 34px; width: 36px;}
#linkedin {left: 72px; width: 33px;}Finally, the positioning of our logo is tweaked using:
#logo a {
display:block;
width: 210px; height: 45px;
float:left;
margin:40px 0 0 10px;
background:url(images/logo.gif) no-repeat;
}We now have a good looking header area and can move on to the main body area.
