Unlimited WordPress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. WordPress

How to Edit a WordPress Menu

Read Time: 7 mins

A menu allows you to navigate through a website. It helps organize the site by giving you easy access to related items within a couple of clicks.

For the sake of branding and improving the user experience, you can choose the kind of menu you want on your website. The most common and accessible kind of menu is a horizontal menu at the top of the website. However, you also have the option of having a sidebar menu that is either on the left or right of the website page and can easily be hidden from the screen. One less common option is the footer menu; it's often used when you want to attract users to the homepage rather than being distracted by the menu.

WordPress allows you to have the menu you want for your website. This tutorial is your quick guide on how to edit the menu in WordPress.

For this tutorial, we are using the “Twenty Twenty” theme of WordPress.

Creating a New Menu

Before you edit a WordPress menu, you’ll have to create one. To create a new menu, open up your WordPress dashboard and select the Appearance customization menu from the left. There, you’ll find an option for customizing the menus.

Appearance > MenuAppearance > MenuAppearance > Menu

If you're still wondering what the purpose of the menu is, see that you have just made use of the sidebar menu of the WordPress dashboard. Now imagine locating this page if you did not have access to this sidebar menu. Menus make it easy to access various options, and you need one, especially if you have a large website.

With every theme that you activate, the theme adds a generic menu to your website by default. Since we are creating and editing a WordPress menu from scratch, I am deleting the default menu so you can understand the process better.

If you also want to delete the WordPress menu, you will find an option at the bottom of the page that says Delete Menu. This is how your website would look without any menu.

Webpage with no menuWebpage with no menuWebpage with no menu

With the existing menu now deleted, you will get the option of creating a new menu. The only compulsory field that you need to fill in for now is the menu name. Fill in that field and click on Create Menu.

Creating a menu from scratchCreating a menu from scratchCreating a menu from scratch

With that being done, you now have a menu for your WordPress website. However, it will not show up on your website because you have not added any menu items to it yet.

Adding Menu Items

Every link that is on the menu is a menu item. These menu items have to be added manually as you edit a WordPress menu. 

All of the pages that you have added to your WordPress website will be listed under the pages tab. Click on View All to see the complete list. Your recently accessed pages will be listed under the Most Recent tab.

add menu itemsadd menu itemsadd menu items

Select all the pages that you wish to see on your menu and add them to your menu. This is how your menu will look once you have added the required pages.

menu structure after adding pagesmenu structure after adding pagesmenu structure after adding pages

Select the kind of menu you want from the radio buttons below and save the menu. We have opted for the horizontal menu on the top. This is how your website will look after you have saved the menu. Remember that saving the menu is important; otherwise, your menu will not show up on your website.

webpage with menu on topwebpage with menu on topwebpage with menu on top

If you want to change the positioning of the menu items, you can drag and drop them to wherever you want them. The item on the top will appear on the left, and the item on the bottom will appear on the right. Let’s drag the Home Page to the bottom.

changing the position of menu itemschanging the position of menu itemschanging the position of menu items

This is how the menu shows up on your webpage afterward:

Changed location of HomepageChanged location of HomepageChanged location of Homepage

If the navbar on the top does not fit well with your webpage or you simply want to move the menu to the side of the webpage, you can do this by selecting Desktop Expanded Menu from the menu settings. The menu will then move to the side of your webpage.

Side MenuSide MenuSide Menu

Lastly, we have the footer menu, where the entire menu moves to the bottom of the page. If you have a large website, it is recommended that you keep one menu on the top and another one at the bottom for the best user experience.  However, it largely depends on your website and brand.

If you are running a blog, you might need a minimal menu on the top, but if you are a photographer and have a portfolio website, a footer menu or no menu at all would be better options for you. However, if you run an eCommerce store, a sidebar or a menu both at the top and bottom of your website might be suitable for you, depending on the size of your store.

Footer MenuFooter MenuFooter Menu

Adding a Dropdown Menu

Sidebar menus can exist without having any dropdown menu. However, it becomes confusing if you keep on adding menu items to the navbar on the top. To avoid a crowded navbar, you can add a drop-down menu. They help keep your menu minimal and your website organized.

WordPress makes it easy to turn a regular menu into a dropdown menu through its drag-and-drop feature.

A dropdown menu in WordPress acts like a nested menu that is one menu inside another. All you have to do is drag a child menu item and drop it into a parent menu item. 

See, we have dragged the Contact page and dropped it in the About page.

dropdown menu structuredropdown menu structuredropdown menu structure

This is how the dropdown menu will show up on your webpage once you save your settings.

Dropdown menu webpageDropdown menu webpageDropdown menu webpage

You can add more menus or items to your dropdown menu by placing a child menu item under an existing child menu item.

dropdown menu within a dropdown menudropdown menu within a dropdown menudropdown menu within a dropdown menu

This is how the above menu structure shows up on your webpage:

dropdown menu within a dropdown menu webpagedropdown menu within a dropdown menu webpagedropdown menu within a dropdown menu webpage

You can have nested menus inside the desktop expanded menu as well. You just have to use the drag and drop feature, and it's all done.

Dropdown side menuDropdown side menuDropdown side menu

Adding Custom Links to a Menu

WordPress also allows you to add custom links leading to another website into your menu. Here’s how to edit the menu in WordPress and add a custom link to it.

Open up the custom links tab at your right, and enter the URL of the website that you want your menu item to have. After you’ve entered the URL, add the item to the menu. Let’s add a Twitter link to the menu.

Adding custom linkAdding custom linkAdding custom link

By default, this custom link would be named menu item. Scroll down to this menu item, and enter the right navigation label to rename it to whatever you like.

Giving name to the custom linkGiving name to the custom linkGiving name to the custom link

This is how it will show up on the webpage:

webpage with twitterwebpage with twitterwebpage with twitter

This custom link gets the job done, but wouldn’t it be better if it had a Twitter icon instead?

Adding Icons to Your WordPress Menu

To add an icon to your menu, you’ll need to install a third-party plugin. There are several plugins available for this purpose, but for this tutorial, we’ll be using the Menu Image plugin.

Once the plugin is installed and activated, it’ll show up alongside your menu items.

Menu Image PluginMenu Image PluginMenu Image Plugin

Scroll down to the menu item where you want the icon to be added and select Menu Image.

Select icon from the options and then select the required icon. Click Save Changes, and don't forget to save the menu once you are done.

Adding an iconAdding an iconAdding an icon

The icon will then be added to your WordPress menu:

webpage with twitter iconwebpage with twitter iconwebpage with twitter icon

Summary

In a few easy steps, we have managed to put together a WordPress menu that will work great for your website. In this tutorial, we covered:

  • how to create and delete a WordPress menu
  • how to add items to the WordPress menu
  • how to have a dropdown menu
  • how to add links to your WordPress menu items
  • how to add icons on your WordPress menu

This tutorial is all you will need to create and edit a menu on your WordPress website. 


Advertisement
Did you find this post useful?
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.