Web Development Blog

Web Development » Snippets, WordPress, xHTML » How to display a different header image for different pages in WordPress

25 Jun, 2009

How to display a different header image for different pages in WordPress    

In header.php file of my WordPress theme, I have the following code to display a different header image for different pages.

<?php
  if (is_page('about')) {
      $image = 'image_about.jpg';
  } else if (is_page('projects')) {
      $image = 'image_projects.jpg';
  } else if (is_page('services')) {
      $image = 'image_services.jpg';
  } else if (is_page('contact')) {
      $image = 'image_contact.jpg';
  } else {
      $image = 'image_default.jpg';
  }
?>

<div id="header">
<img src="<?php echo bloginfo('template_url'); ?>
/images/<?php echo $image;?>"
alt="<?php bloginfo('name'); ?>" />
</div>

Found this article useful? Share it with your friends:

Love what you've just read? Subscribe to our newsletter to receive tips, resources and special offers related to web development & design.

Your name:   Your email:  

Other similar posts that you might be interested in:

• How to customise WordPress Admin Login page
• Customising category.php in WordPress
• 5 steps to creating a custom Archive page in WordPress
• Display 5 latest posts in each category in WordPress
• How to add a breadcrumb to your blog and have it appear on Google’s Search Result Snippet
• Golden Green WordPress Theme – Download
• Building a real estate website using WordPress

7 Responses to “How to display a different header image for different pages in WordPress”

1. V.C says:

   July 8, 2009 at 3:44 pm

   Thanks a lot !
   I think this tip is useful for the magazine blog.
   My site is also an magazine blog so I just need this tip.
2. jo3 says:

   August 31, 2009 at 8:33 pm

   i love this, thanks
3. Nick says:

   January 14, 2010 at 8:41 pm

   Hi, can I show also a swf file?? I think yes, but I want to know your opinion before the creation of the flash file.

   Thanks
4. eisabai says:

   January 16, 2010 at 9:30 pm

   Nick: Yes, you can. If you have different flash files for different pages of the website, you can use the same code but replace the name of the image with the name of the flash file (eg: instead of image_about.jpg, it will be about.swf). And then you will need to change your flash embed code (eg: swfobject) to use the variable that you specified.
5. jean paul says:

   June 2, 2010 at 9:36 pm

   Thanks man , i was looking for this !!!
   .-= jean paul´s last blog ..Palais des thés =-.
6. Mandar Apte says:

   August 13, 2010 at 7:22 pm

   This code is not working for my “blog” page…!!!! Why??? for other pages code is working as described.
7. María del Mar says:

   February 19, 2011 at 11:50 pm

   Thank you so much!