Written on June 27, 2008  /  with 39 comments  /  in the Wordpress Tips category.

Different Header On Each Page for WordPress!

Recently I was working on a website where my customer was starting a WordPress blog and needed a different header on each page. Not post, but page. In this particular situation, my client is using WordPress as a content management system for static content pages only, and not for a blog. There is some very simple PHP code that I used in my header.php file, and this code can be helpful for you especially if you are not an expert in PHP, but just need a solution.

Locate your header.php file and located the <div> for your header. Replace it with this code:

<?php if (is_front_page()) { ?>

  <div id="header"> <!– This is the Header id that you want on your Front Page –>

<?php } else { ?>

  <div id="<?php echo $post->post_name; ?>"> <!– An alternative header is defined, based on the page title –>

<?php } ?>

Now you define each “header” div in your style.css file. The name of the <div> is associated with each static page title. So for example, if you have an About page your div would be #about in your CSS file. It’s a pretty simple approach to getting a different header on each page for WordPress. This code would of course work for any div or class. Most times people use it for the Body class. In my case I only needed a different header and that worked fine for me.

I think the code here is so simple, it’s almost a waste of time to create any kind of plugin to do the same thing. Might as well as just use the simple code to make it happen. If anyone has a different/better way of accomplishing this same task please post your thoughts. Good luck with your WordPress site and I hope this helps you in Creating a Different Header on Each Page for WordPress!

39 responses to this article so far...

Leave a comment