WordPress – Dynamic Highlight Menu

This allows you to theme/style and control the currently selected menu tab in CSS by adding a class=”current” on it.

<ul id="nav">
  <li<?php if ( is_home() || is_category() || is_archive() || is_search() || is_single() || is_date() ) { echo ' class="current"'; } ?>><a href="#">Gallery</a></li>
  <li<?php if ( is_page('about') ) { echo ' class="current"'; } ?>><a href="#">About</a></li>
  <li<?php if ( is_page('submit') ) { echo ' class="current"'; } ?>><a href="#">Submit</a></li>
</ul>   

Line 2:

If Home, or Category, or Archive, or Search or Single page is selected, class=”current” will be included in

  • Line 3,4:

    If Page with page slug about or submit is highlighted, class=”current” is added.

    If you are looking at putting categories as menu tabs, here’s how to make the menu dynamic:

    <ul id="nav">
      <li<?php if ( is_category('css') ) { echo ' class="current"'; } ?>><a href="#">CSS</a></li>
      <li<?php if ( is_category(showcase) ) { echo ' class="current"'; } ?>><a href="#">Showcase</a></li>
    </ul>
    

    If category with category slug of css or showcase, class=”current” is added.

  • One Reply to “WordPress – Dynamic Highlight Menu”

    1. Hi,
      My WordPress template has this function built in, I’m just looking for help disabling the function for a single menu item. I’m searching for a way to exclude the first item in my menu bar – “Home”- from being dynamically highlighted. Not quite sure whether this requires coding or if there’s an alternative way of doing this. Any help would be most appreciated!

    Leave a Reply

    Your email address will not be published. Required fields are marked *

    *