WordPress creates menus for you based on your pages and categories. This menu structure is often generic and can get a little out of hand. Adding a new category will change your menu structure and this can sometimes get ugly. Sometimes you want more control over how the menu looks and works. Sometimes you have to take matters into your own hands.
WordPress allows you to create your own menus and menu structure. Using the menu editor you can create multiple menus and then assign them to specific menu locations on your website. How? I will show you.
Creating Menus Manually
WordPress has a powerful system built in for creating advanced menus. It works by drag-and-drop and is easy to set up. You can create multiple menus and choose which menus to use. How many you can display at once depends on your theme. I will use Divi in this tutorial, which will display three menus.
In your dashboard go to Appearance and select Menus.
Creating a Menu
First, give your menu a name and click Create Menu. Once you’ve done this you’ll be able to add items to the menu. On the left you have your pages, links, and categories. The categories will also display your custom post types and taxonomies.
Select Pages and click on View All.
Select every page that you want to have in your menu. If you want them all just click Select All. Next click Add to Menu.
There are several page locations in the menu structure. The first is the Primary Page location. This is the location where all of the pages line up on the left side. If I moved a page to the right by dragging it and dropping it, it will be placed in the Sub Item location. I can have multiple sub items and I can make sub items have sub items. Let’s see how this is done.
Structuring the Menu with Drag and Drop
In order to create your menu structure, drag and drop the menu items where you want them. Here is where it gets interesting. You can drop menu items as a page or as a sub page.
To make a page, drop the menu item to be in line with the items on their left side. To make the page a subpage, move the menu item to the right. You can see in this example that I’ve created a page called Sample Page. I then moved a page called Sub Page 1 into the sub item area of Sample Page 1 by dropping it under Sample Page 1 and moving it to the right.
I’ve also moved a page called Shop by dragging it to the location above a page called Testimonials. I left it as a primary page.
I came back to Sample Page 2. I dragged Sub Page 2 to the right and dropped it in the Sub Item location under Sample Page 2. I then dragged Sub Page 3 and dropped it, but this time instead of dropping it in the Sub Item area of Sample Page 2, I dropped it in the Sub Item area of Sub Page 2. This created a sub page of a sub page and allowed me to build a structure of how the pages are related.
Another way to move them is by clicking on the word Page next to the down arrow and then selecting the Move option you want.
Removing a Menu Item
Now notice that I have two pages called Home. One is the page that WordPress creates and the other is a page that I created in order to have a link to back to the home page. Since WordPress does this automatically, I can delete the one I created.
To remove it from the structure, click on the word Page on the right side on the item you want to remove. This opens the attributes of that item. Simply click on Remove.
Renaming the Navigation Labels
In this example my page’s names are Sample Page 1 and Sub Page 1. I don’t want those names to be what shows in the menu. I can change this by changing the Navigation Label. Highlight the name in the Navigation Label text box and change it to the name you want to have shown in the menu. This will not change the name of the page, but it will change the name that shows on the menu. This is a handy feature as it allows you to label your structure in a way that is easy to understand without having the rename your pages.
Handling Sub Pages
You can restructure your menu’s sub pages easily. By using drag and drop you can move entire sub blocks at once by grabbing and dragging the first item in the sub block.
Here I created a new menu and placed Sample Page 2 as a sub item of Sub Page 1. However, I decided that it should be a sub item of Resources. Instead of moving each of Sample Page 2’s sub items one at a time, I can move the entire block at once. By grabbing Sample Page 2 and dragging it I also moved Sample Page 2’s sub items, so I moved the entire sub block in one move.
You can also create a link to be used as a menu item. Simply select Links, paste in the URL, type in the text that should show on the menu, and click Add to Menu. You will have to create the links separately for each menu that you create.
Once you’ve added the link it works like any menu item, so you can move it and change its attributes.
You can also use categories as menu items. They work the same as pages, so you can choose which categories to use and drag and drop them anywhere you want them.
At the bottom of the menu structure you will see the menu settings. Here you can choose whether or not it will automatically add new pages to the menu. Keep this unselected if you want to have full control of your menu. You can also choose where the menu appears within your theme. If you don’t make a selection then the menu will not appear on your site. I’m choosing this to be the primary menu.
Don’t forget to select Save Menu before exiting this screen. If you do not, then you will end up having to do the work all over again.
Testing the Menu
You can see in this image that the menu works the way I wanted it to. If there were any issues I would go back and make the changes I wanted. One thing to notice is the name of the page hasn’t changed, but the name in the menu did change. If I wanted the name of the page to change I would have to do that on the page itself.
Using the Custom Menu Widget
You can also place your custom menus in your sidebar using a custom menu widget. Just drag the widget to your desired sidebar location and choose the menus you want to display.
The links from the menu you choose will appear vertically in your sidebar. Like most widgets, you can give it a title. You can place as many menu widgets as you want. I placed all three of my menus just to show what they look like in my sidebar. Of course you don’t have to use a menu that was made for the other three locations – you can create a menu specifically for your sidebar. It’s a great way to build a navigation structure into your sidebar.
Types of WordPress Menus
Many themes from Elegant Themes have a structure for three menus: Primary, Secondary, and Footer. Each of these menus can be specially designed to make the best use of their positioning. The placement and types of menus will vary depending on the theme you’re using. Here’s a look at the menu structure for the themes Divi and Twenty Fifteen.
The primary menu is you main form of navigation on your site. In the theme I’m using it is the menu closest to the logo. It has the largest text of your menus. It should include the basic navigation structure that your visitors will expect: a link to your home page, about, contact, blog, resources, etc. It really depends on your audience and the purpose of your site. Try to keep it simple and easy to understand.
The secondary menu has a smaller font than the primary menu. In the theme I’m using it’s above the header. It should include items that you don’t want in your primary menu but you want to be convenient for your visitors.
The footer menu of course goes in the footer of your website. I’ve chosen to keep the footer simple. I only used the most prominent links and I did not include sub menus. This keeps the footer clean and easy to use. Of course what you need here will depend on your site and your visitors, so feel free to include links and categories.
You can create as many menus as you want, but depending on what your theme will allow, you can only display a few of them at a time. The theme I am using will allow me to display three menus. In the menus screen, click on the tab Manage Locations. This tab allows you to choose where your different menus will appear. You can choose which of your menus is the primary menu, secondary menu, and the footer menu.
The Twenty Fifteen theme has two menus: the Primary Menu and a Social Links Menu.
To create the Social Links menu, I created a new menu called Social Links. I then selected Links in the left navigation panel and added the URLs and names of each social network. Next, I selected Social Links Menu and saved the menu.
This added social icons with links to the sidebar. For links it doesn’t recognize (like the fake one that I made up for Google +) it places a circular symbol with a dot inside.
A Few Quick Tips for Creating Great Menus
- Use menu names that describe to you what the menu is for.
- Create names in the structure that users will understand easily.
- Organize links is order of importance.
- Don’t use more than three layers deep in the navigation structure.
- Navigation should be intuitive, clear, and consistent.
- Use categories and sub categories for large numbers of links
WordPress does a decent job of automatically creating menus based on your pages and categories, but the larger your site gets, the messier your menus can get. Letting WordPress take control of your menu system can eventually wreak havoc on your navigation structure. Using the built in menu editor you can create effective navigation systems for your site that are clean and neat.
Your turn! Have you created custom menus for yours or your clients’ sites? Did you use the methods I described here? Do you have anything to add? I’d like to hear about it in the comments below!
Article thumbnail image by Vasya Kobelev / shutterstock.com