Highlight current post ancestor parent menu items

Question

The default menu classes in WordPress are pretty useful. But one problem that i stumble over from time to time is with categories as subitems in menus. For example the following menu structure:

• Page 1
• Page 2
  • Category 1
• Page 3

So when Category 1 is active Page 2 gets .current-menu-ancestor which is fine … but as soon as a post of Category 1 is viewed Page 2 has no specific classes … But Category 1 has .current-menu-ancestor as expected.

So finally here's the question: How do i assign a class for these .current-post-ancestor parents?

I'm searching for a PHP solution. Javascript/jQuery is pretty clear … here is a jQuery solution for better understanding what i want to do (And for those who have the same problem and are happy with a JS solution):

jQuery( 'li.current-post-ancestor' ).parents( 'li.menu-item' ).addClass( 'current-menu-ancestor' );

Answer 1

This is probably what you are looking for ..

add_filter( 'wp_nav_menu_objects', 'add_menu_parent_class' );
function add_menu_parent_class( $items ) {

    $parents = array();
    foreach ( $items as $item ) {
        if ( in_array('current-post-ancestor', $item->classes)  ) {
            $parents[] = $item->menu_item_parent;
        }
    }

    foreach ( $items as $item ) {
        if ( in_array( $item->ID, $parents ) ) {
            $item->classes[] = 'current-menu-ancestor'; 
        }
    }

    return $items;    
}

It will add a class to current post ancestor menu item parent. I have tried this in my theme and it is working perfectly.

Answer 2

You could use https://codex.wordpress.org/Class_Reference/Walker, and if you want to detect active parent you could use.

if ( in_array( 'current-menu-ancestor', $classes) ) {
    $class_names .= ' is-active';
}

Answer 3

You can simply use the currently active class and his parent to add class.

jQuery( 'li.menu-item.active' ).parents().addClass( 'current-menu-ancestor' );