How To Add Custom Navigation Menu In Wordpress

Posted By : Shilpa Adlakha | 31-Jan-2018

Navigation menus are by default feature of WordPress themes. Every theme has their own specific menu locations and menu support system.

Adding Menu:

To add a custom navigation menu, first, we need to do is register the newly created navigation menu by adding the below-given code to your theme’s functions.php file.

 

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

 

Now we can check this in admin dashboard area by following steps:

1)Login to the admin dashboard.
2)Go to Appearance
3)Click on Menus
4)Now create a new menu by clicking on the menu item.

 

here, we see a new menu created named ‘My Custom Demo Menu’ as theme location option.

 

If we want to add more than one new navigation menu location, then we will use below-given code:

 

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

 

Displaying Custom Navigation Menus in WordPress Themes:

 

Now, next, we need to display the newly created custom menu in our WordPress theme.The most common place is to place it in header section but we can place it anywhere as per our requirement.

 

To display the menu by using following code:

 

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

 

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

Now we can add CSS to make it more attractive as per our website design.

Thanks

 

About Author

Author Image
Shilpa Adlakha

Shilpa is a bright Wordpress Developer, she has good knowledge of HTML, CSS, PHP and Wordpress.

Request for Proposal

Name is required

Comment is required

Sending message..