Categories
PHP Tutorials Wordpress Tutorials

Add custom menu, Add theme locations & register new menu

Wordpress developers guide to add custom menu in a new wordpress theme. Adding theme locations, menu locations, register new menu, menu locations and integrate menu in templates using register_nav_menu & wp_nav_menu functions.

A WordPress developers guide / tutorial – for adding custom menu in new wordpress theme, add one or multiple new theme locations for the custom WordPress menus, so that menu can appear in those places. Register new menu items. Enable your new wordpress theme to add custom user defined nav menus from the admin dashboard.

Prerequisite : To follow this tutorial you need access to the PHP files of your theme & you need to edit them. Also you need to access the ADMIN DASHBOARD of your WordPress installation in local pc or online.

How to add theme locations for your navigation menus in WordPress

In your theme’s functions.php file, add the following code to generate menu locations / theme locations. You will be able to see the Manage Locations tab only after adding the following lines in functions.php file of your newly created theme folder.

function register_my_menu() {
 register_nav_menus( array(
      'the-main-navigation-menu' => __( 'The Main Navigation Menu' ),
      'the-nav-menu-2' => __( 'Secondary Navigation Menu' ),
      'the-nav-menu-3' => __( 'Third Navigation Menu' )
     )
 );
 }
 add_action( 'init', 'register_my_menu' );

Then the following theme locations will be added which you can visit by clicking the WordPress Dashboard Menu (Appearance -> Menus) -> Manage Locations TAB.

Manage Locations Tab in WordPress Dashboard Menus
Show Manage Locations Tab in WordPress Dashboard Menus. Theme locations is displayed here to add menus in these locations.

Observer that the theme location in the above image shows 3 lines “The Main Navigation Menu”, “Secondary Navigation Menu”… which you have just added in functions.php file mentioned above.

Then click on EDIT MENUS tab and goto the end of the page below the MENU STRUCTURE and MENU SETTINGS, and the theme locations added will be shown. Picture shown below-

WP theme locations in menu settings page
WP theme locations in menu settings page in WordPress dashboard.

Cross Checking- delete the MANAGE LOCATIONS tab

Now just delete the lines you have just added in functions.php file (or comment the lines in PHP file). Then again login to the WordPress Dashboard & follow the WordPress Dashboard Menu (Appearance -> Menus) you will not see the Manage Locations Tab. Picture shown below..

Remove Manage Locations Tab in WP dashboard

How to delete the manage locations tab in WordPress Menu in dashboard.

Only EDIT MENUS tab will be shown. And in that tab below the MENU STRUCTURE and MENU SETTINGS heading no theme locations will be shown.

Reference Reading: