22 | Different header image for each page in wordpress

g+

how to show a different image for each page, for instance in the header?

simple, all you have to do with this method is to create an image file with the page ID as part of the image name.

the code for this is really short:

<?php $page_id=get_the_ID();
if(is_page()) { $image='head-image-'.$page_id.'.jpg'; };
if(!file_exists(TEMPLATEPATH.'/images/'.$image)) { $image='head-image.jpg'; }
echo '<img src="'.get_bloginfo('template_url').'/images/'.$image.'" alt="" />'; ?>

this is all.

edit:
if you are using a child theme, and are storing the images in the child theme’s /images folder, replace any ‘template’ references with ‘stylesheet’ – for example:

<?php if(is_page()) { 
  $page_id=get_the_ID(); $image='head-image-'.$page_id.'.jpg'; 
  if(!file_exists(STYLESHEETPATH.'/images/'.$image)) { $image='head-image.jpg'; }
  echo '<img src="'.get_stylesheet_directory_uri().'/images/'.$image.'" alt="" />'; 
}; ?>

end of edit

first step: create an image file name including the page ID (on pages only);
second step: check if a matching image file exists in the images folder of the theme;
third step: if yes, echo the image name; otherwise echo a default image name.

edited and extended:
if the header image is a css background image, this code can be easily adapted:
put it into an embedded style declaration into the <head> section of header.php:

<?php $page_id=$post->ID;
if(is_page()) { $image='head-image-'.$page_id.'.jpg'; 
if(!file_exists(TEMPLATEPATH.'/images/'.$image)) { $image='head-image.jpg'; }
echo '#header { background: url(' . get_bloginfo('stylesheet_directory') . '/images/'.$image.') center top no-repeat; }'; 
}; ?>

this can even be changed to be used to show different header images for each post …

This entry was posted in WordPress and tagged , , . Bookmark the permalink.

