How to Create and Edit a WordPress Menu | Easy Beginner’s Guide

Create a WordPress menu that helps organize and structure your website's navigation, making it easier for visitors to explore your content. Think of your menu as a map of your website. The main menu shows the broad categories of subject matter and the most important pages on the site. The drop-downs of the main menu have more specific areas under each category. The secondary menu is for items that are less important, such as a login or account link.

We will cover various aspects of WordPress menus, including main menu configuration, adding new menu items, creating drop-down menus, custom links, assigning menu locations, utilizing the navigation block, setting up sidebar menus, and addressing frequently asked questions (FAQs) related to menus. By following the steps outlined in this post, you can create a custom navigation menu and enhance the user experience.

Before you start, here's where to find your menu editor

To create or edit your menu, log in to your WordPress dashboard and navigate to “Appearance” and then “Menus.” This will take you to the Menu Editor, where you can manage your menus.

How to Create a WordPress menu

Select the Menu to Edit

If you have multiple menus on your website, you will see a drop-down menu at the top of the Menu Editor labeled “Select a menu to edit.” Choose an existing menu or create a new one by selecting the “Create a new menu” option and giving it a name. If you only have one menu, this option will not be visible.

Add Menu Items

On the left-hand side of the Menu Editor, you will find various options to choose from, such as pages, posts, custom links, categories, and more. If you click screen options at the top of the page, you'll see more advanced menu properties.

Menu Locations

WordPress themes often provide multiple menu locations where you can display your menus, such as the header, footer, sidebar, or other designated areas. Assigning menus to specific locations allows you to have control over where your menus appear on your website, ensuring optimal visibility and accessibility. In this section, you will learn how to assign menus to different locations, so you can customize your website's navigation according to your preferences.

Configure Menu Locations

In the Menu Editor, look for the “Menu Settings” section, usually located at the top or on the right side of the editor. Here, you can manage the locations that are provided by your theme.

Select a Menu Location

Review the available menu locations provided by your theme and select the location where you want your menu to appear. The names and descriptions of these locations may vary depending on your theme, but they are typically labeled intuitively, such as “Primary Menu,” “Main Menu,” “Footer Menu,” “Mobile Menu,” and so on.

Assign the Menu to a Location

Once you have chosen the desired menu location, click the checkbox next to it to assign your menu to that location. You can assign the same menu to multiple locations if your theme supports it. Note that some themes may have additional settings or options specific to each menu location. If available, explore these settings to further customize the appearance and behavior of your menu.

Save the Menu

After assigning the menu to the desired location, click the “Save Menu” button to save your changes. WordPress will now associate your menu with the selected menu location in your theme.

Preview and Publish

To see how your menu appears in its assigned location, navigate to the relevant pages on your website and preview the changes. Ensure that the menu is displaying as expected and that it integrates well with the overall design and layout of your site. If everything looks good, click the “Publish” button to make your menu visible to your visitors.

Main Menu

The main menu is the primary navigation menu on your WordPress website. It typically appears at the top of your site and helps visitors navigate through different pages and sections. In this section, we will walk you through the step-by-step process of creating and customizing your main menu.

In the menu editor, select your main menu. To add a page to your menu, click on the “Pages” tab, check the box next to the pages you want to include, and then click the “Add to Menu” button. The selected pages will appear as menu items in the right panel.

You can also add other types of content, such as posts or categories, by selecting the respective tabs and choosing the items you want to include.

You can customize individual menu items by expanding them in the right panel. Here, you can edit the navigation label, which is the text that appears on the menu, and add a title attribute for additional information that appears as a tooltip when visitors hover over the menu item.

Then, assign your menu location, in this case, it will be the primary menu.

Custom Menu

A custom menu allows you to create and personalize your own menu structure, giving you full control over the navigation experience on your website. This feature is especially useful when you want to organize your content in a specific way or create unique menu structures for different sections of your site. Here's how to create and customize a custom menu in WordPress.

Create a New Custom Menu

If you don't have a custom menu yet, select the “Create a new menu” option. Give your custom menu a name, something descriptive that reflects its purpose, such as “Main Custom Menu” or “Product Categories Menu.”

Add Menu Items

Now that you have created your custom menu, it's time to add menu items to it. On the left side of the Menu Editor, you will find various options like Pages, Posts, Custom Links, Categories, and more.

• Pages: To add a page to your custom menu, click on the “Pages” tab and check the box next to the pages you want to include. Then click the “Add to Menu” button. The selected pages will appear as menu items in the right panel.
• Posts: Similarly, you can add blog posts to your custom menu by selecting the “Posts” tab, choosing the desired posts, and clicking “Add to Menu.”
• Categories: If your website has a blog or uses categories to organize content, you can add category links to your custom menu. Simply select the “Categories” tab, choose the categories you want to include, and click “Add to Menu.”
• Custom Links: If you want to include external links or specific URLs in your custom menu, use the “Custom Links” section. Enter the URL and link text as explained in the previous “Custom Links” section.

Arrange Menu Items

After adding menu items to your custom menu, you can arrange their order. In the right panel of the Menu Editor, you will see the list of menu items you added. To rearrange them, click and drag a menu item to the desired position. This allows you to create well-organized menus.

Customize Menu Items

You can further customize each menu item by expanding it in the right panel of the Menu Editor. Here, you can edit the navigation label, which is the text that appears on the menu, and add a title attribute for additional information that appears as a tooltip when visitors hover over the menu item. This allows you to provide more context or concise descriptions for your menu items.

Save the Menu

Once you have added and customized your custom menu items, click the “Save Menu” button to save your changes. 

Always save and preview your menu, then hit publish.

Creating a Drop-Down Menu

