将活动类添加到 Wordpress 中当前选定的锚点

Question

How to add active class to my anchor in Wordpress? Current code is below:

$args = array(
    'theme_location' => 'primary',
    'container' => 'div',
    'container_class' => 'collapse navbar-collapse',
    'menu_class' => 'nav navbar-nav navbar-right'
);
wp_nav_menu( $args );

I get this output for each menu item:

<li id="menu-item-42" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-42">
    <a href="http://localhost:8888/axial/services/">Services</a>
</li>

But I want the 'a' tag to have an 'active' class, like I have shown below:

<li id="menu-item-42" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-42">
    <a class="active" href="http://localhost:8888/axial/services/">Services</a>
</li>

Answer 1

Yes it's possible, try code below:

function add_class_to_href( $classes, $item ) {
    if ( in_array('current_page_item', $item->classes) ) {
        $classes['class'] = 'active';
    }
    return $classes;
}
add_filter( 'nav_menu_link_attributes', 'add_class_to_href', 10, 2 );

Answer 2

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

Answer 3

You can do this with CSS.

you can use current-menu-item class which is added by default.

 /*you have to add the active menu item styles like this*/ a{ padding:5px; font-family:arial; color:#333; text-decoration:none; } .navbar-right ul li{ display:inline-block; list-style-type:none; border:1px solid #bbb; padding:5px; } .navbar-right li.current-menu-item > a { color:#fff; background:#bbb; /*you can add the active anchor styles here*/ }

 <nav class="navbar-right"> <ul> <li class="current-menu-item"><a href="/home/">Home</a></li> <li class="menu-item"><a href="/about/">About</a></li> <li class="menu-item"><a href="/contact/">Contact</a></li> </ul> </nav>

Answer 4

Today most of the time we have to deal with dropdown menus in wordpress so,just to improvise the above answer, you can use:

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

you can add active class for child elements using the below code: 
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;
}

Answer 5

I also face the same problem and after searching many page I could only find the solution that I have to set it using jquery code. so I find a unique class addition in my page ".current_page_item" you might have the same or ".current_menu_item" etc.. so just include the following jquery code to your footer and your page will work fine.

$(".current_page_item a").addClass("active");

Do hop this will solve your problem.

Answer 6

You can add "nav-link" class to all anchor tags while having the "active" class on current menu item only by using this code.

/**
 * Add CSS class for "<a>" tags in menu
 */
function your_theme_add_menu_link_class( $classes, $item ) {
    $classes['class'] = "nav-link"; // Add class to every "<a>" tags
    if ( in_array('current_page_item', $item->classes) ) {
        $classes['class'] = 'nav-link active'; // Add class to current menu item's "<a>" tag
    }
    return $classes;
}
add_filter( 'nav_menu_link_attributes', 'your_theme_add_menu_link_class', 10, 2 );