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.
Related posts:
- How To Add A Banner In Your WordPress Header Banner Ads is one of the most popular format for advertisers and publishers alike. That’s because banner ads often occupies the best piece of a blog’s real estate, that is the blog header or on the top of the contents. These areas are the most visible to anyone visiting...
- Making A Header Image For The StudioPress Theme Finally had some time and the mood to do some WordPress Theme modding again. As promised earlier, I put the StudioPress Theme to task again, this time using the codes given to me by Darran of LimeTouch. Read more on Making A Header Image For The StudioPress Theme… ...
- Kubrik Theme – Adding Navigation Links After adding the sidebar to the Singles Post of the Kubrik Theme which comes in default with your WordPress Installation, there is another missin item that you might like to add. There are no navigation links in the Default Theme. The only link that your readers can click back...
- How To Increase The Size Of Your WordPress Theme Size, in this instance is the size area of your blog layout and not size in terms of traffic, contents or whatever that you deemed as the bigger the better. Some says, ’size does not matter’, what matters is the quality. In this case, size does matter because sometimes, you...
- How To Make Rounded Corners For Your WordPress Theme A very popular method to make rounded corners for our WordPress Themes is a workaround by using images. It will be quite lengthy to discuss this method here as it will involve discussing about Photoshop and all. Maybe when I find the time, I’ll do a screencast on how to...