Drop-down menus are a popular and effective way to organize and present a large number of menu items in a compact and user-friendly manner. They provide a neat and organized navigation structure that allows visitors to access submenus and related content with just a few clicks. Here's how to create and customize drop-down menus in WordPress:

Create Submenus

Submenus are the key component of drop-down menus. To create a submenu, you need to drag and indent menu items under a parent item. In the Menu Editor, on the right panel, click and drag a menu item slightly to the right, positioning it below another item. This creates a parent-child relationship, where the indented item becomes a submenu under the item above it.

Customize Submenus

You can further customize submenus to enhance their visibility and aesthetics. When creating a submenu item, you can expand it by clicking the downward-pointing arrow on the right side of the parent item. This reveals additional options for the submenu item, such as editing the navigation label, adding a title attribute, or assigning custom CSS classes for styling purposes.

Organize Menu Items

To create multi-level drop-down menus, repeat the process of creating submenus for the desired menu items. You can nest submenus under submenus to create a hierarchical structure. Arrange and rearrange the menu items and submenus by dragging and dropping them in the desired order within the right panel of the Menu Editor.

The Navigation Block:

The navigation block is a powerful tool introduced in the Gutenberg editor, the default WordPress block editor. This block provides an intuitive and visual way to create visually appealing and interactive menus on your website. In this section, we will show you how to leverage the navigation block to design and customize your menus step by step, empowering you to create engaging and dynamic navigation experiences.

Access the Gutenberg Editor

Create a new page or post or edit an existing one. This will take you to the Gutenberg editor, where you can build your content using blocks.

Add the Navigation Block

In the Gutenberg editor, click on the plus icon (+) to add a new block. Search for the “Navigation” block or navigate to the “Layout Elements” section and select the “Navigation” block from the available options.

Configure the Navigation Block

Once you've added the navigation block, you will see a set of configuration options in the block settings panel on the right side of the editor. Here, you can customize the appearance and behavior of your menu.

• Menu Source: Choose the source for your menu. You can select a specific menu you have previously created in the “Menu” dropdown or choose to display a page list automatically.
• Layout: Select the desired layout for your menu. You can choose between vertical and horizontal orientations, depending on the design and functionality you want to achieve.
• Style: Customize the style of your menu. You can choose from various pre-defined styles or apply your own custom CSS classes for more advanced styling options.
• Alignment: Set the alignment of your menu. You can align it to the left, center, or right, depending on your design preferences and page layout.
• Additional Settings: Explore additional settings such as enabling dropdown arrows, adjusting font sizes, enabling a hamburger menu for mobile devices, and more.

Customize Menu Items

After configuring the navigation block, it's time to customize your menu items. Click on the block itself, and you will see a list of your menu items displayed in a visual interface. Here, you can reorder and nest items by simply dragging and dropping them into the desired position.

Edit Menu Item Labels

To edit the labels of your menu items, click on a menu item in the visual interface. This will open an inline editor where you can modify the text, change the link URL, and add or edit any submenus. Take advantage of this feature to ensure your menu items are accurately labeled and linked to the appropriate pages or destinations.

Preview and Publish

Before publishing your post or page, always preview your navigation block to see how it looks and functions on the front end. Click the “Preview” button in the Gutenberg editor to view your menu in action. If everything appears as expected and meets your design requirements, click the “Publish” button to make your menu visible to your visitors.

Sidebar Menus

Sidebar menus are a great way to enhance the navigation experience on your WordPress website by adding additional menus to your sidebars or widget areas. These menus provide quick access to important links or secondary navigation options, making it easier for visitors to explore your content. Here's how to create and customize sidebar menus.

Give your sidebar menu a descriptive name that reflects its purpose, such as “Sidebar Navigation” or “Quick Links.”

Add Menu Items

On the left side of the Menu Editor, you will find various options like Pages, Posts, Custom Links, Categories, and more.

• Pages/Posts: To add pages or posts to your sidebar menu, click on the respective tab and select the pages or posts you want to include. Then click the “Add to Menu” button. The selected pages or posts will appear as menu items in the right panel.
• Custom Links: If you want to include external links or specific URLs in your sidebar menu, use the “Custom Links” section. Enter the URL and link text as explained in the previous “Custom Links” section.
• Categories: If your website has categories and you want to include category links in your sidebar menu, select the “Categories” tab. Choose the categories you want to include and click “Add to Menu.”

Add the Sidebar Menu to Your Sidebar or Widget Area

To make your sidebar menu visible on your website, you need to add it to a sidebar or widget area. The available sidebars and widget areas depend on your theme.

• Navigate to “Appearance” and then “Widgets” in your WordPress dashboard.
• Find the “Custom Menu” widget and drag it to the desired sidebar or widget area.
• Select your sidebar menu from the dropdown list in the widget settings and click “Save” or “Publish” to apply the changes.

Remember to follow these steps after you're finished creating a menu

Customize the navigation items

To further customize the appearance of the menu, you can expand it in the right panel of the Menu Editor. Here, you have the option to edit the navigation label, which is the text that appears on the menu itself. This label can be different from the original link text if you want to provide more context or a shorter version for the menu item.

Arrange and Save the Menu

You have the flexibility to arrange the position of the custom link within your menu. Simply drag and drop the menu item to the desired location in the right panel of the Menu Editor. This allows you to control the order in which the menu items appear on your website. Once you are satisfied with the arrangement of your menu items, click the “Save Menu” button to save your changes.

Preview and Publish

Before making your custom link visible on your website, it's always a good idea to preview it. Click the “Preview” button at the top of the Menu Editor to see how your menu will look and function on the front end. If everything appears as expected, click the “Publish” button to make your custom link live on your website, allowing visitors to navigate to the specified URL with a single click.

FAQ'S

Need some help? Join our Facebook Group and get easy-to-follow, step-by-step answers to your WordPress issues!

Sharing is caring!