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

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

open the file manager

 because that’s where all the data of your website is available.

Step 2

From the left sidebar,

open public_html

.

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

Find the wp-content folder and click to open

. All the content of a WordPress website resides in this folder.

Step 4

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

So, open the “themes” folder.

Step 5

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

Open your current theme folder

. For example, I am opening “twentyseventeen“.

Step 6

If you scroll down, you can easily find the

functions.php file — Right-Click to choose Edit

.

Step 7

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

Here you need to add a new function

.

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

 

How to Add Particular Posts to the Navigation Menu in WordPress

This article will reveal the method of adding specific posts to the navigation m
1 min read
Md. Ehsanul Haque Kanan
Md. Ehsanul Haque Kanan
Hosting Expert

How to Add Image Icons to Your WordPress Navigation Menu Items Using cPanel

This how-to guide helps you understand the concept of adding icons to your WordP
2 min read
Arvind Singh
Arvind Singh
Hosting Expert

How to Properly Add a CSS File to a WordPress Theme Using cPanel

This how-to guide explains the proper way to enqueue a CSS file to a WordPress t
2 min read
Arvind Singh
Arvind Singh
Hosting Expert

How to Properly Add a JavaScript File to WordPress Theme Using cPanel

This how-to guide teaches you the proper way to enqueue a JavaScript file to you
3 min read
Arvind Singh
Arvind Singh
Hosting Expert
HostAdvice.com provides professional web hosting reviews fully independent of any other entity. Our reviews are unbiased, honest, and apply the same evaluation standards to all those reviewed. While monetary compensation is received from a few of the companies listed on this site, compensation of services and products have no influence on the direction or conclusions of our reviews. Nor does the compensation influence our rankings for certain host companies. This compensation covers account purchasing costs, testing costs and royalties paid to reviewers.
Click to go to the top of the page
Go To Top