Adding Custom Menus

Inserting Only 1 Custom Menu

To add a custom navigation menu, the first thing you need to do is register your new navigation menu by adding this code to your theme’s functions.php file.

function wpb_custom_new_menu() {
  register_nav_menu('my-custom-menu',__( 'My Custom Menu' ));
}
add_action( 'init', 'wpb_custom_new_menu' );

You can now go to Appearance » Menus page in your WordPress admin and try to create or edit a new menu. You will see ‘My Custom Menu’ as theme location option.

Adding Multiple Custom Menus

function wpb_custom_new_menu() {
  register_nav_menus(
    array(
      'my-custom-menu' => __( 'My Custom Menu' ),
      'extra-menu' => __( 'Extra Menu' )
    )
  );
}
add_action( 'init', 'wpb_custom_new_menu' );

Once you have added the menu location, go ahead and add some menu items in the WordPress admin

This will allow us to move on to the next step which is displaying the menu in your theme.

Next, we need to display the new navigation menu in your WordPress theme. The most common place where navigation menus are usually placed is in the header section of a website just after the site title or logo.

However, you can add your navigation menu anywhere you want.

You will need to add this code in your theme’s template file where you want to display your menu.

<?php
wp_nav_menu( array( 
    'theme_location' => 'my-custom-menu', 
    'container_class' => 'custom-menu-class' ) ); 
?>

The theme location is the name that we selected in the previous step.

The container class is the CSS class that will be added to your navigation menu. Your menu will appear as a plain bulleted list on your website.

You can use the CSS class .custom_menu_class to style your menu by adding custom CSS code. Here is a sample CSS to help you get started:

div.custom-menu-class ul {
	margin:20px 0px 20px 0px;
	list-style-type: none;
	list-style: none;
	list-style-image: none;
	text-align:right;
	display:inline-block;   
}
div.custom-menu-class li {
	padding: 0px 20px 0px 0px;
	display: inline-block;
} 
 
div.custom-menu-class a { 
	color:#000;
}