WordPress : Custom theme location for menu

Posted on June 16, 2015 by Suresh Kamrushi in PHP

Today I learn how you can add new menu location in wordpress theme. Here I am sharing details how to do it.

Step 1: First register menu location name to database. You can do it simply by adding a function in your theme functions.php file. Function register_nav_menus() Here I am adding menu as “Mobile Menu Signin”.

function register_kk_custom_menus() {
  array('mobile-menu-signin' => __( 'Mobile Menu Signin' )));
add_action( 'init', 'register_kk_custom_menus' );

Once you update the file, navigate to Appearance -> Menu -> Manage Location. You can see “Mobile Menu Signin” item is get added.

Wordpress manage locations

WordPress manage locations

Step 2: Now go to Appearance -> Menu -> Edit menu and click “create a new menu”. Enter Menu name and add links and select the “Mobile Menu Signin” from menu location at the bottom.
Now you Menu is ready to show on page.

Wordpress Create Menu

WordPress Create Menu

Wordpress New Menu

WordPress New Menu

Step 3: One last step to finish, adding location in your theme. Open Appearance -> Editor -> select your theme and open your header.php file.
Using wp_nav_menu() you can show menu on header. Add below lines in your theme to show the menu items. Make sure that below code should be in place where you want display your menu.

$defaults = array('theme_location'=>'mobile-menu-signin','menu_class'=>'custom_mobile_menu');
wp_nav_menu( $defaults );

Refreash the site home page, you can see your menu is visible on you header section.

Steps are as per WordPress version: 4.4

Tagged as ,