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!
- Digg this post
- Bookmark this post on del.icio.us
- Stumble this post
- Mention on Facebook
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!
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
Thanks man – didn’t try it yet, but that was exactly what i was looking for!
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; ?>â€Â>
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!
…actually disregard above question. The hyphen worked. I just didn’t have the correct permalink structure on that page.
Thanks again!
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!
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
Great script only few corrections: remember to close your div and to replace with ” your â€Â
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
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!
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
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!
Jason-
This is what I figured out to have a header show also on the posts page:
/* the name of your id */
<div id="post_name; ?>”>
Then add this right underneath:
/* the name of your id */
Opps, I think it deleted my code, here it is again for those who need the header to show up in post pages as well: (replace & with < ) and "wrap out" is the name of my div id.
&?php if (is_front_page()) { ?&
&div id="wrap-out"&
&?php } else { ?&
&div id="post_name; ?>”&
&?php } &
&?php if (is_single()) { ?&
&div id=”wrap-out”&
&?php } ?&
Fantastic. ditto nycbone. Thanks – was trying to create a different header.php file and call it by get_header_home.. kept failing. much simpler and neater solution. Thanks again.
Thx for a great tip! It works perfect, it´s only one thing I am wondering about.
When I have sub-pages to a page. And I go into that sub-page, thea header disappears!
Do you know why it´s like that? I had a friend who took a look at the code, and said nothing was wrong, but something has to be.
Thx for any help!
I tried to insert the code as instructed, but I get a syntax error and the site does not render. I am also trying to create different headers for about 12 pages. Here’s what I tried (uppercase indicates my changes). Does the div need to be closed before the php code is closed? Thanks for any help you can offer.
<div id=”PAGE_TWO; ?>”>
Thanks..
My first WP site and this code worked spot on …. first time.. just what I needed and Im not great with code .. but now i have a flash video header on the home page and jpg and png header on the rest of the site,.. Thanks to your code!!
So, if i want to use one header in frontpage and different header to all oyher pages, how to use it?
Thanks! This was really helpful, however I had to change the “” marks because they were different and didn’t work in my editor.
If you want to add different banners per page and have a static banner for the posts use the below code.
<div id="post_name; ?>”>
<div id="post_name; ?>”>
Grrr Replace * with
*?php if (is_front_page()) { ?*
*div id=”banner”*
*?php } else { ?*
*div id=”*?php echo $post-*post_name; ?*”*
*?php } ?*
*?php if (is_single()) { ?*
*div id=”banner”*
*?php } ?*
Hi this is great, and has been easy to implement.
I’m using it to create slideshows with different content in the header for each page, and it works well.
However, I don’t want it to do this if I’m looking at a single post or search result. I want these pages to display the home page images. Any ideas?
I’m using
…
/pic_01.jpg” alt=”Picture” width=”920″ height=”530″/>
…
…
<img src="_post_name; ?>/pic_01.jpg” alt=”Picture” width=”920″ height=”530″/>
…
Mmm code got mangled…
Should be like this (replace square brackets with tag arrows)
[?php if (is_front_page()) { ?]
[!-- home page --]
…
[img src="_home/pic_01.jpg" alt="Picture" width="920" height="530"/]
[?php } else { ?]
…
[!-- other pages --]
…
[img src="_[?php echo $post-]post_name; ?]/pic_01.jpg” alt=”Picture” width=”920″ height=”530″/]
…
[?php } ?]
It was easy. Here for anyone else with a similar problem.
[?php if (is_page()) { ?]
[!-- page --]
…
[?php } else { ?]
[!-- everything else --]
…
[?php } ?]
Its just sometimes people seem to get themselves tied up in unnecessary knots over something that?s very simple.
This may have already been addressed, but I am a bit confused looking back through the comments. Here’s my situation…
1) Different headers for each PAGE works great! Thank you.
2) However, I cannot get the header for the blog, i.e. posts, to work.
Recap: Headers for Pages works. Header for Blog Posts does not.
Suggestions?
Thanks very much!
Hi
I’m very new to css and php, I’m a quick learner though and got most of it right but could someone tell me –
How do I ‘define each “header” div in the style.css file’
Sorry if it’s really basic! I’m trying to get different headers on each page and I can do it using the above code so my homepage image is different to every other image but every other image is the same and I need idfferent ones on each page – hope this makes sense!
How do I do the step below? Can you give an example of the code showing how to do this?
Now you define each “header” div in your style.css file. The name of the 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.
Thank you so much!! This has made things so much easier for me. I was getting prepared to set up multiple templates for each page. Your way was so much easier.