Different Header On Each Page for Wordpress!
Posted by: admin in CMS, Web Development Tags=Recently I was working on a website where my customer had a Wordpress website 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!
Entries (RSS)
August 19th, 2008 at 1:49 pm
Hi ! Great thanks for this one, but i can’t get this to work, i replaced my with the code, in my header.php but the script doesn’t seem to recognize #headerbg in my stylesheet, nor the page title. Can’t see what i am doing wrong, i am confident i have not misspelled, please help – i really need this one!
Thanks!
August 20th, 2008 at 8:13 pm
That WAS simple and especially after messing with another solution for hours.
Working on my first web development job using WP and I needed a quick solution till I learn the ropes. I’m using this for the exact same reason you are.
Just wanted to say thanks!
Wordpress newbie – nycbone
October 14th, 2008 at 4:46 am
Thanks man – didn’t try it yet, but that was exactly what i was looking for!
January 6th, 2009 at 3:55 am
i had put that scripts inside my header, but it didn’t work. Thanks for what you do.
here what i write :
<div id=”post_name; ?>”>
January 8th, 2009 at 1:34 pm
Hey, thanks so much for this. You’ve saved me a lot of time. I have a quick question, though. What happens if my page title has two words; ie. About Us, or Contact Us… How do I reference that in the CSS? Do I put a hyphen/space/underscore between the words?
Like, #about-us or #about_us
Or do I need to add something to the php to convert spaces to hyphens?
Thanks so much!
January 8th, 2009 at 1:44 pm
…actually disregard above question. The hyphen worked. I just didn’t have the correct permalink structure on that page.
Thanks again!
January 28th, 2009 at 12:44 pm
Hi, thanks so much for sharing this — it’s exactly what I want to do. I use the code and have been successful with adding one extra header, but am having trouble adding more that that.
All my div tags are in place in my stylesheet, but adding more divs to your php code above is where I hit my snag.
I have tried duplicating the entire script within the header.php for each ‘page’. I have also tried duplicating the div id only within the header.php. When I do either of these, all pages adopt the most recent header that I’ve added (except for the front page).
I know CSS, but not PHP. I suppose my question is, how do you sequence the code above if you have, let’s say, 5 different headers to use on 5 different pages.
Thanks in advance!
February 16th, 2009 at 10:25 pm
Hi
I guess the above is just for pages.
How do you set it up so that you have one header for index.php and a different header for the other files such as single.php, 404.php, etc?
Thanks
March 29th, 2009 at 5:03 am
Great script only few corrections: remember to close your div and to replace with ” your ”
April 1st, 2009 at 4:46 am
Hi! This is the code I need… I’m using the emptiness theme by qoqoa. and I want to use wordpress as a CMS for my whole site… I dont know how to program php or css… I am the worst kind of noob… and to top all of that off qoqoa used a div= main splash instead of header image or whatever…. I know that your code is the exact thing I want… a code that requires very little fiddling in the php and a few additions to the css… but I dont know what to put int he css… you only put what the php is supposed to look like..
can you help?
taji
April 12th, 2009 at 9:26 am
Thanks. This has solved my problem. the code on the Codex page just doesn’t work for me. codex.wordpress.org/Function_Reference/is_home
You should share this example on Codex!!! Thanks again and have a nice day!
April 30th, 2009 at 8:10 am
HI,
My header images are working great thanks to your code, but it is not working on the POST page. My home page is static.html and my post page is not my home page. I cannot get a header to show on the post page. Has anyone ran into this issue? Any help is greatly appreciated. thanks
June 8th, 2009 at 9:50 pm
How do I use this code if I have changed the frontpage settings under reading? My blog is no longer the frontpage yet its not connected to the page.php, its connected to index.php. For this reason I am not able to give my blog page an image with your code…it does not recognize the blog page. Is there anyway around this? How would I adjust the this
to call the blog page instead of the frontpage?
Thank you for your help!