How to Add Custom Navigation Menus in WordPress Themes

Why Use Custom Navigation Menus in WordPress Themes?

A navigation menu is a list of links that directs visitors to important areas of your website, enabling them to find content easily. This can help increase pageviews and reduce bounce rate in WordPress.

The location of your menu will depend on your WordPress theme, as most themes have multiple options for displaying menus in different places. You can view the available display locations in the ‘Display location’ section under Appearance » Menus.

However, there may be times when you want to show a menu in an area that is not listed as a ‘Display location’ in your theme.

In this article, we will explain how to create custom navigation menus in WordPress and add them to your theme. Use the links below to quickly navigate to your preferred method.

Method 1. Adding a Custom Navigation Menu in Full Site Editing

For block-based WordPress themes, Full Site Editing (FSE) and the block editor provide a way to add a custom navigation menu. However, not all themes support this method, and it does not offer complete menu customization. If you need a fully customized menu for any WordPress theme, it’s best to use a page builder plugin.

To add a custom navigation menu using FSE, go to Appearance » Editor. This will open the full site editor with one of your active theme’s templates selected. If you want to add a menu to a different template, click on the arrow in the toolbar and select ‘Browse all templates.’

In the editor, add a Navigation block to the area where you want to show your menu. To create a new menu, click on ‘Create new menu.’ To add items to the menu, click on the ‘+’ icon and select a post or page. When finished, click ‘Save’ to use the new template with your custom navigation menu.

Method 2: Creating a Custom Navigation Menu in WordPress Using SeedProd (Compatible with All Themes)

While the full site editor allows for a basic custom menu for block-based themes, a page builder plugin like SeedProd is necessary for an advanced, fully-customizable menu in any theme. With SeedProd, you have access to over 180 professionally-designed templates, and you can add a custom navigation menu using simple drag and drop. After installing and activating SeedProd, you can choose a template for your custom page from a variety of campaign types, then customize the blocks within the template using the left-hand toolbar. To add a custom navigation menu, drag a ‘Nav Menu’ block onto the page and customize the items within the menu using the ‘Add New Item’ button and the ‘URL Link’ section. Finally, you can adjust the menu’s colors, spacing, typography, and other advanced options under the ‘Advanced’ tab before publishing the page.

Method 3. Creating a Custom Navigation Menu in WordPress Using Code (Advanced)

For users who do not wish to use a page builder plugin, a custom navigation menu can be added using code. Typically, this involves adding custom code snippets to the functions.php file of the theme. However, this method is not recommended for anyone except advanced users, and even then, a minor error in the code can result in common WordPress errors or complete site breakdown.

Therefore, we recommend using the WPCode plugin, which provides a safe and simple way to add custom code in WordPress without modifying any core WordPress files. To use WPCode, install and activate the plugin on your website, then go to Code Snippets » Add Snippet in your WordPress dashboard.

Once you’ve entered a title for the custom code snippet and selected “PHP Snippet” in the “Code Type” dropdown, you can add menu items to the new location. Then, to display the custom navigation menu, you need to add a wp_nav_menu function and specify the name of your custom menu to the theme’s template file, such as header.php. After adding the code, save your changes by clicking the ‘Update File’ button.

By default, your custom menu will appear as a plain bulleted list, but you can use custom CSS code to style it to match your WordPress theme or company branding. To do this, go to Appearance » Customize and click on ‘Additional CSS’. Here, you can enter your CSS code and style the menu using the CSS class you added to your theme template, such as .custom_menu_class.