theme growth – How So as to add li class and a category wp_nav_menu() with bootstrap 5 navbar?

August 29, 2022

1

capabilities.php

I have to convert the next static menu right into a menu for WordPress.

<?php
operate theme_setup() {
    wp_enqueue_style('bootstrap', get_template_directory_uri().'/bootstrap/css/bootstrap.rtl.min.css', array(), '5.2', 'all');
    wp_enqueue_style('bootstrap', get_template_directory_uri().'/model.css');
    wp_enqueue_script('bootstrap', get_template_directory_uri().'/bootstrap/js/bootstrap.min.js', array(), '5.2', true );
    register_nav_menus(
        array (
            'top_menu' => __('Prime Menu')
        )
    );
}
add_action('wp_enqueue_scripts', 'theme_setup');
operate add_class_li($courses, $merchandise, $args) {
    if (isset($args->li_class)) {
        $courses[] = $args->li_class;
    }
    if (isset($args->active_class) && in_array('current-menu_item', $courses)) {
        $courses[] = $args->active_class;
    }
    return $courses;
}
add_filter('nav_menu_css_class', 'add_class_li', 10, 3);

Whereas under the PHP code I’ve within the theme header.php file:

header.php

<nav class="navbar navbar-expand-lg bg-light">
    <div class="container-fluid">
        <a category="navbar-brand" href="#">Navbar</a>
        <button class="navbar-toggler" sort="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">
            <?php
                wp_nav_menu( array(
                    'menu' => 'top_menu',
                    'menu_class' => 'navbar-nav me-auto mb-2 mb-lg-0',
                    'container' => 'ul',
                    'li_class' => 'nav-item',
                    'a_class' => 'nav-link',
                    'active_class' => 'energetic'
                ));
            ?>

            <kind class="d-flex" position="search">
                <enter class="form-control me-2" sort="search" placeholder="Search" aria-label="Search">
                <button class="btn btn-outline-success" sort="submit">Search</button>
            </kind>
        </div>
    </div>
</nav>

I see this