Add extra markup to WP menus

Question

Have been asked to redevelop a HTML website in to a WP theme, it has quite an advanced menu structure and i'm not quite sure how I can replicate it. The second menu item has a sub-menu, but it is not just a 'ul' inside a 'li', there are extra divs etc.. because the drop down has a 3 column layout with 2 columns containing the child links and the 3rd containing content.

This is an example:

<ul class="nav navbar-nav three">
    <li class="dropdown yamm-fw"> <a href="#" class="dropdown-toggle">Parent Link</a>
                <ul class="dropdown-menu">
                  <li> 
                    <div class="yamm-content">
                      <div class="row">

                        <ul class="col-sm-6 col-md-3 list-unstyled two">
                            <li><a href="#"><i class="fa fa-map-marker"></i> Child Link 1</a></li>
                            <li><a href="#"><i class="fa fa-map-marker"></i> Child Link 2</a></li>
                            <li><a href="#"><i class="fa fa-map-marker"></i> Child Link 3</a></li>
                            <li><a href="#"><i class="fa fa-map-marker"></i> Child Link 4</a></li>
                        </ul>

                        <ul class="col-sm-6 col-md-3 list-unstyled two">
                            <li><a href="#"><i class="fa fa-map-marker"></i> Child Link 5</a></li>
                            <li><a href="#"><i class="fa fa-map-marker"></i> Child Link 6</a></li>
                            <li><a href="#"><i class="fa fa-map-marker"></i> Child Link 7</a></li>
                            <li><a href="#"><i class="fa fa-map-marker"></i> Child Link 8</a></li>
                        </ul>

                          <ul class="col-sm-6 col-md-6 list-unstyled two">
                            <li>
                                <h5>A title here</h5>
                            </li>
                            <li class="dart">
                                Some text here
                            </li>
                        </ul>
                      </div>
                    </div>
                  </li>
                </ul>
            </li>
        </ul>

I have so far managed to figure out the classes and extra divs using the wp_nav_menu $args and a walker, here is what I have so far:

    class Child_Wrap extends Walker_Nav_Menu
    {
        function start_lvl(&$output, $depth = 0, $args = array())
        {
            $indent = str_repeat("\t", $depth);
            $output .= "\n$indent<ul class=\"dropdown-menu\"><li><div class=\"yamm-content\"><div class=\"row\">\n";
        }
        function end_lvl(&$output, $depth = 0, $args = array())
        {
            $indent = str_repeat("\t", $depth);
            $output .= "$indent</div></div></li></ul>\n";
        }
    } 

<?php wp_nav_menu(array( 'menu' => 'Header Nav', 'container' => false, 'menu_class' => 'nav navbar-nav three', 'walker' => new Child_Wrap())); ?>

But rather than having sub-links in the menus dashboard, is there a way of inserting a secondary menu to be the sub-menu, which can create the columns?

<?php wp_nav_menu(array( 'menu' => 'Submenu 1', 'container' => false, 'menu_class' => 'col-sm-6 col-md-3 list-unstyled two', 'link_before' => '<i class="fa fa-map-marker"></i> ')); ?>

Thanks

Answer 1

When developing a menu on a bootstrap based theme, I now use the following Walker:

'walker' => new Custom_Walker_Nav_Menu

class Custom_Walker_Nav_Menu extends Walker_Nav_Menu {

// add classes to ul sub-menus
function start_lvl( &$output, $depth ) {
    // depth dependent classes
    $indent = ( $depth > 0  ? str_repeat( "\t", $depth ) : '' ); // code indent
    $display_depth = ( $depth + 1); // because it counts the first submenu as 0
    $classes = array(
        'sub-menu',
        ( $display_depth % 2  ? 'menu-odd' : 'menu-even' ),
        ( $display_depth >=2 ? 'sub-sub-menu' : '' ),
        'menu-depth-' . $display_depth
        );
    $class_names = implode( ' ', $classes );

    // build html
    $output .= "\n" . $indent . '<ul class="dropdown-menu">' . "\n";
}

  function start_el ( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
    // Most of this code is copied from original Walker_Nav_Menu
    global $wp_query, $wpdb;
    $indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';

    $class_names = $value = '';

    $classes = empty( $item->classes ) ? array() : (array) $item->classes;
    $classes[] = 'menu-item-' . $item->ID;

    $class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item, $args ) );
    $class_names = ' class="' . esc_attr( $class_names ) . '"';

    $id = apply_filters( 'nav_menu_item_id', 'menu-item-'. $item->ID, $item, $args );
    $id = strlen( $id ) ? ' id="' . esc_attr( $id ) . '"' : '';

    $has_children = $wpdb->get_var("SELECT COUNT(meta_id)
                            FROM wp_postmeta
                            WHERE meta_key='_menu_item_menu_item_parent'
                            AND meta_value='".$item->ID."'");

    if ( $depth == 0 && $has_children > 0  ) {

    $output .= $indent . '<li class="dropdown">';

    $attributes  = ! empty( $item->attr_title ) ? ' title="'  . esc_attr( $item->attr_title ) .'"' : '';
    $attributes .= ! empty( $item->target )     ? ' target="' . esc_attr( $item->target     ) .'"' : '';
    $attributes .= ! empty( $item->xfn )        ? ' rel="'    . esc_attr( $item->xfn        ) .'"' : '';
    $attributes .= ! empty( $item->url )        ? ' href="'   . esc_attr( $item->url        ) .'"' : '';

    $item_output = $args->before;
    $item_output .= '<a'. $attributes .' data-hover="dropdown" class="dropdown-toggle" role="button" aria-haspopup="true" aria-expanded="false">';
    $item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after;
    $item_output .= '<span class="caret"></span></a>';
    $item_output .= $args->after;

    } else {

    $output .= $indent . '<li>';

    $attributes  = ! empty( $item->attr_title ) ? ' title="'  . esc_attr( $item->attr_title ) .'"' : '';
    $attributes .= ! empty( $item->target )     ? ' target="' . esc_attr( $item->target     ) .'"' : '';
    $attributes .= ! empty( $item->xfn )        ? ' rel="'    . esc_attr( $item->xfn        ) .'"' : '';
    $attributes .= ! empty( $item->url )        ? ' href="'   . esc_attr( $item->url        ) .'"' : '';

    $item_output = $args->before;
    $item_output .= '<a'. $attributes .'>';
    $item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after;
    $item_output .= '</a>';
    $item_output .= $args->after;

    }

    $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args, $id );
  }

}