Today, I want to talk about a crucial element for many websites: the menu.
A website menu is a bit like a restaurant menu. It must help you to quickly see the options available and make you want to stay.
That’s why your navigation menu must be uncluttered, clear and well organized to make your visitors’ mouths water.
So, how do you create a WordPress menu and how do you configure it? That’s what we’ll see right now.
Your best WordPress projects need the best host!
WPMarmite recommends Bluehost: great performance, great support. All you need for a great start.
Two ways to set up a WordPress menu
If you’ve ever browsed the WordPress admin, your first instinct for creating a navigation menu is probably to go to Appearance > Menus.
If so, you’re not wrong, as you could easily get away with it.
However, if you go to Appearance > Customize, you will come across the Customize Tool for your site, which contains a “Menu” item. Click on it to get to another, more intuitive menu creation module.
So, if there are two different ways to do this, why go through the second one you might ask? The advantage of using the Customizer is simply that you have access to a live preview of your site actions.
So, ready to take the plunge into the Customizer? Take a deep breath, flex, let’s go!
In the Customizer
Once in Appearance > Customize, click on the “Menus” item, then on the “Create New Menu” button. Give it a name and assign it a location on your site (otherwise, your menu will not be displayed).
The available menu areas differ depending on the WordPress theme active on your site. On the above screenshot, you can see the 5 areas offered by the Astra WordPress theme.
Next, it’s time to add items to your menu using the dedicated button. To do this, click on the “Add Items” button and then enjoy the different types of items ready to integrate your menu:
- Custom Links
If you are looking for a particular item, you can use the search bar at the top of this list.
Once you have created your menu, let’s see how to add items to a menu.
Adding items to a menu
Before we get down to business, I’d like to digress for a moment to give you some advice on what a good menu is.
The menu of your site is the entry point of your users’ navigation, so you must take care of it.
To do this, a menu must have 3 characteristics:
- A limited number of items.
- Concise and clear headings.
- Few, if any, submenus.
We agree, there may be exceptions depending on the site (especially for submenus). However, if your site is a blog or a small showcase site, don’t go overboard.
Why, you may ask?
Because the more choices you give to your visitors, the more they will have to think about which item to click on, the more time it will take, and in the end, they may go elsewhere.
It’s a bit like a restaurant menu, the more there is, the harder it is to choose.
So remember to get to the point.
Now let’s get down to business and see how to structure your menu.
Adding pages to your WordPress menu
When you click on the “Add Items” button, you will immediately see the pages you have previously created.
It is also possible to quickly create new pages using the field and button below the list of your pages.
To add one to your menu, click on the “+” before the page title.
There is no need to add a link to the home page of the site in the menu, as the home page is already accessible from the logo. As for your terms of service, it is better to insert a link to them in your footer.
To remove it, click on the red cross that follows the title of the added page.
If pages are the main elements you will add to your menus, they are not the only ones offered by WordPress.
Including links in your menu
For the sake of your navigation, you may need to use custom links in your menus to take your visitors to another site (a partner’s site, for example; don’t send your visitors to just any site!)
To do this, enter the desired link in the “URL” field, then the link text (the anchor) in the “Link Text” field. Then click on “Add to Menu” to include your link.
Adding items to your menu
Adding categories to your menu
It is also possible to incorporate categories into your menu. This is very useful on blogs. In fact, this is what WPMarmite uses in its footer to make it easier for you to find the articles that interest you.
Unlike pages, you will need to create your categories before you can add them to your menu, you can’t create them from the WordPress menu management interface.
So click on “Categories” to see the list of categories created on your WordPress site. However, you will notice that an additional category has been inserted without your request, in the first position.
This “Uncategorized” category is the default category in WordPress and contains “unclassified” posts. Its presence is good neither for the user experience nor for the SEO of your site. We’ll show you how to set another default category and remove this unwanted one in this article.
To add or remove categories from/to your menu, proceed in the same way as for pages and posts.
Don’t forget to save your menu so that WordPress remembers what you’ve done.
Join the WPMarmite subscribers
Get the last WPMarmite posts (and also exclusive resources).
Organizing menu items in WordPress
Changing the order of items
At this point, your menu is not yet well structured. It has several items, but they are not necessarily arranged the way you want them to be.
To reorganize your menu, nothing could be simpler: you can change the order of the elements containing it with a simple drag and drop.
Do this until your menu looks like you imagine it will.
Note that the menu item in the first position will be displayed first on your site, i.e. on the left.
Creating a submenu
If you have a lot of items to add (beware of overloading), you can create submenus by moving an item slightly to the right under another item, again by drag and drop.
In the example above, the categories “Starters”, “Main dishes” and “Desserts” are submenus of the “Recipes” page.
As I said earlier, although you can create many levels of menus, stick to the basics. Imagine a submenu of submenu of submenu! Your visitors might not see the end of the tunnel.
As a general rule, if you have too many submenu levels, your menu is poorly structured.
To add a non-clickable menu item (an item containing submenus for example), add a custom link and insert the
# character in the “URL” field. Once the item is added, remove the
# to avoid damaging your SEO.
Now let’s see the process of…
Modifying menu items
At this point, your menu is almost ready, but you realize that you made a mistake. How to remove an item from a WordPress menu?
As you’ve probably noticed, each of your menu items has a little arrow on the right. Clicking on it will unfold that item to display additional information.
The “Navigation Label” field that appears before your eyes allows you to change the title of the item in your menu.
A “Remove” link is present to remove an item from your menu.
Hidden options in WordPress menus
You should know that by default, WordPress hides some menu options. This is to gain clarity and above all to prevent beginners from doing the wrong thing.
To display these famous options, click on the gear in Appearance > Customize > Menus:
By checking these boxes, new fields will appear within your menu items:
Let’s see what these options correspond to:
- Link Target: allows you to display a box to open the destination page in a new tab. In the case of an external link, checking this box will keep users on your site longer.
- Title Attribute: this option is used to display a description of the menu item when hovering over it. Its usefulness is therefore reduced and it is very little used now.
- CSS Classes: if you want to customize the appearance of a menu item with CSS, place the classes you need in this field.
- Link Relationship (XFN): if you are linking to a site and want to specify the relationship between you, you can use the XFN properties. In practice, I have never used this. Chances are you won’t need it.
- Description: some themes allow you to display a description under the menu title, but they are quite rare.
So now you know how to edit a menu with WordPress. Let’s go to the final details in…
Once you’ve added all the items you need to make up your menu, go to Appearance > Menus, and then go to the “Menu Settings” section, located below your menu items.
There are several checkboxes to choose from:
- Auto add pages: Checking this box will automatically add the pages you create to your menu. This is of little interest because your menu will not be customized. So be sure not to check this box.
- Display location: The checkboxes listed here allow you to determine where to display the menu you just created.
It is necessary to check one of these boxes for your menu to be displayed on your site.
The available menu locations will have different headings depending on your theme. You will normally find a box for the main menu (primary menu).
Once the settings are configured, click on the blue “Save Menu” button to put your new menu into use. A link to delete your menu is also present at the bottom left to delete a menu you no longer need.
Speed up your website with WP Rocket
We’ll now take a look at what’s on the second tab of the WordPress menu management page, called “Manage Locations”.
As the name suggests, this tab will give you the possibility to assign the menus you create to the locations provided by your theme.
In fact, this tab allows you to see where your menus are displayed at a glance. And for a live view, click the “Manage with Live Preview” button at the top of the tab.
To assign or edit the menu for a location, use the drop-down menu. If you need to create a new menu, click the “Use new menu” button.
The list of menus in this tab will be different depending on your theme.
A click on “Edit” will take you to the associated menu editing page.
Once all the menus are in their place, don’t forget to click on “Save Changes”.
Placing menus in other locations on your WordPress site
In addition to the locations provided by your theme, you can insert menus in the sidebar of your site (if your theme provides one) and in the footer via the “Navigation Menu” widget.
To do this, create a new menu and do not assign a location to it.
Then go to Appearance > Widgets and add a “Navigation Menu” widget to the widget area of your choice.
Write a title if you wish and then select the menu to be displayed in the widget. Then click on “Save” to activate this new menu.
Of course, this is optional. Chances are that the default locations of your theme are more than enough.
Whatever site you design with WordPress, you will inevitably need one or more menus to make your content accessible to your visitors.
WordPress has a relatively simple interface for creating menus, but you mustn’t fall into certain traps (menu that is too long, useless elements, etc.).
To go further in the creation and design of your site, take a look at our guide to create a professional WordPress website, step by step.
How many WordPress menus do you have on your site? Where on your site do you place them?
Tell us all about it in the comments below this post.
Receive the next posts for free and access exclusive resources. More than 40,000 people have done it, why not you?