We’ve all been there. There’s a perfectly good menu in the admin under Appearance -> Menus which has the whole site laid out perfectly.
Now we start coding the templates and realize that we only need sub-menu items of a particular page, of a particular level from that menu. There are two ways to do this out of the box:
- Create a separate menu for each requirement
- Create a custom Walker Class which allows you to only choose only the sub-menu from the main menu
For obvious reasons, the first option is not the best way to do it. The second option solves the problem quite well. But you can’t keep writing a walker class for every project, and not every developer – particularly new developers – is familiar with how this works.
This should be something that comes out of the box, which it does on other platforms like Joomla. When you delve into the code of WordPress and see the function responsible for this ( /wp-includes/nav-menu-template.php :: wp_nav_menu() ), you quickly realize that this function was written without any foresight for extendability.
I have solved this problem of extending this function by writing a plugin!
It extends the native wp_nav_menu function so you don’t need to add any special functions to the code. It just adds a few options that I felt were missing. Here are the options:
level : (integer) (required for this plugin to work) The level of the navigation menu to show. If no child_of parameter is passed, it shows all the items of this level
child_of : (string|integer) (optional) Either the title or menu item ID of the parent in the menu whose direct children are to be shown
This is how easy it is to use:
$defaults = array( 'theme_location' => 'main_menu', 'level' => 2, 'child_of' => 'About Us' ); wp_nav_menu( $defaults );
So, the child_of option can either be the title of the parent’s menu item, or the menu item ID of the parent, so that you don’t have to hardcore the title in the code. Here is one easy way to find the menu item ID:
Hover your mouse on top of the menu item that you want, and look for the item ID in the status bar. In this case it is 466.
I hope this makes it easy for you to build your site! I’ll be open to adding more features to this plugin, so feel free to write in any feature requests in the comments.