Manipulating menu HTML

Question

My site's menu uses the built-in menu under Appearance >> Menus. I want to make a very simple change: I want to wrap each of my menu's second-level ULs in a DIV.

What's the simplest way to accomplish this?

Answer 1

Use a custom walker. Extend the functions start_lvl() and end_lvl():

class WPSE39005_Div_Walker extends Walker_Nav_Menu
{
    /**
     * @see Walker::start_lvl()
     *
     * @param string $output Passed by reference. Used to append additional content.
     * @return void
     */
    public function start_lvl( &$output, $depth )
    {
        $output .= '<div><ul class="sub-menu">';
    }

    /**
     * @see Walker::end_lvl()
     *
     * @param string $output Passed by reference. Used to append additional content.
     * @return void
     */
    public function end_lvl( &$output, $depth )
    {
        $output .= '</ul></div>';
    }
}

Call it in your theme like that:

<?php
// If there is no menu assigned we show nothing.
has_nav_menu( 'top-menu' )
// Path to the file with the walker relative to theme’s root.
and locate_template( 'php/class.WPSE39005_Div_Walker.php', TRUE, TRUE )
and wp_nav_menu(
    array (
    'menu'       => 'top-menu'
,   'walker'     => new WPSE39005_Div_Walker
    )
);
?>