wrapping parent and child pages in separate ul in wp nav menu

618 Views Asked by At

I need the nav menu structure like the following.

<ul class="side-menu-list">
    <li><a href="#">Parent Page 1</a>
        <ul>
            <li><a href="#">Traditional Braces</a></li>
            <li><a href="#">Lingual Braces</a></li>
            <li><a href="#">Invisalign</a></li>
            <li><a href="#">Temporary Anchorage Devices</a></li>
            <li><a href="#">Surgical Orthodontics</a></li>
            <li><a href="#">TMJ Treatment</a></li>
            <li><a href="#">All About Retainers</a></li>
            <li><a href="#">Emergency Treatment</a></li>
        </ul>
    </li>
</ul>
<ul class="side-menu-list">
    <li><a href="#">Paent Page 2</a>
        <ul>
            <li><a href="#">Early Treatment/Prevention</a></li>
            <li><a href="#">Two-Phase Treatment</a></li>
            <li><a href="#">Hometown Smiles Gallery</a></li>
        </ul>
    </li>
</ul>

Which means every parent page and its sub pages should be wrapped in a ul. So iam looking for a custom walker menu so that every main menu and its sub menus will be wrapped in a ul tag dynamically.

1

There are 1 best solutions below

2
On
 // Register two menus
 // Go to Menus and add menu items to each menu
 // call the wp_nav_menu function twice.
 // this goes in functions.php
 register_nav_menus( array(
   'primary'  => __( 'Primary', 'text-domain' ),
   'secondary'  => __( 'Secondary', 'text-domain' )
                    ) );

 <ul class="side-menu-list">
   <li><a href="#">Parent Page 1</a>
    // display the menu on front end
    wp_nav_menu(
       array(
        'theme_location'    => 'primary',
        'depth'             => 2,
        'container'         => 'div',
        'container_id'      => 'primary',
        'container_class'   => 'primary',
        'menu_class'        => 'ul-class' ) );
   </li>
  </ul>

 <ul class="side-menu-list">
   <li><a href="#">Parent Page 1</a>
    wp_nav_menu(
       array(
        'theme_location'    => 'secondary',
        'depth'             => 2,
        'container'         => 'div',
        'container_id'      => 'secondary',
        'container_class'   => 'secondary',
        'menu_class'        => 'ul-class' ) );
   </li>
  </ul>