Bootstrap WordPress Menu: Add Custom CSS Class

Question

Good evening, I need to convert the following static menu into a menu for WordPress. Below is the HTML code:

            <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
                <div class="container px-5">
                    <a class="navbar-brand" href="index.html">Start Bootstrap</a>
                    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
                    <div class="collapse navbar-collapse" id="navbarSupportedContent">
                        <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
                            <li class="nav-item"><a class="nav-link" href="index.html">Home</a></li>
                            <li class="nav-item"><a class="nav-link" href="about.html">About</a></li>
                            <li class="nav-item"><a class="nav-link" href="contact.html">Contact</a></li>
                            <li class="nav-item"><a class="nav-link" href="pricing.html">Pricing</a></li>
                            <li class="nav-item"><a class="nav-link" href="faq.html">FAQ</a></li>
                            <li class="nav-item dropdown">
                                <a class="nav-link dropdown-toggle" id="navbarDropdownBlog" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Blog</a>
                                <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdownBlog">
                                    <li><a class="dropdown-item" href="blog-home.html">Blog Home</a></li>
                                    <li><a class="dropdown-item" href="blog-post.html">Blog Post</a></li>
                                </ul>
                            </li>
                            <li class="nav-item dropdown">
                                <a class="nav-link dropdown-toggle" id="navbarDropdownPortfolio" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Portfolio</a>
                                <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdownPortfolio">
                                    <li><a class="dropdown-item" href="portfolio-overview.html">Portfolio Overview</a></li>
                                    <li><a class="dropdown-item" href="portfolio-item.html">Portfolio Item</a></li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                </div>
            </nav>

While below the PHP code I have in the theme header.php file:

    <?php
                            wp_nav_menu(array(
                                    'theme_location' => 'menu-1',
                                    'container_id'    => 'site-navigation',
                                    'menu_class'      => 'navbar-nav ms-auto mb-2 mb-lg-0',
                                    'menu_id'         => 'primary-menu',
                                    'add_a_class'     => 'nav-link',
                                    'add_li_class'     => 'nav-item',
                            ));

                            ?>

Everything works fine but the "nav-link" and "nav-item" classes are not added. How can I solve? Thanks

Answer 1

You can't normally add extra li classes without tweaking your theme.

Try adding this snippet in your functions.php file to allow you to add extra classes to your li tags:

// =======================================
// Customize Menus
// =======================================
       
        // Ability to add classes to wp_nav_menu LI tags

        add_filter('nav_menu_css_class', 'add_additional_class_on_li', 1, 3);

        function add_additional_class_on_li($classes, $item, $args)
        {
            if (isset($args->add_li_class))
            {
                $classes[] = $args->add_li_class;
            }
            return $classes;
        }
         
        // A tags

        add_filter( 'nav_menu_link_attributes', 'add_link_atts');

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

Now you can add this extra li class property like so:

       wp_nav_menu( array(
            'theme_location'    => 'full-width-menu',
            'depth'             => 1,
            'container'         => 'nav',
            'container_class'   => '',
            'container_id'      => 'mob-nav',
            'menu_class'        => '',
            'add_li_class'      => 'nav-item'
        ) );

Also you should look into using a bootstrap nav walker for wordpress.

https://dhali.com/wordpress/add-wp-bootstrap-navwalker-to-you-wordpress-theme/