Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

How would I go about adding a unique class to the direct child li elements of the main parent ul element generated with wp_nav_menu?

<nav id="access" role="navigation">
  <div class="menu-main-container">
    <ul id="menu-main" class="menu">
      <li id="menu-item-30" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-30"><a href="http://www.site/page1-2/">Page1</a>
        <ul class="sub-menu">
          <li id="menu-item-50" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-50"><a href="http://www.site/sub-page1-1/">Sub-Page1-1</a></li>
          <li id="menu-item-49" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-49"><a href="http://www.site/sub-page1-2/">Sub-Page1-2</a></li>
        </ul>
      </li>
    </ul>
  </div>
</nav>

I'd like to add the class menu_element to li id="menu-item-30" and every child li of the parent ul after. Is this possible?

Thanks in advance!

share|improve this question
add comment

1 Answer

up vote 0 down vote accepted

Check out the section titled Adding Conditional Classes to Menu Items on the wp_nav_menu Codex page. This should give you a pretty good overview for adding classes to menu items using the nav_menu_css_class filter.

For what you asked to do, which is add menu_element to the class attribute for both the menu item with ID 30, and the menu items listed after it, you could do something like this in your theme's functions.php file:

function menu_element_class($classes, $item){
    if($item->ID == 30 || $item->menu_item_parent == 30) {
        $classes[] = "menu_element";
    }
    return $classes;
}

add_filter('nav_menu_css_class' , 'menu_element_class' , 10 , 2);

This just checks to see if the menu item has an ID of 30, or has a menu_item_parent of 30, and adds "menu_element" to the classes array. Of course, you can change the if statement to check for whatever conditions you'd like before adding the class.

share|improve this answer
    
Awesome, thank you for breaking it down. –  dcd018 May 24 '12 at 2:35
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.