How to Add a New Navigation Menu to Your WordPress Theme Using cPanel

Almost every WordPress theme has a default navigation menu. Some themes even have multiple menus for better navigation. Sometimes, users wish to add a new navigation menu to their existing website.

As we all know, WordPress is an open source platform, and anyone can edit its code to add an additional feature. Do you wish to add a new navigation menu to your WordPress theme?

If so, this step by step tutorial is for you. Before we start, it’s vital to understand that editing an existing WordPress website can be risky. You should back up the WordPress website and its database using cPanel or a plugin like UpdraftPlus.

Its theme controls the design of a WordPress website. So, you have to edit a special file of the theme of your site. There are different ways to do so.

You can create a child theme and edit it, but if you wish to modify the live website, you can download the WordPress theme on your computer, and use XAMPP to do the development.

In this tutorial, I am going to walk you through an easy-to-follow process in which you will learn to add a new navigation menu using cPanel.

How and Which File Do You Need to Edit?

I mentioned a specific theme file you require to edit, but which one? As you may know, functions.php is one of the essential files for a WordPress website; you have to add a function having the WordPress navigation menu Codex to register a new menu.

To do so, you need to know where to find such a file.

Let me walk you through:

Step 1

Log in to your web hosting account and

Step 2

From the left sidebar,

Note: If you are editing a subdomain or your WordPress installation for your site is in another folder, you need to open it. Otherwise, you can see all the folders and files of your root domain in public_html.

Step 3

Step 4

Now, you can see plugins, themes, uploads, etc. As I mentioned earlier, you need to edit a theme.

Step 5

You can see all active and inactive WordPress themes you have.

Step 6

If you scroll down, you can easily find the

Step 7

A popup appears, just choose Edit and you can see a new tab to edit the code of functions.php.

function new_nav_menu() {
register_nav_menu('my-new-menu',__( 'Primary Menu' ));
}
add_action( 'init', 'new_nav_menu' );

Save the file, and open your admin panel. Go to Appearance>>Menus, and you can see “Primary Menu“. It means you have successfully registered it.

How to Display the Navigation Menu?

To display, you need to add another code to the file where you want to display the menu.

For example, if you want to add a new navigation menu to the header area below an existing menu, you have to place the code in that file.

Many people also like to add multiple menus in footer.

Depending on your choice, open the file. For the header area, open header.php, for the footer, open footer.php and find the location where you want to display your new navigation menu.

Let me show you the code.

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

From the top-right corner, save the file and you can see your new menu.

It may not appear as you wish, because you have to design it to make it look better. You can use the container class as “new-menu-class” to do so.

Let me show you an example of CSS.

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

You can adjust the CSS according to your requirements.

How to Add Multiple Navigation Menu Together?

Some of you might also have a question to add multiple menus using the same function. You can use the same function as you used to add a single navigation menu.

Suppose you want to add two navigation menus. The code is as follow:

function new_nav_menu() {
register_nav_menus(
array(
'my-new-menu' => __( 'Primary Menu' ),
'another-new-menu' => __( 'Secondary Menu' )
)
);
}
add_action( 'init', 'new_nav_menu' );

As you can see, in this code, I used an array, inside which you can see names of two menus. If you save the file and go to Appearance>>Menus, you can see two new navigation menus.

Similarly, to display, you can use specific code just like you did for the single menu. In the code for the second menu, you need to change the ‘theme_location‘ option. Let me show you how:

<?php
wp_nav_menu( array(
'theme_location' => 'another-new-menu',
'container_class' => 'second-new-menu-class' ) );
?>

As you can see, I also changed the container class to use a different CSS for the second menu. The choice is yours. You can use any class you want. It’s all about convenience.

Note: Don’t forget that you need to add a code to register a menu to functions.php and to display a menu, you have to choose the file on your own.

You can use the CSS class to design menus.

Isn’t it Easy to Add a New Navigation Menu?

If you’re a newbie, we recommend you to do such experiments on your local server. You can use XAMPP, WAMP, or MAMP to do so.

Editing any coding file of a live website is dangerous. One small mistake can break the design of your whole site. So, it’s also recommended to enable the maintenance mode so that if something goes wrong, your readers don’t see anything.

I am sure the step by step is easy to follow, and you can add a new navigation menu to your WordPress theme in no time. It’s crucial to notice the container class because to design your menus, you need such a class.

A little bit of CSS expertise is required. I mentioned an example which will help you, but it doesn’t apply to all. I wanted to give you an idea.

Every developer has a different coding style. You may use a different class or even a new theme location.

If you still face any problem, you can always contact us

• Know about the best wordpress web hosting by clicking here.