2

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?

  • You don't need to do this...WP already adds classes for this like current-menu-item or current-ancestor-item...etc... – user23654 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? – user23654 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
2

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;
}
  • 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.. – user23654 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. – user23654 Sep 4 '13 at 22:24
  • You are the best, this issue is resolved! – Johann Sep 4 '13 at 22:28

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