Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

I am using the following code in order to add a class name "active" to the current menu item:

add_filter('nav_menu_css_class', 'add_active_class', 10, 2 );

function add_active_class($classes, $item) {
  if( $item->menu_item_parent == 0 && in_array('current-menu-item', $classes) ) {
    $classes[] = "active";
  }

  return $classes;
}

This works as charm, but only for items without a dropdown. If there's an item with children in it, it won't add the active class to the parent item.

Is there a way I can modify this code so the filter adds an "active" class both to the current link and it's parent?

share|improve this question
    
You don't need to do this...WP already adds classes for this like current-menu-item or current-ancestor-item...etc... –  splashingpixels Sep 4 '13 at 21:38
    
Hi @splashingpixels, I know Wordpress adds its own custom classes but I specifically need to add a class named as "active". –  Johann Sep 4 '13 at 21:44
    
May I ask why it needs to be the word active? –  splashingpixels Sep 4 '13 at 21:45
    
Thanks for your quick answer. I'm developing a theme using Bootstrap as a base and bootstrap base styles. Class naming differs to Wordpress and I would like to build filter before modifying core styles. –  Johann Sep 4 '13 at 22:00
add comment

1 Answer

up vote 2 down vote accepted

Depending on the context you need this and working off of the code you have, you can try this:

add_filter('nav_menu_css_class', 'add_active_class', 10, 2 );

function add_active_class($classes, $item) {
  $class_names = array( 'current-menu-item', 'current-menu-ancestor', 'current-menu-parent', 'current_page_parent',  'current_page_ancestor' );

  if( $item->menu_item_parent == 0 && in_array( $class_names, $classes) ) {
    $classes[] = "active";
  }

  return $classes;
}

UPDATE: if above doesn't work because of the array as needle for in_array function due to PHP version, try below code:

add_filter('nav_menu_css_class', 'add_active_class', 10, 2 );

function add_active_class($classes, $item) {

  if( $item->menu_item_parent == 0 && 
    in_array( 'current-menu-item', $classes ) ||
    in_array( 'current-menu-ancestor', $classes ) ||
    in_array( 'current-menu-parent', $classes ) ||
    in_array( 'current_page_parent', $classes ) ||
    in_array( 'current_page_ancestor', $classes )
    ) {

    $classes[] = "active";
  }

  return $classes;
}

If you want any current item to have the class active, you can do this:

add_filter('nav_menu_css_class', 'add_active_class', 10, 2 );

function add_active_class($classes, $item) {

  if( in_array( 'current-menu-item', $classes ) ||
    in_array( 'current-menu-ancestor', $classes ) ||
    in_array( 'current-menu-parent', $classes ) ||
    in_array( 'current_page_parent', $classes ) ||
    in_array( 'current_page_ancestor', $classes )
    ) {

    $classes[] = "active";
  }

  return $classes;
}
share|improve this answer
    
Hi @splashingpixels. I tried your code but does not seems to work. I checked the source code and the "active" class is not being added. –  Johann Sep 4 '13 at 22:01
    
I have updated the answer, try that.. –  splashingpixels Sep 4 '13 at 22:07
    
Thanks @splashingpixels, you rock! Flawless code. Just one more question, which I don't know is possible or if is a Wordpress restriction. With this code, now all parent items have the "active" class when needed. Is there a way that if I click on a dropdown item, add the active class as well? So the "active" class is added to both the parent and the child? –  Johann Sep 4 '13 at 22:13
    
Yes you can, see updated answer...and please mark it as the answer if it worked for you...thanks. –  splashingpixels Sep 4 '13 at 22:24
    
You are the best, this issue is resolved! –  Johann Sep 4 '13 at 22:28
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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