Title: Conditional image based navigation
Last modified: August 19, 2016

---

# Conditional image based navigation

 *  [onerandommoment](https://wordpress.org/support/users/onerandommoment/)
 * (@onerandommoment)
 * [18 years, 2 months ago](https://wordpress.org/support/topic/conditional-image-based-navigation/)
 * Hey everyone.
 * My first question here in the WordPress Support Forums. My first post too actually.
   But ah well.
 * Anyway. Straight to my predicament.
 * I’m sorting out my blog (I’m unsure whether I can post a direct link so the URL
   is on my profile page for this forum) and have designed a pretty rad looking 
   navigation system.
 * Its your everyday CSS based image navigation so that on hover the image will 
   move position showing the hover version of the original image.
 * This is easy.
 * What my problem is that I’d like the navigation images to correspond with what
   page or post (within the category) the user is on.
 * So for example. The HOME link image will be ‘active’ while the user is on the
   index page or within the category of news. The MOVIES link image will be ‘active’
   while the user is on the movies page or within the category of movies etc etc.
 * This is the code I’m using so far:
 *     ```
       <div id="navigation">
       	<ul>
       		<li <?php if (is_home()) { echo "class=nav-home-on";
   
       		} elseif (in_category('14')) { echo "class=nav-home-on";
   
       		} else { echo "class=nav-home";} ?>></li>
   
       		<li <?php if (is_page('rants')) { echo "class=nav-rants-on";
   
       		} elseif (in_category('16')) { echo "class=nav-rants-on";
   
       		} else { echo "class=nav-rants";} ?>></li>
   
       		<li <?php if (is_page('rants')) { echo "class=nav-movies-on";
   
       		} elseif (in_category('15')) { echo "class=nav-movies-on";
   
       		} else { echo "class=nav-movies";} ?>></li>
   
       		<li <?php if (is_page('crap')) { echo "class=nav-crap-on";
   
       		} elseif (in_category('17')) { echo "class=nav-crap-on";
   
       		} else { echo "class=nav-crap";} ?>></li>
   
       		<li style="margin: 0;" <?php if (is_page('portfolio')) { echo "class=nav-portfolio-on";
   
       		} elseif (in_category('18')) { echo "class=nav-portfolio-on";
   
       		} else { echo "class=nav-portfolio";} ?>></li>
       	</ul>
       	</div>
       ```
   
 * At the moment I know I haven’t added any links TO the lists but I just wanted
   to get this part of the code correct first.
 * While this worls it will also be screwy when there is for example a post on a
   page where teh category is different. So TWO parts of teh nav will be ‘active’.
 * If any of this makes sense and ANYONE can help.
 * Please do 😀
 * Thanks in advance.
 * Pete x

Viewing 3 replies - 1 through 3 (of 3 total)

 *  [microkid](https://wordpress.org/support/users/microkid/)
 * (@microkid)
 * [18 years, 2 months ago](https://wordpress.org/support/topic/conditional-image-based-navigation/#post-714276)
 * Perhaps you can use a boolean you set to true whenever one of your conditions
   is met, and check it every time. Something like this:
 *     ```
       <?php
       [...]
   
       $highlighted = false;
   
       [...]
   
       if( ( in_category( 16 ) || is_page( 2 ) ) && $highlighted == false ) {
         echo "class="nav-portfolio;
         highlighted = true;
       }
   
       [...]
       ?>
       ```
   
 *  [byronedwards](https://wordpress.org/support/users/byronedwards/)
 * (@byronedwards)
 * [18 years, 1 month ago](https://wordpress.org/support/topic/conditional-image-based-navigation/#post-714372)
 * Hi Pete,
 * if you create a class on the body tag (using classybody plugin) you can do it
   in the css.
 * it will be something akin to:
 * body.page-1 .current_page_item a {background image styles}
    body.page-2 .current_page_item
   a {background image styles}
 * etc etc.
 * Best
 * Byron
 *  [siredesigns](https://wordpress.org/support/users/siredesigns/)
 * (@siredesigns)
 * [17 years, 11 months ago](https://wordpress.org/support/topic/conditional-image-based-navigation/#post-714409)
 * That code seems a little long to accomplish such a simple task. I made a quick
   tutorial on how to incorporate images into your navigation menu. It also shows
   you how to use active and hover effects on your links. Let me know if this helps:
 * [http://thedailytut.com/wordpress/an-image-wordpress-navigation-with-hover-and-active-links](http://thedailytut.com/wordpress/an-image-wordpress-navigation-with-hover-and-active-links)
 * Cheers,

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Conditional image based navigation’ is closed to new replies.

## Tags

 * [conditional](https://wordpress.org/support/topic-tag/conditional/)
 * [css](https://wordpress.org/support/topic-tag/css/)
 * [else](https://wordpress.org/support/topic-tag/else/)
 * [if](https://wordpress.org/support/topic-tag/if/)
 * [nav](https://wordpress.org/support/topic-tag/nav/)
 * [navigation](https://wordpress.org/support/topic-tag/navigation/)

 * In: [Developing with WordPress](https://wordpress.org/support/forum/wp-advanced/)
 * 3 replies
 * 4 participants
 * Last reply from: [siredesigns](https://wordpress.org/support/users/siredesigns/)
 * Last activity: [17 years, 11 months ago](https://wordpress.org/support/topic/conditional-image-based-navigation/#post-714409)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics