How to add "active" class to wp_nav_menu() current menu item (simple way)
Just paste this code into functions.php file:
add_filter('nav_menu_css_class' , 'special_nav_class' , 10 , 2);
function special_nav_class ($classes, $item) {
if (in_array('current-menu-item', $classes) ){
$classes[] = 'active ';
}
return $classes;
}
More on wordpress.org:
- Highlight Current Page in WordPress 3.0 Menus
- Adding
.active
class to active menu item
To also highlight the menu item when one of the child pages is active, also check for the other class (current-page-ancestor
) like below:
add_filter('nav_menu_css_class' , 'special_nav_class' , 10 , 2);
function special_nav_class ($classes, $item) {
if (in_array('current-page-ancestor', $classes) || in_array('current-menu-item', $classes) ){
$classes[] = 'active ';
}
return $classes;
}