I need to convert this menu from a static site to a wp site with the wp_nav_menu() function, it has 2 ul's inside and so I'm not sure how to go about it:

<div class="nav-menu"> 
                <ul class="nav-container">
                    <li class="list-item-main"> <span> <a href="#"> Sobre nosotros. </a> </span> </li>
                    <li class="list-item-main"> <span> <a href="#"> Real estate. </a> </span> 
                            <li> <a href="#"> Oferta </a></li>
                            <li> <a href="#"> Venta </a> </li>
                            <li> <a href="#"> Colaboración </a> </li>
                    <li class="list-item-main"> <span> <a href="#"> Consulting. </a></span> 
                            <li> <a href="#"> Import/Export </a></li>
                    <li class="list-item-main"> <span> <a href="#"> Contacto. </span> </a> </li>
  • 1
    WP will automatically create the inner ULs. Just output wp_nav_menu and see if anything needs to be tweaked, like the class, which you can do without even bothering with a custom walker. – WebElaine May 1 '17 at 18:03

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;
  • The class of the li-s it-s what worried me. Thank you, I'll try this in a bit. – Sergi May 1 '17 at 19:53

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.