Change image based on menu item id

1 Views

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.

Read More

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

Post Views: 1

Related posts

Leave a Reply

1 comment

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