CODEWITHSUNDEEP
phpcsswordpress
tonyf
tonyf

Reputation: 35567

Setting a parent menu CSS class from a child menu using PHP/WordPress

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 its parent menu class, i.e.:

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

Upvotes: 3

Views: 790

Answers (2)

Galen
Galen

Reputation: 30170

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.

Upvotes: 2

Sarfraz
Sarfraz

Reputation: 382806

How about using jQuery instead like this:

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

Upvotes: 0

Related Questions