Adding a unique class to wp_nav_menu

Question

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!

Answer 1

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.