How to Add Custom Menus locations in WordPress Themes

WordPress includes an easy to use mechanism to create your own menus and menu structure. From your wordpress admin panel click on  Appearance >>Menu.

Here you can see existing menus and menu display locations. You can create as many menus as you want. But displaying this menu varies  from theme to theme. This tutorial describes how to add additional menu locations to an existing WordPress theme. 

Different themes support different menu locations. For example see my theme menus. It supports 3 menu locations.

How to Add Custom Menus locations in WordPress Themes


Step1: Add this code to your theme’s functions.php file.

function add_my_custom_menu() {
register_nav_menu('secondary-menu',__( 'Secondary Menu' ));
}
add_action( 'init', 'add_my_custom_menu' );

Now you will see ‘Secondary Menu’ as theme location option in Appearance » Menus admin screen.


.
Step2: Once you have added the menu location, go ahead and add some menu items in the WordPress admin. From Appearance -> Menus admin screen, click on “create a new menu”.

Enter menu name and Save

Add menu items and Save. Here I’m adding a link as a menu item


Step3: Display the new navigation menu in your WordPress theme

Add the following code in your theme’s template file( for example header.php file) where you want to display your menu.
<?php
wp_nav_menu( array(
'theme_location' => 'secondary-menu',
'container_class' => 'secondary-menu-class' ) );
?>


Step4: Style your menu, add CSS
Add following CSS to your style sheet. Here is a sample CSS to help you get started. You can add more styles if you want.

div.secondary-menu-class ul {
list-style-type: none;
list-style: none;
list-style-image: none;
}
div.secondary-menu-class li {
padding: 20px;
display: inline;
}


Leave a Reply

Your email address will not be published. Required fields are marked *

*