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
can you tell me, how steps to use
thanks
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