How to add new navigation menus in WordPress

WordPress gives you an easy API to create navigation menus for your theme. Your users can then add and remove menu items on their own. This makes your theme much more customizable.

In this guide, I’ll show you all the things you need to know about building navigation menus in WordPress.

How To Register a Navigation Menu

Before anything else, you need to register a navigation menu.

Registering a navigation menu is really easy. You just have to call the register_nav_menus function with a key-value array. The keys of the array will be the IDs of the menus and values will be the displayed name/title of the menus.

This is what it looks like in action:

register_nav_menus(
	array(
		'header-menu' => 'Header Menu',
		'footer-menu' => 'Footer Menu',
		'sidebar-menu' => 'Sidebar Menu'
	)
);

The above code is supposed to register three different menus. You can register as many menus as you want or just one!

IMPORTANT NOTE: Although the function name suggests that we are registering menus, we are actually registering menu locations. These menu locations allow users to assign a user-created menu to them. Basically, a menu location is the name of the location where you’ll display user-created menu. A menu is a a collection of links chosen by your theme’s user.

This code is incomplete. It needs to be called from the init hook like this:

function wpturbo_register_custom_menus() {
	register_nav_menus(
		array(
			'header-menu' => 'Header Menu',
			'footer-menu' => 'Footer Menu',
			'sidebar-menu' => 'Sidebar Menu'
		)
	);
}
add_action( 'init', 'wpturbo_register_custom_menus' );

You can place this code in your theme’s functions.php file to register your menus.

Pro Tip: Don’t want to remember the code? Just use our free navigation menu code generator to generate this code automatically for you.

How To Display/Render a Navigation Menu In Your Theme

Once you have registered a navigation menu, you can render and display it anywhere in your theme.

To render a navigation menu, you have to call the wp_nav_menu function:

wp_nav_menu(
	array(
		'theme_location' => 'menu-id'
	)
);

This function offers a lot of options to customize the way your menu is displayed. The only necessary argument though for this function is the theme_location. This is the menu ID that you registered in the above section.

If you were to use the code from the last section, to render the Header Menu, you’ll call wp_nav_menu like this:

wp_nav_menu(
	array(
		'theme_location' => 'header-menu'
	)
);

To customize the rendering of your navigation menu, here are some of the options that might interest you:

• menu — Only needed when you want to display a specific menu. This overrides the theme_location option. This can be a menu ID, slug, name, or object.
• theme_location — This is the location that you registered in the last section using the register_nav_menus function.
• menu_class — This CSS class will be added to the <ul> element that contains the menu links.
• menu_id — The CSS ID to be added to the <ul> element that contains the menu links.
• container — Leave empty if you don’t want the <ul> element to wrapped with a <div> element. Can be other elements too. Defaults to “div”.
• container_class — The class that is added to the container element.
• container_id — CSS ID for the container element.
• container_aria_label — Adds value as aria_label attribute to container element.
• fallback_cb — Called in case your selected menu isn’t available or if the selected theme location doesn’t have an attached menu.
• before — Text/HTML outputted before the link markup.
• after — Text/HTML outputted after the link markup.
• link_before — Text/HTML outputted before the link text.
• link_after — Text/HTML outputted after the link text.
• echo — Set to false if you want the output returned rather then echoed.
• depth — How many levels of heirarchy do you want to allow? Set 0 for unlimited.
• walker — You can pass a custom walker class instance here.
• item_spacing — Do you want to preserve the whitespaces within the menu’s HTML? Pass ‘preserve’. Defaults to ‘discard’.

Conclusion

Creating menus is WordPress is easy. You first have to register them using register_nav_menus, and then you can display it wherever you want using the wp_nav_menu function.