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>
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 );
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; }
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>
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;
}
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.
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 );
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.