Navigation menus serve as crucial guidance tools for anyone looking to browse through a website. They help visitors get a general map of the website and quick access to pages or content they want to look at.
As components go, they are perhaps the most crucial element of a website. A well-organized menu can do wonders for user experience, making the task of navigation a breeze.
WordPress, being one of the most popular content management systems, offers versatile options for creating custom menus without requiring any coding knowledge.
In this article, we’ll explore three user-friendly methods to create custom menus in WordPress: using your theme’s built-in functionality, utilizing Full Site Editing (FSE) or the Gutenberg editor for block themes, and employing a plugin. These methods are easily adoptable regardless of your experience with WordPress.
Before we dive into creating custom menus, it’s important to understand the key differences between Classic and Block themes in WordPress, as these differences directly impact how menus are created and managed.
Understanding these differences will help you choose the right method for creating custom menus based on the theme you’re using and your familiarity with WordPress’s editing tools.
Whether you’re working with a Classic or Block theme, WordPress provides the tools you need to build effective and visually appealing menus that enhance your site’s navigation.
With that out of the way now lets look at custom menus.
Custom menus in WordPress allow you to create and manage navigation menus that suit your website’s structure and design.
Unlike the default menus, which may automatically include pages or posts in a fixed order, custom menus give you complete control over the items displayed and their arrangement.
This flexibility enables you to highlight important content, organize links in a logical flow, and provide a better user experience for your visitors.
A custom menu is a collection of links, typically displayed in the website’s header, footer, or sidebar, that guides users to various parts of the site.
These links can include:
Ever felt lost on a website, clicking around aimlessly? We’ve all been there, and it’s frustrating! That’s why custom menus are so important.
Let’s chat about why they can be such a godsend for your site:
Custom menus are a powerful tool for website owners to shape the user journey and ensure that visitors can access all the essential parts of the site with ease.
Whether you’re using a classic theme, a modern block theme, or a plugin, creating and managing custom menus is a worthwhile endevour for anyone looking to build a presence on WordPress.
Now you know what a custom menu is so lets look at how to customize menu in wordpress.
Many WordPress themes come with built-in support for creating and managing custom menus. This method is straightforward and does not require any additional plugins or technical skills.
You can easily create a custom menu through the WordPress dashboard and assign it to various locations provided by your theme, such as the header, footer, or sidebar.
Before going into this method please do ensure that you’re working with a classic theme and not a block theme as these functionalities are not available in block themes which we will check out later in the article.
1. Accessing the Menus through Appearance > Menus
To start creating a custom menu, navigate to your WordPress dashboard and go to Appearance > Menus. This section allows you to manage your site’s menus.
2. Creating a New Menu
If you’re creating a menu for the first time, you’ll need to set it up:
3. Adding Items to Your Menu
Once your menu is created, you can start adding items:
Simply check the boxes next to the items you want to include and click “Add to Menu.” You can’t add buttons in this method however. To add a button on a classic theme you’ll need to resort to a menu builder plugin.
4. Assigning the Menu to a Location
After adding items, you’ll need to decide where the menu will appear on your site. Your theme may support multiple menu locations, such as:
Select the appropriate location(s) for your menu by checking the corresponding box under “Menu Settings”.
Remember, not all themes will support all three options. Some may only provide the Primary and Footer menu, others may include all three.
5. Organizing and Arranging Menu Items
You can easily organize and rearrange the items in your menu by dragging and dropping them into the desired order.
To create sub-menus (dropdown menus), simply drag an item slightly to the right under the parent item. This nesting creates a hierarchical structure.
6. Saving and Previewing Your Menu
Once you’ve added and arranged your menu items, click the “Save Menu” button to save your changes. It’s a good idea to preview your site to ensure the menu appears as expected. Navigate to the front end of your website and check the menu’s appearance and functionality.
Alternatively, you can also go to Appearance > Customize. This will take you to a live editor:
From here, click on “Menus” and start customizing your existing menus or add new menus.
As you’ve seen, using your theme’s built-in functionality is a convenient and efficient way to create custom menus in WordPress.
It provides a simple interface for managing navigation without the need for additional tools or coding, making it accessible for all users.
There are a few limitations however such as styling changes or additional component usage such as buttons are not supported. So lets look at the second method that addresses these limitations.
With the introduction of Full Site Editing (FSE) in WordPress, creating and managing custom menus has become more flexible and intuitive, especially for block themes.
This method leverages the Gutenberg editor’s block-based approach, allowing users to design and customize their entire site, including navigation menus, using blocks.
1. Navigating to Appearance > Editor
To access the Full Site Editing interface, go to your WordPress dashboard and navigate to Appearance > Editor. This will open the Full Site Editor, where you can customize various parts of your theme, including headers, footers, and templates.
2. Accessing the Site Editor or Template Parts
In the Site Editor, you can modify global site elements or specific template parts like headers and footers. If your goal is to add or edit a navigation menu, you’ll typically work within the header template or Navigation part. Click on “Navigation” or the specific template part you wish to edit.
3. Adding a Navigation Block
To create a menu, you’ll use the Navigation Block:
Insert the Navigation Block: Click on the “+” icon to add a new block and search for “Navigation.” Select the Navigation Block and place it in your desired location, such as within the header area.
Adding Menu Items: Once the Navigation Block is added, you can start adding menu items. Click on “Add items” and choose from existing pages, posts, categories, custom links, or even specific templates. You can also reorder the items by dragging and dropping them within the block.
Creating Sub-Menus: To create dropdown sub-menus, simply drag a menu item slightly to the right beneath another item, creating a nested structure.
For block themes such as Twenty-Twentyfour there’s a header usually added by default. Now if you want to add a custom menu (Navigation bar) to just one of the page then you can start editing right inside the header just click the “+” button and search for the navigation element:
Here’s what you’ll see after adding the navigation element:
You’ve just created the first option on your custom menu. Now you can add more options to the menu, add submenus to the options, add buttons and do bunch of other neat stuff.
As easy and fun as this is, it’s not the best practice. What you need to do is create a custom menu element so you can save it and use it across all your pages. You don’t want to have to design the whole menu again if you need to add it on another page.
So what do you do? When you first land on the editor on the left side bar click on “Navigation”.
Then click on the 3 dots and click on Edit.
This will remove the all the other elements on the website and simply allow you to start editing the custom menu you want to create.
Here’s the test menu I created:
Next you need to save your new navigation menu. Just go the top right and click on “Save”.
Now whenever you create a new page, no matter the pattern you use this custom navigation bar will be added to header. Here you can see that I created a Test page and the custom menu that I created is already here.
4. Customizing the Appearance
The Gutenberg editor provides various customization options for the Navigation Block:
5. Saving Changes and Previewing the Menu
Once you’ve configured your menu, click the “Save” button to apply your changes. You can preview your menu’s appearance and functionality by navigating to the front end of your website.
6. Managing Menus Across Your Site
In the Site Editor, you can manage menus across different templates and template parts. For instance, you may have different menus for different sections of your site (e.g., a main menu in the header and a secondary menu in the footer). You can easily switch between these templates and customize them accordingly.
Using Full Site Editing and the Gutenberg editor for block themes offers a highly visual and flexible way to create and manage custom menus. This method is ideal for users who prefer a more intuitive, drag-and-drop interface and want to take full advantage of the block-based design approach in WordPress.
Using a plugin to create and manage custom menus in WordPress is an excellent option for users who want additional functionality and design flexibility beyond what their theme or Full Site Editing provides. There are numerous plugins available that offer advanced features such as mega menus, customizable styling, and more complex menu structures.
1. Choosing and Installing a Menu Plugin
To get started, you’ll need to choose a suitable plugin based on your requirements. Some popular menu plugins include:
To install a plugin, follow these steps:
2. Setting Up a New Menu Through the Plugin’s Settings
After activating the plugin, navigate to its settings page. This is usually found under a new menu item added to your dashboard or within the Appearance menu.
3. Customizing the Menu Layout and Style
One of the main benefits of using a plugin is the ability to customize the menu’s appearance and behavior extensively:
4. Assigning the Menu to a Location and Saving Changes
Once you’ve configured your menu, you’ll need to assign it to a specific location on your site. This can usually be done within the plugin’s settings or through the standard Appearance > Menus interface:
Make sure to save your changes and check how the menu appears on the front end of your site.
5. Previewing and Testing Your Menu
It’s important to preview your menu on both desktop and mobile devices to ensure it functions correctly and looks good across all screen sizes. Test all links and interactive elements to confirm that they work as intended.
Using a plugin for creating custom menus in WordPress provides a wide range of features and customization options that may not be available through your theme or the default WordPress functionality. This method is particularly useful for users who need advanced menu structures, unique design elements, or enhanced functionality like mega menus and responsive options.
NOTE: Before using any of these plugins it should be noted that to get the most functionality out of these plugins its recommended to get the Pro versions. The free versions are somewhat limited in their customization abilities…
When it comes to creating custom menus in WordPress, there isn’t a one-size-fits-all solution.
The best method for you depends on your specific needs, the complexity of your site, and your comfort level with different tools.
Here’s a breakdown of the three methods we’ve discussed, along with key factors to consider when deciding which one to use.
When choosing the best method for creating your custom menus, consider the following:
Creating a custom menu is more than just organizing links; it’s about designing a user-friendly navigation system that enhances your visitors’ experience on your website.
A well-crafted menu can guide users to important content, improve engagement, and even boost your site’s SEO.
Here are some tips to help you create effective menus that serve both your audience and your website goals.
Creating a custom menu in WordPress doesn’t have to be complicated, whether you’re using your theme’s built-in functionality, the powerful Full Site Editing (FSE) and Gutenberg editor for block themes, or a specialized plugin for advanced features.
By choosing the method that best suits your needs and following best practices, you can design an intuitive and effective navigation system that enhances your visitors’ experience and supports your website’s goals.
With the right approach, your custom menu can become a powerful tool for guiding users through your content, improving engagement, and helping your site stand out.
Jemee is a dedicated content creator, video producer, and Support specialist for WP Adminify plugin users. With a passion for keeping the community informed, Jemee shares valuable insights through blog posts and engaging videos. Need assistance? Jemee is here to help you solve any WP Adminify plugin related challenges! Just join in the live chat or drop an email from the contact page.