How to add custom navigation menus to WordPress themes

You Want to be add custom navigation menus to your WordPress theme? The navigation menu is a horizontal list of links that appear at the top of most websites.

By default, WordPress themes come with predefined menu locations and layouts, but what if you want to add your own custom navigation menus?

In this article, we will show you how to create and add easily customized WordPress navigation menus so that you can display them anywhere in your theme.

Creating Custom Navigation Menus in WordPress Themes

The navigation menu is a feature of the WordPress theme. Each theme can define its own menu locations and menu support.

To add a custom navigation menu in theme, the first thing you need to do is register your new navigation menu by adding this code to this theme's function.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 the Appearance »menu page in your WordPress admin and try to create or edit a new menu. You will see 'My custom menu' as a theme location option.

If you want to add more than one new navigation menu location, you must use a code like this:

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 to the WordPress.

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

Displaying Custom Navigation Menus in WordPress Themes

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

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

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

 'my-custom-menu', 
    'container_class' => 'custom-menu-class' ) ); 
?>

The theme location is the name we chose in the previous step.

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

You can use the CSS class .custom_menu_class to style your menu.

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

Code Language

Search This Blog

14 Best WordPress SEO Plugins and Tools That You Should Use