I have to admit that I don’t think WordPress menus are exactly the most user friendly part of the interface!
I definitely think there is room for improvement. But menus in WordPress are one of those things; they’re easy once you know how!
In this post I’ll show you how menus work in WordPress. I’ll show you how to create menus, assign them to specific locations within your theme, and how to add items to your menus.
Click on the links below to help you navigate through this post.
- How menus in WordPress work
- How to create a new menu
- How to assign a menu to a menu location
- But what if my theme doesn’t support menus?
- How to assign a menu to a widget
- How to add links to your menu
- Creating menus via the Customise page
How menus in WordPress work
Okay, so this is a little bit confusing.
Within your WordPress theme there will be menu locations. These are speficic areas in your theme that you can assign a menu to.
So for example, in the Twenty Seventeen theme there are two menu locations.
The first one is called Top Menu and this is located in the header:
The second one is called Social Links Menu and this is located in the footer:
So in order to add links to these menu locations, you would first need to set up a menu and then assign this menu to a specific menu location.
You can also create menus and assign them to a Navigation Menu widget.
Does that make sense? I really hope so! But if not, don’t worry! Keep on reading this post and everything will become clear.
How to create a new menu
Ok, let’s start by creating our very first menu.
To access the menus in WordPress, hover over Appearance in the left hand menu and then click on Menus.
If you have never set up a menu on your website before then your menus page will look a little something like this:
To create your menu, start by entering a name for your menu. This can be anything you like but I would recommend giving it a relevant name. So if you are creating your main menu for your website you might want to call in “Main Menu”.
After entering your menu name, click Create Menu.
Once you have created your first menu you’ll notice that the Menus page changes a little.
You’ll notice that a tab called Manage Locations has appeared at the top of the page, and that the tabs on the left hand side of the screen that were previously greyed out are now available for you to click on.
You’ll also notice that there are some new options in the section where you just created your menu such as Menu Structure and Menu Settings. We will look at these later in this post.
How to assign a menu to a menu location
Now you have created a menu, you can assign it to a location. And there are a number of ways you can do this.
Via the Edit Menus tab
The first way is via the Edit Menus tab of the menus page.
As you will see in the screenshot below the menu we are editing is the Main Menu we just created, and under the Menu Settings heading there is a setting called Display location. Here you can choose the menu location that you would like to specifically assign this menu you to. Once you’re done, click the blue Save Menu button.
Tip: Once you have created multiple menus, you can change which menu you are editing by clicking the dropdown next to Select a menu to edit at the top of the page.
Via the Manage Locations tab
The second is via the Manage Locations tab. And personally I think this way is easier to understand for newbies.
Start by clicking on the Manage Locations tab at the top of the page.
On this page page you will see a list of menus that your theme supports and their locations. If you click on the Select a Menu dropdown then you will see all of the menus you have created.
Select which menu you would like to assign to that particular location and click Save Changes.
Tip: You can also create a brand new menu for a theme location via the Manage Locations tab. Just click on Use a new menu and you will be able to create a new menu.
But what if my theme doesn’t support menus?
Most themes do support menus, but on the very rare occasion you might discover that you theme doesn’t have menus set up.
If your WordPress theme does not support menus then you will see this notification when you visit the menus page.
You will also notice that the Manage Locations tab won’t appear, even when you create a menu.
However, as I previously mentioned, you can create menus and assign them to a Navigation Menu widget instead.
How to assign a menu to a widget
Let’s take a quick look at how we can assign menus to a widget.
Hover over Appearance in the left hand menu, then click on Widgets. This will take you to the widgets page.
On the widgets page, scroll down until you see a widget called Navigation Menu. You can add this to your widgetised area by either dragging and dropping it into the widgetised area, or by clicking on the widget and selecting a widgetised area.
Once you have added your widget to the widgetised area, you will be able to give it a title and select the menu you have created from the dropdown list. When you’re done, click Save.
How to add links to your menu
You’ve created your menu and you’ve assigned it to a location (or widget). Now we can add some links to the menu. So let’s head back to the main Edit Menu page.
On the left hand side of the menus page you will see a number of tabs that look like this:
By default there are usually 4 tabs:
- Custom Links
If your WordPress theme supports different post formats (like the Twenty Seventeen theme) then you will also see a Format tab. And if you have WooCommerce installed then you will see even more tabs here.
From these tabs you can select items to add to your WordPress menu. So for example, the Pages tab contains a list of pages on your website, and Posts tab contains a list of blog posts. You can easily select items from these lists and then add them to your menu. The same goes for post categories.
There can also create custom links via the Custom Links tab using any URL you wish, such a URL of an external website.
To add an item to your menu, tick the tickbox next to a paritcular item (you can add multiple items at once) and then click Add to Menu.
After you click Add to Menu your items will appear within your Menu Structure on the right hand side of the page:
Within the Menu Structure section, you can reorder your items simply by dragging and dropping them into position. It couldn’t be easier!
The drag and drop functionality that is used to order items in a menu is also used to create sub items. Think of sub items as children of a menu item, which is the parent. Normally they are hidden by default but show when you hover over the main item (the parent) in the menu as demonstrated below:
All you have to do is grab on to a menu and pull it slightly to the right below the item that you want to be the main menu item.
You’ll then see a dotted line as shown in the image below. This shows that the item will be a sub item of a particular item.
Here’s a little GIF to demonstrate what I mean:
Once you have added your items to your menu, you can click on the dropdown arrow next to an item to reveal more settings.
For most menu items you can just change the navigation label, change its positioning, and delete the item if you wish. However, for Custom Links you can also change the URL.
When you are happy with the set up of your navigation, click Save Menu and check out what it looks like on your website. Don’t forget, you can come back and change your menu at any time.
Creating menus via the Customise page
You can also create a new menu via the Customise section of WordPress. To access the Customise page, hover over Appearance in the left hand menu and click Customise.
Once you are on the Customise page you will see a tab called Menus. Click on this to view the menu settings.
To create your menu, click on Create New Menu.
Here, you will need to give your menu a name and choose which menu location you would like to assign this menu to. When you’re done, click Next.
To add items to your menu click on Add Items.
This will display same tabs that we saw earlier on the menus page.
To add an item to your menu, click on the + icon next to the item you wish you add to your menu. The item will then appear on the left hand side of the screen. Here, you can rearrange the items within your menu, and you can set up sub-menus just like you can on the menus page.
The good thing about setting up menus via the Customiser page is that you can actually see a live preview of your menu before you save your changes.
When you are happy with your menu, click Publish.
Hot off the WordPress!
Join my FREE email community today to receive helpful tips and advice on building and maintaining your website directly in your inbox every other Friday. Just pop in your name and email address.