How to add div around wordpress ul container

Question

Wordpress displays my child menus inside this ul tag ...

<ul class="sub-menu">

how can i wrap a simple div around it?

It is preferable to do this via functions.php, but jquery can work too.

Answer 1

Although it would be easy to use something like jQuery to wrap your child menus, jQuery is not recommended for this purpose. Put this in functions.php:

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

I assume that your menu is generated in your header, so go to header.php (or some file uses the wp_nav_menu function) and find everything that starts with "wp_nav_menu".

, , ( ). , "wp_nav_menu()", , :

wp_nav_menu(array('walker' => new Child_Wrap()))

, , .

Answer 2

function.php

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

, wp_nav_menu (: header.php)

$defaults = array( 'container' => 'ul', 'menu_class' => 'scroll', 'menu_id' => 'main-menu-nav' , 'walker' => new Child_Wrap() );

 wp_nav_menu( $defaults );

jquery, . . .

jQuery('ul.sub-menu').wrap('<div class="sub-menu-wrapper" />');