My client request to put header images, but the images must be unique based on what menu the click.

Let say i have 2 menus. First is What is A and second is What is B. I can know the menu id when i hover the menu at the menu panel. Let say first menu id is 36 and second is 37.

My question is how can i change the header images based on the menu item id?


If your header image is a background image, you can change it with CSS on every page thanks to body_class();

Your <body> tag should look like this :

 <body <?php body_class(); ?> >

Then when you visit each page you'll notice in the code that various classes are added to the body tag. You can then easily adapt your CSS to target any element on any page. for example :

.page-id-96 #header{ background-image:url(myimage.png); }


You could also pass the ID of the page to your image code, for example if you image has to be over the header, outside of the WP loop :

<img src="http://www.mywebsite.com/img/banner_<?php global $wp_query; echo $wp_query->post->ID; ?>.jpg" alt="" />

With this code, Wordpress is going to look for an image that is named depending on the ID of your page. If you are on page ID=23 for example, it is going to load banner_23.jpg. So you just have to name your different banners accordingly.

Another solution would be to use individual page templates.

  • Mike, the truth is its not a header image. The accurate is i think its like a banner. Above the wrapper/content area, i need to put a banner, a graphical image that special for the menu since client love graphic so much. how can i target that area based on the changes of the page id?
    – dzulfriday
    Jun 9 '11 at 11:14
  • @dzulfriday ok, I updated the answer, see if that helps.
    – mike23
    Jun 9 '11 at 11:47

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.