61 Responses to Different header image for each page in wordpress

  1. Rick comments:

    That is really interesting, You’re an overly professional blogger.
    I’ve joined your feed and look ahead to in search of more of your wonderful post.
    Also, I’ve shared your site in my social networks

  2. Forrest comments:

    No entanto, os bеnefícios ao funcionamento do organismo, principalmente sobre
    sսaѕ potencialidades como antioхidante, fazem cօm que seja
    um grande aliado das dietas, como um cⲟmplemento ou tônico ao corpօ.

    My weblog obesidade infantil no brasil

  3. Tracy comments:

    If you have a large home or live in a three-story town home, in-home
    installation and mattress removal sounds much
    more appealing than a wet box on your doorstep.

    my blog – gytis bukontas

  4. Nestor comments:

    Espalhe a cobertura sobre os bolinhos já frios e decore
    com as nozes-pecãs, as raspas de laranja e/ou chocolate amargo ralado, como desejar.

    my blog post receita cupcake maquina britania

  5. Terry comments:

    Hi guys, hoping I can still get some help from this thread. I’m using a custom theme in wordpress 3.8.1. Here is my header code which calls the logo:

    <div id="logo" style="margin-top: px;”>
    <img src="” width=”” height=”” alt=”” />

    I would like to set a different logo for the blog section only, how would I go about doing that by using the code suggested above?

    Thanks in advance 🙂

    • Terry replies:

      Apologies, the code is: <?php if ( get_option('logo_url') ) : ?>
      <div id="logo" style="margin-top: <?php echo get_option('logo_margin'); ?>px;">
      <img src="<?php echo get_option('logo_url'); ?>" <?php if ( get_option('logo_width') ): ?>width="<?php echo get_option('logo_width'); ?>"<?php endif; ?> <?php if ( get_option('logo_height') ): ?>height="<?php echo get_option('logo_height'); ?>"<?php endif; ?> alt="<?php echo get_option('logo_alt');?>" />
      </div>
      <?php endif; ?>

    • michael replies:

      the suggested code is way too complicated for your simple idea;

      try to use a conditional statement with ‘is_home()’; example:

      • Terry replies:

        Wow! That easy. It worked. Thank you so much!

      • Terry replies:

        Just noticed that although the logo shows differently on main blog, when click onto a post, it displays the other (general) logo?

      • michael replies:

        the code is for static pages only; single posts will not be effected and possibly will show the general logo/header. if you need support (and don’t want to hire me :-)) consider to ask at the WordPress support forum.

  6. S Mishra comments:

    Thanks for another great post. Your tips are always so precise and right on money. I can’t tell you how many times your good work on this website and wordpress support forum has helped me.

  7. giacomo comments:

    hrm, this code doesn’t seem to enjoy a css call. when I use that snipet it simply puts the code in text where the image should be

    • giacomo replies:

      because..im an idiot…you have to place the css code in the head between a style tag…der

  8. chrisblaqq comments:

    Hi,

    im trying to edit the twenty twelve theme to have a different image on different pages.
    currently my homepage has the easing slider to allow rotating images but i want the about, contact etc pages to have a different image.

    i noticed you have a pasted a code above but im not sure where this code is supposed to be pasted in…
    i have created a child theme with functions.php and style.css an image folder for my logo, would i copy this code into one of these files or do i create another file? or do i edit the page code itself?

    im pretty new to wordpress hence the questions pls…

    • alchymyth replies:

      hi chris,
      please ask at the WordPress.org support forum.
      I don’t provide free individual help from my site any more – the articles are posted ‘as is’ as pointers to what is possible.
      but you could email me to hire me for direct support with your question.
      cheers, Michael

  9. Irfan comments:

    Hi, alchymyth

    I realy thankful to you Plz you are create wordpress theme for me, I give you some examples blogs like http://www.thefunnyplanet.com.. I want this theme for me Plz alchymyth i will very thankful to you plz

  10. David ade comments:

    Hi,
    I have copied and inserted the 2nd Code snippet but it still doesn’t show on my page. Do I need to define “STYLESHEETPATH” somewhere?

    • David ade replies:

      Also, the image that I am using is a PNG. Would that affect the code ( I have already tried replacing “jpg” eith “png”)?

      I am using a child theme of twenty eleven by the way

  11. Tamoo comments:

    Hi Alchymyth,

    I used your first code and as usual, it does wonders! However, I have a question for you.
    The TEMPLATEPATH reads in the “images” folder in the parent theme (i.e. Twentyeleven/images/ in my case). If you use a child theme like I do and place the images folder in the child theme folder (i.e. twentyeleven-child/images/), it no longer works.

    I read somewhere that we could use STYLESHEETPATH but it didn’t work…!
    Would you have any suggestion on how to proceed to get the child theme folder?

    I think this might be useful to everyone reading your great post.

    Thanks a lot for any suggestion.

    • alchymyth replies:

      try to replace both ‘template’ references with ‘stylesheet’ references; for instance:

      <?php $page_id=get_the_ID();
      if(is_page()) { $image='head-image-'.$page_id.'.jpg'; };
      if(!file_exists(STYLESHEETPATH.'/images/'.$image)) { $image='head-image.jpg'; }
      echo '<img src="'.get_stylesheet_directory_uri().'/images/'.$image.'" alt="" />'; ?>

      hope this helps 😉

  12. Pushpendra Pal comments:

    How can I use two defferent images, one on home page and other on all other pages? I use Thesis 1.8 theme.

    • alchymyth replies:

      i don’t know about thesis, but generally, you could use a ‘if( is_home() ) …’ statement and use some code like this instead of the codes from the article:
      <?php if(is_home()) { $image='head-image-home.jpg'; }
      else { $image='head-image-general.jpg'; }
      echo '<img src="'.get_bloginfo('template_url').'/images/'.$image.'" alt="" />'; ?>

      if you have more questions concerning wordpress, consider joining the wordpress.org support forum.

      • Lohith replies:

        Hi.. i am new to wordpress and having poor knowledge in php. I too wants to display differnet image in the header file.. on each page.. only in the header file i need to change the banner image and in all other page another image i want to display.. but not getting how to put background for the particular div…

        could you pls help me out in this?

      • Michael replies:

        it might be the best if you join the WordPress support forum and ask there.
        PS: I found your topic in the WordPress support forum – thanks for posting a solution.

      • Lohith replies:

        Hi.. thanks i got this coding its working… but how to change the background image… i mean its inserting image instead i need to provide background image for the div?

  13. Norja comments:

    Can you have several image headers rotating throughout the site 9which is the easy part with twenty eleven), but have only 1 particular one come up on the home page?

    Thanks for the insights!

    • alchymyth replies:

      Twenty Eleven uses wordpress core functions to randomly rotate the header images; therefore to integrate your idea, one would either need to try and hook into these core functions, or add a conditional part to the build-in functionality in header.php.

      A good place to ask these kind of questions about customizing wordpress themes is http://wordpress.org/support/

  14. Alcyone comments:

    i was excited to find your simple code, but the images aren’t showing up on my page and i dunno why

    here’s the code i’m using:

    post_name;
    if(is_page()) { $image=’side-image-‘.$page_name.’.jpg’; };
    if(!file_exists(TEMPLATEPATH.’/images/’.$image)) { $image=’side-image.jpg’; }
    echo ”; ?>

    This is the code that firefox generates:

    Do you have any ideas why it is not showing on my page?

    Here’s the css:

    #sideimage {
    border: 2px solid #122102;
    position: absolute;
    top: 210px;
    left: 0;
    height: 560px;
    width: 370px;
    }

    Thanks!

    • Alcyone replies:

      i’ll try again, here’s the code that firefox generates:

    • Alcyone replies:
      <aside id="sideimage">
      	
      	<?php $page_name=$post->post_name;
      	if(is_page()) { $image='side-image-'.$page_name.'.jpg'; };
      	if(!file_exists(TEMPLATEPATH.'/images/'.$image)) { $image='side-image.jpg'; }
      	echo '<img src="'.get_bloginfo('template_url').'/images/'.$image.'" alt="" />'; ?>
      	
      </aside>
      
      generates this in firefox:
      
      <aside id="sideimage">
      	
      	<img src="http://localhost/wp-content/themes/mantaruna/images/side-image-about.jpg" alt="" />	
      </aside>
      
      
      • Alcyone replies:

        IT WORKS PERFECT NOW WITH CODE AS PASTED ABOVE!!!! YAY! I don’t know what happened but it just started working all of a sudden after reloading….THANK YOU!!!!!!

  15. dav comments:

    hi alchymyth,

    I have added your code to my header:

    1 ” post_name;
    2 if(is_page()) {
    3 $image=’head-image-‘.$page_name.’.jpg’; };
    4 if(!file_exists(TEMPLATEPATH.’../../uploads/’.$image))$image=’head-image.jpg’;{
    5 echo ”;}
    6 ?>”

    I created a default image “head-image.jpg” and then created other images “about.jpg, contact.jpg…etc”
    But the code only displays the default image on line 4: “$image=’head-image.jpg” if i remove this part then i get the different images but then no default image

    I was hopeing you can help with this issue. As I would want the page to pick up the image of the page name if there is one and display a default image if no image with page name exists.

    Is this something you could help me with please?

  16. Jemma comments:

    Hi there, I stumbled across your page while trying to get submenus featuring only the child pages for each parent page. I currently have this code:


    <?php if (is_page('<!--:en-->Peninsular Malaysia<!--:--><!--:ms-->Semenanjung Malaysia<!--:-->')): ?>
    <?php wp_nav_menu('menu=peninsular'); ?>
    <?php endif; ?>
    <?php if (is_page('<!--:en-->Sabah, Borneo<!--:--><!--:ms-->Sabah, Borneo<!--:-->')): ?>
    <?php wp_nav_menu('menu=sabah'); ?>
    <?php endif; ?>
    <?php if (is_page('<!--:en-->Islands<!--:--><!--:ms-->Pulau-Pulau<!--:-->')): ?>
    <?php wp_nav_menu('menu=islands'); ?>
    <?php endif; ?>
    <?php if (is_page('<!--:en-->Volunteering Opportunities<!--:--><!--:ms--> Peluang Kerja-kerja Kebajikan<!--:-->')): ?>
    <?php wp_nav_menu('menu=volunteering'); ?>
    <?php endif; ?>

    Not very pretty or compact, I know, but I’m very new to all this. My question is, is there a way of adapting what you’ve done to achieve this result with menus? Also, I would like the menus to appear on every child page as well (much like metzondernaam wanted with the images above). I am struggling so thought I would ask in case you have any ideas.

    Thanks,

    Jemma

  17. metzondernaam comments:

    alchymyth! thanks a lot!

    it works perfect 🙂
    thank you very much!

    • metzondernaam replies:

      i have a question 🙂
      if i have subpages, under the page_id=9 how can i inherit the header of page_id=9 ??

      thanks for your time!

      • alchymyth replies:

        try:
        $page_id=get_the_ID();
        if(is_page()) {
        $page_id = (get_page($page_id)->post_parent) ? (array_pop(get_ancestors($page_id, 'page'))) : $page_id;
        $image='head-image-'.$page_id.'.jpg'; }

        the new line will always select the ID of the top page of any sub page levels.

        hope this helps 😉

  18. kev comments:

    I have been trying to use this piece of code with my custom theme, but am running into some problems. It is successfully using different images for different pages, however the homepage of the website now will not load any head-image.

    For instance, the website is built like this: The homepage is like a blog, showing the latest posts. With your script, the head-image does not appear. All other parts of the website are actual static pages (for example page_id=16 etc…) and with your script activated a different head-image successfully appears for each one.

    So basically me question is how can I edit your script so that the logo does not break on my homepage! Sorry for the long-winded explanation

    • alchymyth replies:

      hi kev,

      the first snippet actually does not have an ‘else’ part to show a haeder if it is not a page (i must have missed that or it must have worked in earlier version of php or wp).

      here is an adaptation (the third line is adapted):
      <?php $page_id=get_the_ID();
      if(is_page()) { $image='head-image-'.$page_id.'.jpg'; };
      if( !file_exists(TEMPLATEPATH.'/images/'.$image) || !is_page() ) { $image='head-image.jpg'; }
      echo '<img src="'.get_bloginfo('template_url').'/images/'.$image.'" alt="" />'; ?>

      the second snippet would actually work if, in style.css, there is a #header style defined with background image.
      otherwise it will need the same adaptation as the first snippet.

      if your home page is a static page using a page template to show the blog, you will also need to define a header image for it.

      hope this helps, good luck with your site.

      • S Mishra replies:

        Hi Michael, my question is similar to kev’s. Your code works for all the parent & child pages except for the blog page, which is not the Home page btw. I thought of posting this on WordPress Support Forum, but since the code is entirely yours thought I would check with you first. Thanks! The code that I tried is:

        <?php if(is_page()) {
        $page_id=get_the_ID();
        if(is_page()) {
        $page_id = (get_page($page_id)->post_parent) ? (array_pop(get_ancestors($page_id, 'page'))) : $page_id;
        $image='head-image-'.$page_id.'.jpg'; }
        if(!file_exists(STYLESHEETPATH.'/images/'.$image) || !is_page() ) { $image='head-image.jpg'; }
        echo '<img src="'.get_stylesheet_directory_uri().'/images/'.$image.'" alt="" />'; };
        ?>

      • Michael replies:

        the ‘posts page’ page is not ‘exactly’ a page but based on the index template;

        if you have set a ‘posts page’ then the page ID is saved in the options table and you can get it with: get_option( 'page_for_posts' );

        to use that in the referenced page header code, you will need to integrate a conditional check for the ‘posts page’ with is_home();

        please join the WordPress support forum and ask there.

      • S Mishra replies:

        Once again your tips helped with the tweaking of code and it worked. Many thanks…

  19. herbyderby comments:

    Thanks for this. Works like a charm.

    However, I like using the page names like “http://mywebsite.com/about-us” instead of the “?page_id=16” thing. Is it a simple change from ‘$page_id’ to ‘$page_name’ or is that something altogether different?

    • alchymyth replies:

      you are pretty much right –
      if you look at the second code –
      for instance, replace this part:
      <?php $page_id=$post->ID;
      if(is_page()) { $image='head-image-'.$page_id.'.jpg'; };

      with:
      <?php $page_name=$post->post_name;
      if(is_page()) { $image='head-image-'.$page_name.'.jpg'; };

      good luck 😉

      • herbyderby replies:

        Again, works like a charm. Thanks for the clarification. And thanks again for this snippet.

  20. Roberto comments:

    Thanks Alchymyth !!!!!

  21. Zenk comments:

    Hi, how can you change this so If X page/category is open, it adds a certain stylesheet?

  22. Jon Scrivens comments:

    Hey, great job on the script!

    I’m using this for a site and it works great, until I try to view a category list of posts then it doesn’t display the default. Any thoughts?

    • alchymyth replies:

      Hi Jon,
      how would the default graphic look like? and what is showing as the haeader graphic of a category page?
      i could not really see any changes of the haeder graphic with the different pages.

  23. somesz comments:

    Which php file need to edit edit? Header?

    • alchymyth replies:

      hi somesz,
      yes, these edits have to be done in header.php of your theme.
      all the best …

      • Peter replies:

        OK, but where in the header.php – have tried several places, but can’t make it work.
        Also – the filename of the image, should it be just the page-name, or does it need the whole URL of the given page?
        I assume that I can simply upload a jpg to the theme-image folder, use the page-name.jpg and include your above code – without adjusting your code to my own filenames, correct?
        Appreciate your reply.

      • alchymyth replies:

        Hi Peter,
        if your question refers to the first bit of code, then you would add this where you want to show the image – definitively after the body tag.
        the file name of the image is just the file name; the assumed location of the image is in the /images folder of the theme (change /images to whatever your theme uses as the folder for the theme images).
        on a page with the page id 67, the image file name would be ‘head-image-67.jpg’

        if you like, you can register with the wordpress support forum, and continue/extend the question there – makes it easier to show any code if neccessary – and there are many more helpers available.

        good luck 😉

  24. Kevin Irvin comments:

    I have been reading a few of your posts and have enjoyed it. Keep it up

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*