This would do it:
class My_Walker_Nav_Menu extends Walker_Nav_Menu {
private $_before = null;
public function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
// Backup the original "before", if any.
if ( null === $this->_before ) {
$this->_before = $args->before;
}
// Now add the wrapper div, if applicable.
if ( 0 == $depth ) {
$args->before="<div class="sub-menu-wrapper">" . $this->_before;
} else {
$args->before = $this->_before;
}
// Then let the parent walker does the output generation.
parent::start_el( $output, $item, $depth, $args, $id );
}
public function end_el( &$output, $item, $depth = 0, $args = array() ) {
// Close the wrapper div, if applicable.
if ( 0 == $depth ) {
$output .= '</div><!-- .sub-menu-wrapper -->';
}
$output .= "</li>\n";
}
}
I.e. Extend the start_el()
and end_el()
methods/functions instead of start_lvl()
and end_lvl()
. Also, the wrapper will only be added if the menu item has children (or submenu(s)).
Sample usage:
wp_nav_menu( [
'walker' => new My_Walker_Nav_Menu(),
// ... other args.
] );