Adding Custom Navigation Menu in WordPress

What does Custom Navigation Menus mean?

Custom Navigation Menus are those horizontal lists that displayed on top parts of websites. Do you want to add it in your WordPress ? Easy, just follow the instruction below. As you know, there is a default WordPress theme with pre-defined menu, but you can alter it according to your own Custom Navigation Menus.

Now, we show you how to do it. These menus can be displayed wherever you want.

Do you need this Custom Navigation Menus tutorial?

Navigation links is those categories that you want to display as you want. However, most of WordPress themes have at least one area to display them. You can build an interface between WordPress admin area.

This article is usable for DIY-intermediate users. It contains different topics, explained below:

How to create a Navigation Menu in WordPress;

Every theme in WordPress has its own menu location and menu support. Okay, add this code to your theme’s functions.php, and complete registration.

1

2

3

4

function wpb_custom_new_menu() {

register_nav_menu(‘my-custom-menu’,__( ‘My Custom Menu’ ));

}

add_action( ‘init’, ‘wpb_custom_new_menu’ );

 

Then, in WordPress admin page, go to Appearanece/menus, here you can create a Custom Navigation Menu or edit it.

Custom Navigation Menu

Attention, to add more than one new menus, you’d need this code:

1

2

3

4

5

6

7

8

9

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’ );

 

Now, lets go to find out how to display Custom Navigation Menu in theme?

You created the menu in previous part, now you need to display it. As you have seen in most websites, the most common area to display a menu is top of website, just after the site title.

But you can display it anywhere else too. For this, add the code below in your theme’s template file.

1

2

3

4

5

<?php

wp_nav_menu( array(

‘theme_location’ => ‘my-custom-menu’,

‘container_class’ => ‘custom-menu-class’ ) );

?>

For example, if you want to appear your menu in a plain bulleted list, you can utilize CSS class. Using this code:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

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;

}

How to add a Custom Navigation Menu in WordPress:

Are you tired by codes? We suggest you use Beaver Builder. It is the best WordPress builder . You can build different pages without codes. At the first step, you need to install Beaver Builder plugin and start by ready-made templates.

add a Custom Navigation Menu

How to create Mobile-Friendly Responsible menus?

It is important to optimize your websites for mobile users, too. So you can add one of the many options and effects.

How to do more than this in Custom Navigation Menu?

Not only Navigation menus are useful to admins, but also they help customers to find out the most important sections.

You can add image, conditional logic, and menu description and mega menus as well.

Contact us for more info!

0 CommentsClose Comments

Leave a comment

subscribe to newsletter

Get the latest posts and articles in your email

We promise not to send spam 

subscribe to newsletter

Get the latest posts and articles in your email

We promise not to send spam 

subscribe to newsletter

Get the latest posts and articles in your email

We promise not to send spam