The WordPress menu interface is a great way to manipulate navigation menus on your site. If you’re building a theme, however, you may find yourself wanting to limit the number of available sub-menu depths without removing the sub-menu items themselves.
You can style your way around it (styling .sub-menu .sub-menu
to act differently than .sub-menu
), you can use the wp_nav_menu
function’s depth argument to limit the depth, or you can use a custom Walker to force the output to match.
However, if your situation is such that the styling won’t work well and you want to limit navigation sub-menu depth, but not remove any menu items on lower depths (this happens with the depth argument in wp_nav_menu
), then the third option is the way to go: create a custom walker.
This removes all sub-menu wraps on sub-menus beyond the second level.
Featured image via Flickr CC, by Basheer Tome
krisna says
can you tell me, how steps to use
thanks
Joshua Nelson says
Krisna,
The Walker is called in the
jdn_primary_menu_args
function. The key thing here is the name of the menu, which is typically theme-specific. In this example'primary'
is the name of the menu location this Walker is applied to in the theme. Change that accordingly for your theme.For the Walker:
start_el
runs at the start of the list item. This this case, it’s looking at any item with a depth over 1 that has a classmenu-item-has-children
and removing that class.start_lvl
is where the sub-menu wrapper ul element is applied. The Walker adds this, like the typical default, but in this case only on any sub-menu with a depth under 2 (so only one level of sub-menus is allowed), otherwise it adds the normal$indent
value without the sub-menu wrap.end_lvl
does something similiar, but it fires at the end and either adds the closingtag or the default
$indent
value.Hope that helps!
Thanks,
Joshua