Ads By Google

How To Add A Second Header To Your WordPress Theme

css-codes

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.

Share This Post
Ads By Google
 

Free Updates

Subscribe to receive Free WordPress Theme Tips, Reviews and Discount Codes

Related WordPress Theme Tips

How To Add A Banner In Your WordPress HeaderBanner 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...

Making A Header Image For The StudioPress ThemeFinally 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...

How To Use Your Own Header Image Size For Twenty ElevenOne big discontention about the Twenty Eleven Theme is the header image. Displaying the image in it’s default size is easy, but if you have custom made an image with...

Video Tutorial – Cutomizing Your WordPress Theme Header ImageWhen I first started dabbling in WordPress Theme Customizations, I was zilch, having completely no prior training in any programming language whatsoever. I learned through sheer arrogance, not believing in...

How To Increase The Size Of Your WordPress ThemeSize, 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....

Those who found this page were searching for:

  1. how to add second header
  2. how do I add a second blog on wordpress
  3. create single-line headers in wordpress page
  4. add a second header to wordpress page
  5. how to add a second featured image for post
  6. add anoter header CSS
  7. how do i add a second header, wordpress
  8. wordpress include second css
  9. size wordpress
  10. adding another header to wp

2 Responses to “How To Add A Second Header To Your WordPress Theme”

Read below or add a comment...

  1. I’m struggling with adding a header (abusing the existing header) in the Producer Theme. Have installed the dynamic-header plugin and have lots of nice headers sorted, but they align left not centre, like the rest of the Producer theme. The Dynamic Header plugin is called with a function, show_media_header that I added to header.php. But I can’t find how to modify the css (or php) of Producer or Dynamic Headers to make it align. This is similar to the problem you solved but embedded in existing stuff. Doesn’t help that I’m a newbie and don’t really know php or css. Any advice greatfully received.

    • Costa says:

      Hi Steve,

      The problem with using plugins is sometimes they are not compatible with the Theme you are using. I checked out your site and I believe that your problem might be due to this. Since I have never used this plugin nor this Theme, I’m afraid I cannot be much of a help here. Maybe the developers of the plugin or the theme can help.