PHPMatters Help You Better Hosting Your PHP-based Sites
How to Add a Navigation Menu in WordPress

How to Add a Navigation Menu in WordPress

WordPress, as a free and open source content management system (CMS), has been highly ranked by the general public with versatile features and SEO-optimized design. Backed by a large community that consists of freelancers and savvy web developers, this software has been constantly improved with a series of newly-added functionalities.

Among those brand-new features, the navigation menu is a case in point. That is to say, WordPress provides a user-friendly mechanism for adding a navigation menu into a theme only after its 3.0 release. For those people using older themes but still want to manage menu items through navigation menus, we would like to outline how to enable and add the navigation menu in a WordPress 3.0 or older versions. Scroll down and know more details.

What’s the Importance of a Navigation Menu?

As is noted above, a navigation menu is an indispensable and central element in your WordPress theme. In the following, there is a straightforward screenshot displayed for better understanding of the importance of this feature.

WordPress Navigation Menu

As is showed, you are allowed to add your own “Pages”, “Links”, “Categories” and many other items to the menu. In the meantime, you are able to manage the “Menu Structure” by creating well-organized menus with various drop-down features under each option. More importantly, you can also attach newly-created custom menu to a navigation menu based on personal needs.

How to Enable a Navigation Menu?

Just like the header image, a navigation menu also requires to be enabled firstly. To do so, you will need to login to the dashboard of your WordPress and go to “Appearance” > “Editor” firstly. Once done, go directly to functions.php file lying under “Theme Functions” option on the left sidebar of “Templates.”

And then, all you need to is to copy the following command to this functions.php file. If done correctly, you will see a new option appear in your administrative panel.

add_theme_support( 'menus' );

Note that, this step can be ignored if the wp_nav_menu() order exists in your functions.php file.

How to Add a Navigation Menu in WordPress 3.0 or Older Versions?

Once enabled, you are prompted to add a navigation menu to your existing theme. To do so, you shall register a name for your navigation menus by writing a function. Given that you want to add a menu named as “Navigation Menu”, you will need to copy those short codes in below to the end of this functions.php file.

function register_my_menu() {
  register_nav_menu('nav-menu',__( 'Navigation Menu' ));
add_action( 'init', 'register_my_menu' ); 

If nothing goes wrong, you will see the newly-added navigation menu in the “Manage Locations” area. At this place, there is a “Navigation Menu” option based on those mentioned codes. By the way, you are empowered to select a new menu from the drop-down list next to “Navigation Menu.” If you happen to dislike the current menu, you can also create a new one by clicking the “Use new menu” list.

WordPress Navigation Menu

How to Add Multiple Navigation Menus?

In this section, we would like to introduce you how to add multiple menu options so as to enrich website content. Suppose that you want to add extra “Sidebar Menu” and “Footer Menu” under your “Navigation Menu”, you will need to use the following codes in the same functions.php file instead.

function register_my_menus() {
			'nav-menu' => __( 'Navigation Menu' ),
                        'footer-menu' => __( 'Footer Menu' ),
			'sidebar-menu' => __( 'Sidebar Menu' )
add_action( 'init', 'register_my_menus' );

If everything goes right, you will have two additional menu options as is showed in the following image. Also, you are supposed to select custom menus or create new menus in each of those added menus. Note that, you should click on “Save Changes” button to take effect.

WordPress Navigation Menu

Note: If you want to show more menu options and properties on a page, you will need to go to “Appearance” > “Menus” and click “Screen Options” on the top of this setting page. As is showed, you are allowed to show “Posts”, “Categories”, “Links” and many other items on the screen. At the same time, you can also add “CSS Classes” and “Description” in the lower box.

WordPress Navigation Menu

How to Display Menus on Your WordPress Site?

Having added the navigation menu options, you still need to decide where to display those newly-added menus. To do so, you should go into the related theme files and copy the following codes properly so as to tell WordPress your decision.

		'theme_location' => 'nav_menu',		
                         'container' => false, // 'div' container will not be added
		'menu_class' => 'nav', // <ul class="nav"> 
		'fallback_cb' => 'default_nav_menu',

For instance, if you want to show your “Navigation Menu” in the header section on your front page, you will need to go to header.php file so as to paste those codes above. Beware that you can replace ‘nav_navigation’ and ‘default_nav_menu’ parameters with the specific menu slug and default function. Below is a sample navigation menu added to the header area of a WordPress site.

WordPress Navigation Menu

How about Using a WordPress Plugin?

Alternatively, you can also select a WordPress menu for secondary navigation menu on categories, pages or custom taxonomies by using some WordPress plugins like Genesis Simple Menus. However, this plugin can only run on the Genesis Theme Framework that is a premium theme charging a minimum of 59.95 bucks.

In addition to that, many so-called “hassle-free” WordPress plugins alleviate your headaches in initiating a navigation menu at the expense of locking you to some specific themes. Once you switch to a different theme, you will be limited to be a user of a competitor’s theme with totally-different site design and menu structure from before. To say the least, you have got to pay high cost for some “advanced themes”, whether you like it or not.

Recommendable WordPress Hosting

To sum up, it is advisable to initiate a navigation menu by adding those mentioned codes to your older theme. In the further, you’d better choose a professional and reliable WordPress hosting solution that is poised to lend a helpful hand whenever you get stuck. At this place, we recommend you to go with the following solutions, all of which are unbeatable in tech support and price.