How to add "active" class to wp_nav_menu() current menu item (simple way)
I am creating custom Wordpress theme using a starter theme _Underscores. I am also using Bootstrap as a front-end framework.
I would like to modify wp_nav_menu so that it assigns current menu item class="active" instead of class="current-menu-item" (which is default). Or maybe at least assigns both of these classes. I need this in order to use .active class from bootstrap.css.
Here is the example of what I have (all these classes are wp generated, please scroll to see what I mean):
<ul id="menu-main-menu" class="nav navbar-nav">
<li id="menu-item-14" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-13 current_page_item menu-item-14"><a href="">item1</a></li>
<li id="menu-item-12" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-12"><a href="">item2</a></li>
</ul>
And here is what I need:
<ul id="menu-main-menu" class="nav navbar-nav">
<li id="menu-item-14" class="active menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-13 current_page_item menu-item-14"><a href="">item1</a></li>
<li id="menu-item-12" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-12"><a href="">item2</a></li>
</ul>
I would prefer to do this in a correct way - don't want to change anything in ..wp-includes/nav-menu-template.php for sure, don't want to use js either.
Well I found the answer just before posting this question (it was all ready, that's why it is still formed in a way as if I am still seeking the answer), but I had rather hard time finding it so I decided to post it as a QA. I hope someone will find this useful.
Answer
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: