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
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:
$args = [
'container' => 'ul',
'theme_location' => 'primary-menu',
'menu_class' => 'navbar-nav',
'walker' => new Walker_Texas_Ranger()
];
wp_nav_menu( $args );
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
);
}
}