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>

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!


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.


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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