How to Create Custom Navigation Location for a WP Site

PressTigers

How to Create Custom Navigation Location for a WP Site

July 15, 2016
Leave a comment

Display, feel and placement of information is essential in a modern graphical user interface (GUI).
A website should be user-friendly to engage a user navigating at its different pages in order to search a particular information. There is a need to add a navigation menu at an appropriate location of your website structure.

In WordPress Theme, there is a primary navigation menu placed just right next to the logo in header area. If you want to add a customized navigation location in your existing theme, you can use different plugins or lines of code. Follow the steps mentioned below to incorporate code for creating custom navigation location in your website structure:

Step 1: Register the Navigation Menu

In your theme’s function.php file, register the menu using register_nav_menu($locations) function. Here $location parameter is an associative array of menu location slug and location description.

function register_my_menu() {
  register_nav_menu('social-menu',__( 'Social Menu' ));
}
add_action( 'init', 'register_my_menu' );

function register_my_menu() {

register_nav_menu('social-menu',__( 'Social Menu' ));

}

add_action( 'init', 'register_my_menu' );

For example, to register a new main location “Social menu”, it will display in the admin area of your website under Appearance → Menus.

Step 2: Display Menu on Theme

After registering the menu, add a fragment of code to display the menu in your Theme. You can add the theme location either in header, sidebar or footer. Use following code to incorporate display location of menu:

<?php wp_nav_menu( array( 'theme_location' => 'social-menu' ) ); ?>

1	<?php wp_nav_menu( array( 'theme_location' => 'social-menu' ) ); ?>

Here theme_location must have the slug of registered menu like social-menu.

Step 3: Menus Panel

Now go to the Dashboard and visit Appearance → Menus from left side menu bar. In Menus screen, create a new menu and choose the Theme location from Menu settings section. In the mentioned example, a menu name “Social Networks” has been created.

The menu has been created. Now you can add any type of menu items from left sidebar using drag n drop functionality.