1

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' );
0

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';
}
  • I've already expected to appear the Walker class :D. I've never dealt with this very extensively … so would you mind to write you answer in full context? That would be great :) – GDY Jul 4 '18 at 7:33
  • Have a look on gist.github.com/kosinix/5544535, here you have a simple example how to use the Walker. Additionaly if you want tu mark current menu ancestor, you could use my kod above. So basicly, you need to add in to wp_nav_menu() all nessesary parameters and referr to your class, where you can check how deep is current menu to mark specific root for eg. 'if ( $depth === 0 ) {...}' for start level. Try trial and error method ... I did that and it works prefect. – mcgoo Jul 4 '18 at 7:51
  • Yeah well … But i don't want to give .current-menu-ancestor an additional class … i want to give a class to the parent menu items of .current-post-ancestor – GDY Jul 4 '18 at 8:05
  • It doesn't matter is it page or post, look here : codex.wordpress.org/Class_Reference/… – mcgoo Jul 4 '18 at 8:16
0

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.

-1

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

jQuery( 'li.menu-item.active' ).parents().addClass( 'current-menu-ancestor' );
  • Actually i have posted a working javascript solution in my answer. As mentioned a PHP solution was what i'm searching for – GDY Oct 31 at 8:15

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.