How To Add A Second Header To Your WordPress Theme

Just added a second header to my Theme. When I created this Theme, there was no plans at all of wanting a second header as I don’t have anything that’s worth occupying that prime piece of blog estate, but since I am on a subscriber increment campaign, I thought this would be a good time to have a second header to display the giveaways. The rest of the space is temporarily inserted with Adsense Ads and if something more viable, like an Advertiser, or a good affiliate product comes a long, it will be replaced. Adsense performs terribly in blogs like this.

Anyway, if you too have intention of adding a second header like the one you see here in your WordPress Theme, this is what I did. Be reminded that not all themes are coded the same way. I did mine here with minimum fuss and no complicated structures so it is easy for me to add stuffs as I go along.

The most basic requirement is of course to declare a new div id in the CSS stylesheet so you can declare how you want the second header to look like. The easiest way is to copy the existing header attributes as in most cases, the second header will be in the same width. You can then decide on the height of the new header. For example, I copied my header css and simply named the new header ‘header2″, then replaced it with my own preferences.

#header2 { background:#565455; width: 1060px;height:150px; margin-bottom: 0px; float: left; }

Just in case you do not already know, the # sign denotes div id.

Then since I wanted to have two columns in the header, I inserted 2 new classes. The “header2_left” and “header2_right”.

.header2_left {background:#565455; width: 440px; float:right; padding:5px 10px 0 0;color: #fff; font-size: 14px;}
.header2_right {background:#565455; width: 610px; float:left; padding:15px 0 0 0;color: #fff; font-size: 14px;}

This will decide how and where the columns will appear. The dot sign in front denotes the div class.

Now consider the “div id” to be the mainframe and the ‘class id’ to be the sub frame. Which means when you call up these styles in your header, you have to call up the ‘div id’ first. This will make WordPress see that you have a second header. Then inside the header, you have something else which in this case is the ‘class id’ which in my case are the subscription form and the Ads.

Logically, you will have to add the ‘call’ in your header php. look for the existing <div id="header"> There will be a bunch of codes before you come to the closing div tag Immediately after that closing tag, call up your second header <div id="header2"> Then call up your columns inside the header by specifying the class. Like this:

<div id="header2">
<div class="header2_left"> All your Information or codes here, then close this div </div>
<div class="header2_right"> All your Information or codes here, then close this div </div>
lastly close the header2 id with a closing div tag </div>

Update and refresh your blog. The second header will show barring any unforeseen circumstances or mistakes.