Add submenu inside li parent div using Walker_Nav_Menu for WordPress

Question

I am trying to add submenu elements to the inside of a div of the parent li.

Here is what I get ...

<nav class="menu-main-menu-container"> <ul id="nav" class=""> <li id="menu-item-26" class="visit menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-24 current_page_item"> <div> <a title="Locations | Traditions" href="#">Visit</a> <span>Locations | Traditions</span> <div class="arrow"></div> </div> <div class="main_sub_nav_wrap"> <h2>Visit</h2> </div> <ul class="sub-menu"> <li id="menu-item-82" class="menu-item menu-item-type-custom menu-item-object-custom"> <a href="#">Sub Link 1</a> </li> <li id="menu-item-83" class="menu-item menu-item-type-custom menu-item-object-custom"> <a href="#">Sub Link 2</a> </li> <li id="menu-item-84" class="menu-item menu-item-type-custom menu-item-object-custom"> <a href="#">Sub Link 3</a> </li> </ul> </li> </ul> 

I would like him to put it in "main_sub_nav_wrap" like this.

 <nav class="menu-main-menu-container"> <ul id="nav" class=""> <li id="menu-item-26" class="visit menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-24 current_page_item"> <div> <a title="Locations | Traditions" href="#">Visit</a> <span>Locations | Traditions</span> <div class="arrow"></div> </div> <div class="main_sub_nav_wrap"> <h2>Visit</h2> <ul class="sub-menu"> <li id="menu-item-82" class="menu-item menu-item-type-custom menu-item-object-custom"> <a href="#">Sub Link 1</a> </li> <li id="menu-item-83" class="menu-item menu-item-type-custom menu-item-object-custom"> <a href="#">Sub Link 2</a> </li> <li id="menu-item-84" class="menu-item menu-item-type-custom menu-item-object-custom"> <a href="#">Sub Link 3</a> </li> </ul> </div> </li> </ul> 

Here is what I use to make navigation extend the walker class ...

 <?php class My_Walker extends Walker_Nav_Menu { function start_el(&$output, $item, $depth, $args) { global $wp_query; $indent = ( $depth ) ? str_repeat( "\t", $depth ) : ''; $class_names = $value = ''; $classes = empty( $item->classes ) ? array() : (array) $item->classes; $class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item ) ); $class_names = ' class="' . esc_attr( $class_names ) . '"'; $output .= $indent . '<li id="menu-item-'. $item->ID . '"' . $value . $class_names .'>'; $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 .= '<div><a'. $attributes .'>'; $item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after; $item_output .= '</a><span>' . $item->attr_title . '</span><div class="arrow"></div></div><div class="main_sub_nav_wrap"><div class="main_sub_nav"><div class="container"><div class="main_sub_nav_text"><h2>' . $item->title . '</h2></div></div></div></div>'; $item_output .= $args->after; $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args ); } } ?> 

I use this to add to my template ...

 <?php $walker = new My_Walker; wp_nav_menu(array( 'echo' => true, 'container' => '', 'theme_location' => 'header_menu', 'container' => 'nav', 'menu_class' => '', 'menu_id' => 'nav', 'depth' => 0, 'walker' => $walker )); ?> 

Answer 1

I did not use this code at the time, so forgive me if it is a bit off. Here I add a custom <ul> submenu for one of my menu items (with ID 63) and leave the rest of the menu as it is. You can change the if ($isCategoryItem){ ... } section to suit your needs.

 // Add product category menu as sub menu class My_Walker extends Walker_Nav_Menu{ function start_el(&$output, $item, $depth, $args) { global $wp_query; $indent = ( $depth ) ? str_repeat( "\t", $depth ) : ''; $class_names = $value = ''; $classes = empty( $item->classes ) ? array() : (array) $item->classes; $class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item ) ); $class_names = ' class="' . esc_attr( $class_names ) . '"'; $output .= $indent . '<li id="menu-item-'. $item->ID . '"' . $value . $class_names .'>'; $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; // $item_output is the actually outputted variable - add to it here as needed. // Or modify the previous 5 lines if you need to change the link itself // Add category list to Category menu item $isCategoryItem = $item->ID == "63"; if ($isCategoryItem){ $terms = get_prod_cats(); if (count($terms) > 0) { $cat_out .= '<ul class="sub-menu">'; foreach ($terms as $term) { $cat_out .= '<li>' . '<a href="'. esc_url(home_url('/')) . 'category/' . $term->slug . '">' . $term->name . '</a>' . '</li>'; } $cat_out .= '</ul>'; } // Here we actually modify it. The lines before set up the custom output $item_output = $item_output . $cat_out; } // Send it off to the next menu item! $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args ); } }