How to add "active" class to wp_nav_menu() current menu item (simple way)

Question

I am creating custom Wordpress theme using a starter theme _Underscores and Bootstrap.

I would like to modify wp_nav_menu so that it assigns the current menu item .active class instead of the default .current-menu-item. I need this in order to use .active class from Bootstrap.

Here is what I have (extra stuff comes from WP so please scroll to the right):

<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 achieve this without modifying ../wp-includes/nav-menu-template.php and without using JS.

UPDATE: I found the answer just before posting this question, but since I had a rather hard time finding it, posting this as a QA to hopefully save someone some time.

mzrnsh · Accepted Answer · 2019-10-07T16:00:53.183

119

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:

edited Oct 07 '19 at 16:00

answered Nov 06 '14 at 21:09

mzrnsh

2,260
2
20
25

Worked awesome. Do you have a solution to tracking child posts too? It works on my Blog link but not for the children posts. – OneMohrTime Sep 11 '16 at 19:21
2

@OneMohrTime check out the other answer below. – Unicornist Aug 04 '17 at 15:19
what about a element ? how can add 'active' class ```.current-menu-item a``` element ? – Fatih Toprak Feb 09 '20 at 10:42
Update 2022: this still works – mzrnsh Jan 05 '22 at 16:37

score 22 · Answer 2 · edited Aug 05 '17 at 23:04

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;
}

score 10 · Answer 3 · answered Oct 28 '17 at 14:29

If you want the 'active' in the html:

header with html and php:

        <?php
        $menu_items = wp_get_nav_menu_items( 'main_nav' ); // id or name of menu
        foreach ( (array) $menu_items as $key => $menu_item ) {
            if ( ! $menu_item->menu_item_parent ) {
                echo "<li class=" . vince_check_active_menu($menu_item) . "><a href='$menu_item->url'>";
                echo $menu_item->title;
                echo "</a></li>";
            }
        }
        ?>

functions.php:

function vince_check_active_menu( $menu_item ) {
    $actual_link = ( isset( $_SERVER['HTTPS'] ) ? "https" : "http" ) . "://$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]";
    if ( $actual_link == $menu_item->url ) {
        return 'active';
    }
    return '';
}

Perfect for creating menus completly from the scratch e.g. for importing from other CMS like typo3 and joomla! — chakmear, Apr 27 '21 at 08:44

score 7 · Answer 4 · answered Aug 07 '17 at 15:15

In addition to previous answers, if your menu items are Categories and you want to highlight them when navigating through posts, check also for current-post-ancestor:

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

function special_nav_class ($classes, $item) {
    if (in_array('current-post-ancestor', $classes) || in_array('current-page-ancestor', $classes) || in_array('current-menu-item', $classes) ){
        $classes[] = 'active ';
    }
    return $classes;
}

score 4 · Answer 5 · answered Sep 02 '17 at 12:17

In header.php insert this code to show menu:

<?php
    wp_nav_menu(
        array(
            'theme_location' => 'menu-one',
            'walker' => new Custom_Walker_Nav_Menu_Top
        )
    );
?>

In functions.php use this:

class Custom_Walker_Nav_Menu_top extends Walker_Nav_Menu
{
    function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
        $is_current_item = '';
        if(array_search('current-menu-item', $item->classes) != 0)
        {
            $is_current_item = ' class="active"';
        }
        echo '<li'.$is_current_item.'><a href="'.$item->url.'">'.$item->title;
    }

    function end_el( &$output, $item, $depth = 0, $args = array() ) {
        echo '</a></li>';
    }
}

your solution is the best for me. Gives a lot of freedom customizing the Wordpress menu :) — Tuxy, Jul 25 '20 at 10:24

How to add "active" class to wp_nav_menu() current menu item (simple way)

5 Answers5

Linked