Different header image for each page in wordpress

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 …

58 Replies to “Different header image for each page in wordpress”

  1. magnificent points altogether, you just won a brand new reader.
    What could you suggest about your submit that you made a few days in the past?
    Any certain?

  2. 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 πŸ™‚

    1. 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; ?>

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

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

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

      2. 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.

  3. 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.

  4. 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

  5. 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…

    1. 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

  6. 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?

    1. 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

  7. 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.

    1. 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 πŸ˜‰

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

    1. 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.

      1. 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?

      2. 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?

  9. 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!

    1. 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/

  10. 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!

    1. <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>
      
      
      1. 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!!!!!!

  11. 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?

    1. I am experiencing the same problem…. my code is:

      <?php $page_id=get_the_ID();
      if(is_page($page_id)) { $image='head-image-'.$page_id.'.jpg'; }
      else { $image='head-image.gif'; }
      echo '’; ?>

      1. @ugqueen:
        what problem exactly? your code snippet is too short to see what you are doing with the $image variable; can you post the full section?

  12. 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

    1. 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!

      1. 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 πŸ˜‰

  13. 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

    1. 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.

      1. 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="" />'; };
        ?>

      2. 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.

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

  14. 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?

    1. 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 πŸ˜‰

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

    1. Hi Zenk,

      you could simply use conditional tags (http://codex.wordpress.org/Conditional_Tags), such as is_page('32') (http://codex.wordpress.org/Function_Reference/is_page) or is_category(21) (http://codex.wordpress.org/Function_Reference/is_category) and build something like this to add in header.php after the standard stylesheet:
      <?php if(is_page('32')) { ?>
      <link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/style-page-33.css" type="text/css" media="screen" />
      <?php } ?>

      you can use ‘if – elseif – else’ statements to check for a whole list of pages and categories.

      hope this helps,
      if you need more suggestions, consider joining the wordpress support forum.

  15. 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?

    1. 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.

      1. 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.

      2. 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 πŸ˜‰

Leave a Reply

Your email address will not be published. Required fields are marked *