In wordpress themes, how do I add a class to the <a> item in the nav?

Question

I am currently making a wordpress theme and I have trouble adding classes to the items in my menus using wp_nav_menu().

The menu in the non-wordpress version looks like this:

<div class="collapse navbar-collapse" id="navbarsExampleDefault">
                <ul class="navbar-nav ml-auto">
                    <li class="nav-item">
                        <a class="nav-link page-scroll" href="#header">HOME <span class="sr-only">(current)</span></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link page-scroll" href="#features">FEATURES</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link page-scroll" href="#details">DETAILS</a>
                    </li>                
                </ul>
            </div>

I was able to add the "nav-item" class to the li items without any problems by using an additional arugment and setting the filter in the functions.php:

header.php:

               <?php
                    wp_nav_menu( 
                        array(
                            "theme_location" => "top-menu",
                            "menu_class" => "navbar-nav ml-auto",
                            "container" => "div",
                            "container-class" => "collapse navbar-collapse",
                            "container-id" => "navbarDefault",
                            "fallback_cb" => false,
                            "add_li_class" => "nav-item",
                        )
                    );
                ?>

functions.php

function add_additional_class_on_li($classes, $item, $args) {
    if(isset($args->add_li_class)) {
        $classes[] = $args->add_li_class;
    }
    return $classes;
}
add_filter('nav_menu_css_class', 'add_additional_class_on_li', 1, 3);```



I've tried creating a custom walker but that just crashes the entire site every time I try to add a new site to the nav menu.

Answer 1

alter your function slightly

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

alternatively to target a specific menu:

function add_additional_class_on_li( $classes, $item, $args ) {
    if ( 'top-menu' === $args->theme_location ) {
        $classes[] = 'nav-item';
    }
        return $classes;
    }
    add_filter( 'nav_menu_css_class', 'add_additional_class_on_li', 10, 2 );

to add link classes as well you can use the nav_menu_link_attributes hook:

function add_additional_class_on_nav_link( $atts, $item, $args ) {
    if( $args->theme_location == 'top-menu' ) {
        $atts['class'] = 'nav-link page-scroll';
    }
    return $atts;
}
add_filter( 'nav_menu_link_attributes', 'add_additional_class_on_nav_link', 10, 3 );