0

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> 
                        <ul>
                            <li> <a href="#"> Oferta </a></li>
                            <li> <a href="#"> Venta </a> </li>
                            <li> <a href="#"> Colaboración </a> </li>
                        </ul>
                    </li>
                    <li class="list-item-main"> <span> <a href="#"> Consulting. </a></span> 
                        <ul>
                            <li> <a href="#"> Import/Export </a></li>
                        </ul>
                    </li>
                    <li class="list-item-main"> <span> <a href="#"> Contacto. </span> </a> </li>
                </ul>
            </div>  
1
  • 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
1

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;
    }
1
  • 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.