Creating Custom WordPress Menus

January 25, 2012

By

Custom Navigation Menus were added back in version 3.0 and have made it much easier for clients to manage their own menus with ease. With this feature they can easily create menus, add menu items , create drop downs and much more. This tool also offers drag-and-drop functionality which makes moving menu items around a breeze.

Many of the default WordPress themes, including Twenty Eleven, offer this feature by default but they also require the user to edit the actual template files if they are needing to register more than one menu. In this article, we will show you how you can enable this feature for your theme and how to add multiple menus. This method will also automatically register the menu items and thus eliminate the need to run add_theme_support( ‘menus’ );.

Step 1:

Open up your functions.php file in your theme directory.  First we want to verify that the function exists, so we offer compatibility with versions of WP below 3.0.

if ( function_exists( 'register_nav_menus' ) ) {
}

Step 2:

Next we will run the function register_nav_menus and we’ll start by adding just one menu called “Main Menu”.

if ( function_exists( 'register_nav_menus' ) ) {
	register_nav_menus(
		array(
		  'main_menu' => 'Main Menu'
		)
	);
}

Step 2.1:

If you’re looking to manage more than one custom menu then simply add another line item to your array like so:

if ( function_exists( 'register_nav_menus' ) ) {
	register_nav_menus(
		array(
		  'main_menu' => 'Main Menu',
		  'utl_menu' => 'Utility Nav',
		  'footer_menu' => 'Footer Nav'
		)
	);
}

Step 3:

After you have registered all of your menus, save functions.php. Now open the template(s) you would like these menus be used in and paste in the code below. Make sure to replace “Menu Name” with the name of your menu.

<?php wp_nav_menu( array('menu' => 'Menu Name')); ?>

Step 4:

Now when you log into WordPress you will notice that there’s a new sub-menu item under “Appearance” titled “Menus”. Here you or your client can set up menus & drag and drop to reorder their contents.

Once the menus are created you simply assign them to one of the registered theme menus on the left of the page in the box titled “Theme Locations”. That’s it, they will now appear in the appropriate areas of your theme.

Good luck and please feel free to post a comment if you need additional assistance or have any feedback that might improve this method.

Designer
Joshua Giblette

When Josh isn't focusing on pixel perfection, you can find him spending time with his wife and 3 daughters, crushing 12 year olds on Halo or hitting the slopes.

Leave a Comment