Tips on how to add {custom} navigation menus in WordPress themes

Would you like to add custom navigation menus to your WordPress theme? Navigation menus are the horizontal list of links that appear on most websites.

By default, WordPress themes contain predefined menu positions and layouts. However, what if you want to add your own custom navigation menus?

In this article, we are going to show you how to easily create and add custom navigation menus in WordPress so that you can display them anywhere in your theme.

When do you need this WordPress navigation menu tutorial?

Most WordPress themes include at least one place where you can view your site’s navigation links in a menu.

You can manage menu items through a user-friendly interface in your WordPress administration area.

If you just want to add navigation menus on your website, just follow our beginner’s guide on adding a navigation menu in WordPress.

The goal of this tutorial is to help the home improvement / advanced user incorporate custom navigation menus into their WordPress themes.

This article covers the following topics:

Let’s take a look at how to add custom WordPress navigation menus to your theme.

Creating custom navigation menus in WordPress themes

Navigation menus are a feature of WordPress themes. Each topic can define its own menu positions and menu support.

To add a custom navigation menu, you must first register your new navigation menu by adding this code to your topic’s functions.php file.

Function wpb_custom_new_menu () {register_nav_menu (‘my custom menu’, __ (‘my custom menu’)); } add_action (‘init’, ‘wpb_custom_new_menu’);

You can go now Appearance »Menus Page in your WordPress admin and try creating or editing a new menu. You will see “My Custom Menu” as an option for the subject position.

Added custom navigation menu to topic

If you want to add more than one new position in the navigation menu, you need to use a code like the following:

Function wpb_custom_new_menu () {register_nav_menus (array (‘my custom menu’ => __ (‘my custom menu’), ‘additional menu’ => __ (‘additional menu’));} add_action (‘init’, ‘wpb_custom_new_menu’ );

After adding the menu location, add some menu items in the WordPress admin by following our tutorial on adding navigation menus for beginners.

That way we can move on to the next step which will show the menu in your topic.

Show custom navigation menus in WordPress themes

Next, 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 of a website, just after the website’s title or logo.

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

You’ll need to paste this code into the template file of your theme where you want to display your menu.

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

The 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 on your website as a simple bulleted list.

Custom displayed as a simple list

You can use the .custom_menu_class CSS class to design your menus. Here is an example of CSS to get you started:

div.custom-menu-class ul {margin: 20px 0px 20px 0px; List style type: none; List style: none; List style picture: none; Text alignment: right; } div.custom-menu-class li {padding: 0px 20px 0px 0px; Display: inline; } div.custom-menu-class a {color: #FFFFFF; }}

Custom designed menu

For more information on designing a navigation menu, check out our in-depth tutorial on designing WordPress navigation menus

Adding a custom navigation menu in WordPress using Page Builder

If you’re creating a custom landing page or homepage layout, using a WordPress plugin to create pages would make things a lot easier.

We recommend using Beaver Builder, the best WordPress page builder out there. You can create any type of page layout with simple drag and drop tools (no coding required).

This includes adding a custom navigation menu to your page layout.

First you need to install and activate the Beaver Builder plugin. For more information, see our step-by-step guide on installing a WordPress plugin.

Once activated, you will need to create a new page or edit an existing page where you want to add the navigation menu. In the post editor screen, click the ‘Launch Beaver Builder’ button.

Start Beaver Builder

If it’s a new page, you can use one of the pre-made templates that come with Beaver Builder. You can also edit your existing page immediately.

Choose a template

Next, you need to add the menu module and drag and drop it onto your page where you want the menu to appear.

Add a menu module to your page

This will display the settings of the menu module in a popup. First, you need to select the navigation menu that you want to use. You can always create new menus or edit an existing menu by visiting Appearance »Menus Page in the WordPress admin area.

Settings of the menu module

You can also check other settings. Beaver Builder allows you to choose custom colors, backgrounds, and other style properties for your menu.

Once you’re done, you can click the Save button and preview your menu.

Preview of a custom navigation menu added with Beaver Builder

Creating mobile-friendly responsive menus in WordPress

With the increasing use of mobile devices, you may want to make your menus mobile friendly by adding one of their many popular effects.

Responsive menu example

You can add a slide-out effect (above), a drop-down effect, and even a toggle effect for mobile menus.

We have detailed, step-by-step instructions on how to create responsive WordPress menus for mobile devices.

Do more with WordPress navigation menus

Navigation menus are a powerful web design tool. They can be used to direct users to key areas of your website.

WordPress allows you to do a lot more than just display links in your menu. Try these useful tutorials to expand the functionality of the navigation menus on your WordPress site.

We hope this ultimate guide helped you learn how to add a navigation menu in WordPress. You might also want to see our list of the 25 Most Useful WordPress Widgets and our list of WordPress Plugins You Will Need.

If you enjoyed this article, please subscribe to our YouTube channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Comments are closed.