How to add multiple menu locations in your themes

If you are creating a new theme your theme will not support any menu areas. But if look at the default themes link twentyten or twentyelevan the option is enabled only at the primary location, which in the header section. But there is no control over it. What ever the pages you add it automatically populated into the menu.

But you can get a better control over menus using the custom menu option which is built-in the wordpress core engine. As you can see sometimes you may need to place different menus at different spots in your theme layout. Following diagram will show a possible places.

menu-layout

As you can notice in the above layout template, you are required to place three custom menus in your new wordpress theme. Before start doing anything you need to enable menus for you theme by adding following command at the functions.php file of your wordpress theme.

//add this code block to make you wordpress theme support menus
add_theme_support( 'menus' );

Once you add this code segment to your functions.php you will notice at the new wordpress theme selected in your admin panel, the option menu configuration link is enabled.

menu-option-enabled

 

 

 

But still your primary menu area has zero positions, so cannot add any custom menus yet. That’s because no location is not defined and the menu is not registered in the functions.php yet, in the wordpress theme files.

inactive-menu-primary-areas

 

 

 

 

In order to activate the required menu location on the wordpress theme, you need to add below code segment into functions.php. Following code will define the first primary location of the theme.

// This theme uses wp_nav_menu() in one location.
register_nav_menu( 'primary', __( 'Primary Menu', 'k8responsive' ) );

But this code is not enough to make menus work in the wordpress theme UI. You need to give the location where you want to appear primary menu on your wordpress theme. That you can do it with by following code part.

 // calling the primary menu
<?php
      wp_nav_menu( array('menu'=>'temp', 'theme_location' => 'primary' ) );
 ?>

In our scenario the primary location is the header, therefore we need to paste above code part in the header.php of your wordpress theme. It is not mandatory to place the primary menu on the top, it is your choice where ever you paste this code menu will appear.

You can repeat the same combination of code blocks with required parameters you can place many more menu areas that can be configured through admin panel of wordpress.

This is how it is look like the functions.php when you have multiple menu locations in the theme;

add_theme_support( 'menus' );
// This theme uses wp_nav_menu() in one location.
register_nav_menu( 'primary', __( 'Primary Menu', 'xvresponsive' ) );

// This theme uses wp_nav_menu() in one location.
register_nav_menu( 'footer', __( 'Footer Menu', 'xvresponsive' ) );

// This theme uses wp_nav_menu() in one location.
register_nav_menu( 'slidemenu', __( 'Slide Menu', 'xvresponsive' ) );

// This theme uses wp_nav_menu() in one location.
register_nav_menu( 'headersubmenu', __( 'Header Sub Menu', 'xvresponsive' ) );

Above code represent 4 unique locations on the theme of yours. Once you have located them in proper order you can define custom menus for them and allocate it to the places you want. As you can notice there are four extra location are there to add new menus.

new-menu-locaions