Skip to Main Content

How to Add a Custom Navigation Menu to WordPress

Divi: the easiest WordPress theme to use

Divi: The best WordPress theme of all time!

With over 901.000 downloads, Divi is the most popular WordPress theme in the world. It is complete, easy to use and comes with more than 62 free templates. [Recommended]

Do you want to know how to add custom navigation menu in WordPress? By default, many WordPress themes come with predefined menu locations and layouts.

In this tutorial, we will show you how to add other navigation menus in your WordPress theme.

But before, if you have never installed WordPress discover How to Install a WordPress Blog in 7 Steps et How to search, install and activate a WordPress theme on your blog 

Then back to why we are here.  

how to add a custom navigation menu on WordPress

When will you need to add a custom menu on your WordPress theme?

Most WordPress themes offer at least one location where you can view your website's navigation links in a menu.

You can manage menu items from an easy to use interface in your WordPress dashboard.

Discover also our 10 premium WordPress plugins designed to create menus

This tutorial is geared towards users who like to do DIY or for those who need to add an extra location on their WordPress themes.

With that said, let's take a look at how to add custom navigation menus in a WordPress theme.

Creating a custom menu on WordPress

Navigation menus are a feature of WordPress themes. Each WordPress theme can define its own menu locations.

To add a custom navigation menu, the first thing you need to do is register your new navigation menu by adding this code to the functions.php file of your WordPress theme.

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

You can go to " Appearance> Menus "In WordPress dashboard and try creating or editing a new menu. You will see "My Custom MenuAs an option in the menu location.

how to add a custom navigation menu on WordPress

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

Easily create your website with Elementor

Elementor allows you to easily create any website design with a professional look. Stop paying expensive for what you can do yourself. [Free]

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

Once you've added the menu location, test your menu and add a few items to the WordPress dashboard.

This will allow us to go to the next step which is to display the menu in our WordPress website.

Viewing a custom menu on WordPress

Now we need to display the new navigation menu in your WordPress theme. The most common place where navigation menus are typically placed is in the header section of a website right after the website title or logo.

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

You must add this code in the template file of your WordPress theme where you want to display your menu.

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

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

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

how to add a custom navigation menu on WordPress

You can use the CSS class " custom_menu_class For the style of your menus. Here's an example of a CSS code to get you started:

Div.custom-menu-class ul {list-style-type: none; List-style: none; List-style-image: none; } Div.custom-menu-class li {padding: 20px; Display: inline; }

If you need help with CSS and menu layout, we recommend using one of these WordPress starter themes to build your custom themes.

Create mobile menus

We have detailed this in a previous tutorial, how to make menus for mobile.

how to add a custom navigation menu on WordPress

We've seen how convenient these menus can be for your mobile traffic. 

Are you looking for the best WordPress themes and plugins?

Download the best plugins and WordPress themes on Envato and easily create your website. Already more than 49.720.000 downloads. [EXCLUSIVE]

Discover also some themes and premium WordPress plugins  

You can use other WordPress plugins to give a modern look and optimize the grip of your blog or website.

We offer you here some premium WordPress plugins that will help you do that.

1. Woocommerce Donation

Accept through this extension donations on your WooCommerce website with amounts specified by customers. They will be able to give as much as they want. Each donation can be presented like any regular WooCommerce product. 

Woocommerce donation plugin

If the customer skips the cart page or goes directly to the checkout without making a donation, a link will appear above the checkout page so that they can donate.

Each step of using WooCommerce Donation is explained in a documentation with screenshots. Just activate the plugin and you will find the "Add donation" field on the cart.

Download | Demo Web hosting

2. Calendarize It!

With the WordPress plugin Calendarize It! customizing the calendar design is particularly easy with the free Visual Editor. The plugin includes advanced filtering, based on many taxonomies like time, organizer, and location. You can list events based on days, months or years and view upcoming events through widgets.

Calendarize it

The plugin also supports user role management, custom post types, multiple shortcodes, and custom fields for events. It also has a number of paid modules at $ 15 each, which includes payment options, advertising options, event and booking scoring, reviews and much more.

Its features include: Importing events in CSV format, displaying events by year, countdown on events, support for several payment options, support for advertising options, sharing on social networks, the intuitive booking form, etc….

Download | Demo | Web hosting

3. Directory ultimate PRO

Directory ultimate PRO is a premium WordPress plugin that allows you to create any type of directory on the internet. It can be integrated into any WordPress theme and can be customized according to your needs. It highlights its personalized search function which is one of the main characteristics of websites in this niche.

Directory ultimate pro 1

Its search bar allows you to add personalized filters and choose the search style, finally that it adapts perfectly to your website.

As features, it offers among others: a 100% responsive layout, a customizable search, 3 ways to display your directory, optimization for mobile navigation, excellent SEO, compatibility with the majority of modern browsers, and more       

Download | Demo | Web hosting

Easily create your Online Store

Download free WooCommerce, the best e-commerce plugins to sell your physical and digital products on WordPress. [Recommended]

Recommended Resources

Find out about other recommended resources to help you build and manage your website.

Conclusion

Here is ! That's it for this tutorial. We hope the latter will allow you to add a custom navigation menu to your WordPress blog or website. 

However, you will also be able to consult our resources, if you need more elements to carry out your projects of creation of Internet sites, by consulting our guide on the WordPress blog creation.

Tell us what you think about this tutorial and do not hesitate to share with your friends on your favorite social networks

...

This article features 0 comments

Leave a comment

Your email address will not be published. Required fields are marked with *

This site uses Akismet to reduce unwanted. Learn more about how your comments data is used.

Back To Top
4 shares
Share2
tweet
Save2