Setting a Parent Menu CSS Class from a Child Menu using PHP/WordPress

Question

Hi,

I have the following menu setup that basically has a parent menu of "Products" with two child menu items that I am using inside my WordPress 3 menu structure, specifically inside my sidebar.php file:

<ul id="themenu" class="sf-menu sf-vertical">
        <li><a class="sf-with-ul topm" href="#">Products</a>
            <li><a href="information">Information</a></li>
            <li><a href="parts">Parts</a></li>
        </li>
</ul>

What I am unsure how to do using PHP is when a user clicks on either of the child menu options, i.e."Information or Parts", I would like to add a css class of currentMenu to it's parent menu class, i.e.:

<li><a class="sf-with-ul topm currentMenu" href="#">Products</a>

Would appreciate your help on this.

Thanks.

Answer 1

How about using jQuery instead like this:

$('#themenu a').click(function(){
  $(this).closest('.topm').addClass('currentMenu');
  return false;
});

Answer 2

Wordpress does this for you. It adds classes to your menu's (assuming you're using wp_list_pages).

The classes are current_page_parent and current_page_ancestor

EDIT: If you're printing the nav statically you can do this

<ul id="themenu" class="sf-menu sf-vertical">
        <li><a class="<?php if( in_array( $_SERVER['REQUEST_URI'], array( '/information','/parts' )  ) ?>currentMenu<?php endif; ?>" href="#">Products</a>
            <li><a href="information">Information</a></li>
            <li><a href="parts">Parts</a></li>
        </li>
</ul>

It checks the url and if the url is in the list it will set the class to currentMenu. You have to edit the array of urls for that parent to suit your needs.