Skip to content

Instantly share code, notes, and snippets.

@fieldoffice
Last active January 26, 2023 15:03
Show Gist options
  • Star 10 You must be signed in to star a gist
  • Fork 3 You must be signed in to fork a gist
  • Save fieldoffice/c4c6df69f61b21769c6e to your computer and use it in GitHub Desktop.
Save fieldoffice/c4c6df69f61b21769c6e to your computer and use it in GitHub Desktop.
Wordpress - add div wrapper around sub-menu
/* EXTEND SUBNAV
******************************************/
class submenu_wrap 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";
}
}
<?php wp_nav_menu(array(
'walker' => new submenu_wrap()
)); ?>
@philJohnson
Copy link

You should rename the class to submenuWrap. the - throws and error

@latheva
Copy link

latheva commented Feb 26, 2019

This works for me

Thanks.

@slingshotdesign
Copy link

Removed the hyphen from the class name and this works well for me in Wordpress 5.4.1. Thank you!

@paulmist
Copy link

paulmist commented Jun 4, 2020

Really helpful - works great.

Any ideas on how I can give a different class to each level of sub, sub-sub-menu, etc. ?

@fieldoffice
Copy link
Author

Classes can be added directly in the WP Edit Menu to each menu item

@paulmist
Copy link

paulmist commented Jun 4, 2020

This is true, and a good point but I was looking for an automated method.

Thanks for the ideas!

@rsmouk
Copy link

rsmouk commented May 9, 2022

Please how to change ul and li to div

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment