The html
you give is standard WordPress behaviour, even including the wrapping <div>
. Additionally you can pass parameters to wp_nav_menu
to better suit your needs. The following should replicate your html
:
$args = array(
'theme_location' => '',
'menu' => '',
'container' => 'div',
'container_class' => 'nav-menu',
'container_id' => '',
'menu_class' => 'nav-container',
'menu_id' => '',
'echo' => true,
'fallback_cb' => 'wp_page_menu',
'before' => '',
'after' => '',
'link_before' => '',
'link_after' => '',
'items_wrap' => '<ul id=\"%1$s\" class=\"%2$s\">%3$s</ul>',
'depth' => 0,
'walker' => '');
wp_nav_menu ($args);
In the items_wrap
parameter you see the default <ul>
that wraps around (sub)menus. If you want it different, that’s possible.
The only thing that is not standard is the class to apply on the <li>
items. Luckily there is a filter for that:
add_filter ('nav_menu_css_class','wpse265503_nav_li_class',10,4);
function wpse265503_nav_li_class ($classes,$item,$args,$depth){
if ($depth==0) // only do this on the top items
$classes[] = "list-item-main";
return $classes;
}