Change image based on 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); }

UPDATE

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.

Leave a Comment