Do you want to know how to add custom navigation menu in WordPress? By default, many WordPress themes offer 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.
When will you need to add a custom menu on your WordPress theme?
Most WordPress themes provides at least one location where you can display 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 DIY or for those who need to add an extra slot 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.
If you want to add more than one new navigation menu location then you need to use a code like this:
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 have added the menu location, test your menu and add a few items in 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 WordPress 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. Your menu will appear as a simple bulleted list in your website.
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.
We've seen how convenient these menus can be for your mobile traffic.
Discover also some themes and premium WordPress plugins
You can use other WordPress plugins to give a modern appearance and to optimize the handling 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.
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 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.
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 WordPress Plugin premium which allows you to create any type of directory on the internet. It can be integrated into any WordPress theme and can be customized to your needs. It showcases its custom search feature which is one of the main features of websites in this niche.
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
Recommended Resources
Find out about other recommended resources to help you build and manage your website.
- How to integrate Google Forms WordPress
- How to properly delete a page on WordPress
- 8 WordPress plugins to create a megamenu on your blog
- 6 WordPress plugins to ensure GDPR compliance of a blog
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.
...
