How to Add Class to Link in Wp_Nav_Menu

How to add class to link in wp_nav_menu?

Thanks to Sergiu Paraschiv comment the issue was in regards of limiting to 1.

Therefore it should be in function.php:

function add_menuclass($ulclass) {
return preg_replace('/<a /', '<a class="list-group-item"', $ulclass);


There is a better way actually which gives us much more control and the piece of code is provided by Jeff Starr on this post

NOTE: this isn't adding the current class tho

Create your menu on wp, then remember to click the location in the menu editor then in your function you'd do:

// custom menu example @
function clean_custom_menus() {
$menu_name = 'nav-primary'; // specify custom menu name
if (($locations = get_nav_menu_locations()) && isset($locations[$menu_name])) {
$menu = wp_get_nav_menu_object($locations[$menu_name]);
$menu_items = wp_get_nav_menu_items($menu->term_id);

$menu_list = '<nav>' ."\n";
$menu_list .= "\t\t\t\t". '<ul>' ."\n";
foreach ((array) $menu_items as $key => $menu_item) {
$title = $menu_item->title;
$url = $menu_item->url;
$menu_list .= "\t\t\t\t\t". '<li><a href="'. $url .'">'. $title .'</a></li>' ."\n";
$menu_list .= "\t\t\t\t". '</ul>' ."\n";
$menu_list .= "\t\t\t". '</nav>' ."\n";
} else {
// $menu_list = '<!-- no list defined -->';
echo $menu_list;

Finally we can call our menu:

<?php if (function_exists(clean_custom_menus())) clean_custom_menus(); ?>

The code above is taken from the post linked above, I thought to include this answer as it appears this question has many visits.


Another solution would be (maybe the best):


wp_nav_menu( array(
'theme_location' => 'topnav',
'menu' =>'topnav',
'container' => 'div',
'container_class' => 'collapse navbar-collapse',
'container_id' => 'navbarCollapse',
'menu_class' => 'menu',
'echo' => true,
'fallback_cb' => 'wp_page_menu',
'items_wrap' => '<ul class="nav justify-content-end w-100 %2$s">%3$s</ul>',
'depth' => 0
) );


 // register the nav
function register_my_menu() {
register_nav_menu('topnav',__( 'topnav' ));
add_action( 'init', 'register_my_menu' );

// let's add "*active*" as a class to the li

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;

// let's add our custom class to the actual link tag

function atg_menu_classes($classes, $item, $args) {
if($args->theme_location == 'topnav') {
$classes[] = 'nav-link';
return $classes;
add_filter('nav_menu_css_class', 'atg_menu_classes', 1, 3);

function add_menuclass($ulclass) {
return preg_replace('/<a /', '<a class="nav-link"', $ulclass);

Wordpress Menu - Add class to anchors

You can do what you need with the WP nav_menu_link_attributes hook:

add_filter( 'nav_menu_link_attributes', function($atts) {
$atts['class'] = "nav-link";
return $atts;
}, 100, 1 );

...or if you don't like closures:

function add_link_atts($atts) {
$atts['class'] = "nav-link";
return $atts;
add_filter( 'nav_menu_link_attributes', 'add_link_atts');

Filter menu list items

To avoid using the WordPress menu UI to add classes to the menu list items, you can take advantage of the 'nav_menu_css_class' filter:

add_filter( 'nav_menu_css_class', function($classes) {
$classes[] = 'nav-item';
return $classes;
}, 10, 1 );

How to add class to wp_nav_menu() function

You should try and read the documentation for issues like this as the WordPress documentation is extensive and very good.

To solve this issue, below 'theme_location' => 'top' add in 'menu_class' => 'menu vertical medium-horizontal expanded medium-text-center'. So your final code will be:

<div class="top-bar" id="main-menu">
$args = array(
'theme_location' => 'top',
'menu_class' => 'menu vertical medium-horizontal expanded medium-text-center'
<?php wp_nav_menu($args); ?>

Wordpress add a class to menu link

You can do it through admin panel also

  • In Appearance > Menus, click the Screen Options tab

  • Under Show advanced menu properties, check CSS Classes

  • Now expand any menu item to reveal the CSS Classes (optional) text


  • Enter your class name and save your menu to apply the class to the

    menu item

WordPress - How to add class to top level nav links only

The problem is that the primary-menu is the complete top menu so this can't work for your menu items. Try this instead:

add_filter( 'nav_menu_link_attributes', 'add_class_anchor_nav_primary', 10, 3 );
function add_class_anchor_nav_primary( $atts, $item, $args ) {
if ( (int) $item->menu_item_parent === 0 ) {
$class = 'dropdown submenu';
$atts['class'] = $class;

return $atts;

This will add your class to all main links excluding the dropdown links. It works because we're checking if the given item has a parent or not. If not (=== 0), we can say, that this is a non-dropdown link. I've tested it and it works.

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

  • Highlight Current Page in WordPress 3.0 Menus
  • Adding .active class to active menu item

Related Topics

Leave a reply