4

I have a WP nav menu, and I need to add a class to any top-level <li> if that item has more than one level of child items (meaning, its child submenu has a submenu too). Like this:

<ul>
    <li>Parent
        <ul class="sub-menu">
            <li>Sublink1</li>
            <li>Sublink2</li>
        </ul>
    </li>
    <li>Parent</li>
    <li class="ADD-CLASS-HERE">Parent <!-- add class to this item -->
        <ul class="sub-menu">
            <li>Sublink1</li>
            <li>Sublink2</li>
            <li>Sublink3
                <ul class="sub-menu">
                    <li>Sublink1</li>
                    <li>Sublink2</li>
                </ul>
            </li>
        </ul>
    </li>
    <li>Parent</li>
    <li>Parent</li>
    <li>Parent
        <ul class="sub-menu">
            <li>Sublink1</li>
            <li>Sublink2</li>
        </ul>
    </li>
</ul>

I'm assuming I need to use a Walker to achieve this. (I don't want to manually add the class in the WP Menu settings.) I've tried working with some example walkers I found, but I haven't been able to get the class added to the level 0 ancestor item. Thank you for any help!

1 Answer 1

4

Not sure, but maybe something like this will work? Add to the functions.php. See explanation here.

//This function is responsible for adding "my-parent-item" class to parent menu item's
function add_menu_parent_class( $items ) {
$parents = array();
foreach ( $items as $item ) {
    //Check if the item is a parent item
    if ( $item->menu_item_parent && $item->menu_item_parent > 0 ) {
        $parents[] = $item->menu_item_parent;
    }
}

foreach ( $items as $item ) {
    if ( in_array( $item->ID, $parents ) ) {
        //Add "menu-parent-item" class to parents
        $item->classes[] = 'my-parent-item';
    }
}

return $items;
}

//add_menu_parent_class to menu
add_filter( 'wp_nav_menu_objects', 'add_menu_parent_class' ); 

So if you can use Jquery you can do it like this:

$('ul li.menu-parent-item:has(ul ul)').addClass('your class');
6
  • Thank you. This adds a class to all parents that have children, so I need to figure out a way to modify this so that it only adds the "my-parent-item" class to top level (level zero?) parent items and ONLY if that top level item has multiple child levels, not just one level. That's the part I'm struggling with. Tricky!
    – LBF
    Jan 28, 2016 at 16:52
  • I suppose applying the class to top level only isn't necessary, but I do need to only apply it to items that have more than 1 level of children.
    – LBF
    Jan 28, 2016 at 17:17
  • If you can use Jquery it is rather simple see the edit...
    – Dejo Dekic
    Jan 28, 2016 at 18:48
  • I figured I'd resort to jquery if I couldn't figure it out with a walker, so thank you for the additional edit. Since it's an important style, I was hoping to achieve it with php in case people have JS turned off. But maybe JS is the way to go. Thanks!
    – LBF
    Jan 28, 2016 at 19:03
  • I'm marking this correct for the jQuery part of your answer, which I ended up using. I was not able to get a php/walker solution to work.
    – LBF
    Feb 5, 2016 at 0:55

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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