How to Create Custom Menus on WordPress

Many WordPress themes use category tags to define page navigation. But as WordPress is used more for corporate sites that may not utilize tag categories, then Custom Menus become a very convenient and user-friendly way to create and update your site’s navigation. Custom Menus are easy to create and offer lots of built in functionality, so if possible, I would recommend you design your site to utilize them.

First, we’ll register the menus in the functions.php file. In this example, we are creating three customizable menus – one for pages, on for categories, and one for the footer.

Source code    
add_action( 'init', 'register_my_menus' );
function register_my_menus() {
	register_nav_menus(
		array(
			'page-menu' => __( 'Page Menu' ),
			'category-menu' => __( 'Category Menu' ),
			'footer-menu' => __( 'Site Links Menu' ),
		)
	);
}

Next, we call our custom menus within our theme with the following:

Source code    
<?php wp_nav_menu( array('theme_location' => 'category-menu', 'menu_class' => 'category_item', 'container_class' => 'category_menu')); ?>

Let’s take a moment to break this down. In this code, I’m calling my new “category-menu”. I would like this menu to have the class of “category_item” and for it to reside within a div class of “category_menu.”

For more wp_nav_menu parameters, you canĀ visit the WordPress Codex.

Once you have the menus set-up in your theme, you can go ahead and style the menus in your .css file.

Then, we’ll need to set-up the menus from the WordPress Admin panel. Once logged in, you can find the menus under Appearance -> Menus.

What we need to do now is actually create the Menus. We do this by typing in the name of the menu we are creating in the “Menu Name” box and hitting the Save Menu button. To add more menus, click on the + tab.

Create Menus

If you like, you can also add the items you would like in those menus at the same time. New menu items can be created manually using the Custom Links box, or you can check off pages or category tags that you would like to add to the menu. Remember that you’ll need to click “Save Menu” after you’ve added all of your menu items.

After creating your first menu, you’ll see a “Theme Locations” box appear in the top left corner. Once all of your menus are created, simply select which menu goes into which theme location using the dropdown menus and hit save.

Custom Menus Theme Locations

And that’s it! Your new menus are set-up and are much more flexible and customizable.

Leave a Comment