Is there a way I can wrap a div around wp_nav_menu's ul.sub-menu

So for example the markup would go from

<ul class="menu">

    <li><a href="/">Item 1</a></li>
    <li>
        <a href="/">Item 2</a>

        <ul class="sub-menu">

            <li><a href="/">Item 1</a></li>
            <li><a href="/">Item 1</a></li>

        </ul>
   </li>
    <li><a href="/">Item 1</a></li>
    <li><a href="/">Item 1</a></li>

</ul>

to this

<ul class="menu">

    <li><a href="/">Item 1</a></li>
    <li>
        <a href="/">Item 2</a>

        <div class="sub-menu-wrap">

            <ul class="sub-menu">

                <li><a href="/">Item 1</a></li>
                <li><a href="/">Item 1</a></li>

            </ul>

        </div>

   </li>

    <li><a href="/">Item 1</a></li>
    <li><a href="/">Item 1</a></li>

</ul>

Where "sub-menu-wrap" is the custom div.

Is this possible?

Is there a way I can wrap a div around wp_nav_menu's ul.sub-menu

So for example the markup would go from

<ul class="menu">

    <li><a href="/">Item 1</a></li>
    <li>
        <a href="/">Item 2</a>

        <ul class="sub-menu">

            <li><a href="/">Item 1</a></li>
            <li><a href="/">Item 1</a></li>

        </ul>
   </li>
    <li><a href="/">Item 1</a></li>
    <li><a href="/">Item 1</a></li>

</ul>

to this

<ul class="menu">

    <li><a href="/">Item 1</a></li>
    <li>
        <a href="/">Item 2</a>

        <div class="sub-menu-wrap">

            <ul class="sub-menu">

                <li><a href="/">Item 1</a></li>
                <li><a href="/">Item 1</a></li>

            </ul>

        </div>

   </li>

    <li><a href="/">Item 1</a></li>
    <li><a href="/">Item 1</a></li>

</ul>

Where "sub-menu-wrap" is the custom div.

Is this possible?

• functions
• menus

2 Answers 2

Use a custom walker, extend the methods start_lvl() and end_lvl.

Sample code, not tested:

class WPSE_78121_Sublevel_Walker extends Walker_Nav_Menu
{
    function start_lvl( &$output, $depth = 0, $args = array() ) {
        $indent = str_repeat("\t", $depth);
        $output .= "\n$indent<div class='sub-menu-wrap'><ul class='sub-menu'>\n";
    }
    function end_lvl( &$output, $depth = 0, $args = array() ) {
        $indent = str_repeat("\t", $depth);
        $output .= "$indent</ul></div>\n";
    }
}

Usage in your theme:

wp_nav_menu(
    array (
        'theme_location' => 'your-theme-location-EDIT-THIS',
        'walker'         => new WPSE_78121_Sublevel_Walker
    )
);

Proposed solution does not play nice with WordPress - WordPress default code and filters are ignored. I am giving here much more elegant solution, which keeps all filters like 'nav_menu_submenu_css_class' and other WP default code functioning:

<?php
/**
 * Wraps sub-menus in div element
 */
class My_Menu_Walker extends Walker_Nav_Menu {

    public function start_lvl( &$output, $depth = 0, $args = null ) {
        $output .=
        '<div class="wrapper">';
        parent::start_lvl($output, $depth, $args);
    }

    public function end_lvl( &$output, $depth = 0, $args = null ) {
        parent::end_lvl($output, $depth, $args);
        $output .= '</div>';
    }

}