wordpressdrop-down-menumenuwp-nav-walker

Custom submenu nav Walker


I am using a custom nav walker and would like to create a tree menu.

Here is the HTML Structure for the full navigation

<ul class="navbar-nav">
                            <li class="has_dropdown">
                                <a href="index.html">HOME</a>
                                <div class="dropdowns dropdown--menu">
                                    <ul>
                                        <li>
                                            <a href="index.html">Home Multi Vendor</a>
                                        </li>
                                        <li>
                                            <a href="index-single.html">Home Two Single User</a>
                                        </li>
                                        <li>
                                            <a href="index3.html">Home Three Product</a>
                                        </li>
                                    </ul>
                                </div>
                            </li>
                            <li class="has_dropdown">
                                <a href="all-products-list.html">all product</a>
                                <div class="dropdowns dropdown--menu">
                                    <ul>
                                        <li>
                                            <a href="all-products.html">Recent Items</a>
                                        </li>
                                        <li>
                                            <a href="all-products.html">Popular Items</a>
                                        </li>
                                        <li>
                                            <a href="index3.html">Free Templates</a>
                                        </li>
                                        <li>
                                            <a href="#">Follow Feed</a>
                                        </li>
                                        <li>
                                            <a href="#">Top Authors</a>
                                        </li>
                                    </ul>
                                </div>

Here is the HTML call for the wp_nav_menu:

  <?php 
                    $args = array(

                        'container'       => 'ul',
                        'theme_location'  => 'primary-menu',
                        'menu_class'      => 'navbar-nav',


                       );
                       wp_nav_menu( $args );
    ?>              

How can I do this with Walker function


Solution

  • Here's more info on the WordPress NavWalker Class

    To add a walker to your menu, you would include the walker-class in your code & apply it to the menu by passing its function-name as an argument:

    nav-menu output for your theme's template-files

    $args = [
      'container'       => 'ul',
      'theme_location'  => 'primary-menu',
      'menu_class'      => 'navbar-nav',
      'walker'          => new Walker_Texas_Ranger()
    ];
    wp_nav_menu( $args );
    

    Actual nav-walker class ( in your theme's functions.php or elsewhere )

    class Walker_Texas_Ranger extends Walker {
    
        // Tell Walker where to inherit it's parent and id values
        var $db_fields = array(
            'parent' => 'menu_item_parent', 
            'id'     => 'db_id' 
        );
    
        /**
         * At the start of each element, output a <li> and <a> tag structure.
         * 
         * Note: Menu objects include url and title properties, so we will use those.
         */
        function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
            $output .= sprintf( "\n<li><a href='%s'%s>%s</a></li>\n",
                $item->url,
                ( $item->object_id === get_the_ID() ) ? ' class="current"' : '',
                $item->title
            );
        }
    
    }