Important!Four years ago, I wrote a tutorial about using custom menus in WordPress. Things have moved on in WordPress, so rather than update the old post, I decided to rewrite it.
In many themes, a “default menu” of your pages will show up somewhere around the top of your website. Depending on the menu’s functions, you may or may not have any control over how these pages appear and parent pages may not show child pages as a drop-down.
A custom menu is just that: a menu that allows you to include any combination of the following:
- Custom links
- Post Tags
There are four general steps to using a Custom Menu:
- Create it
- Add items to it
- Arrange the items however you like
- Put it someplace
To make things more clear, I’ve used screen shots from this from the TwentyFifteen theme to demonstrate the steps involved.
To Create a Custom Menu:
- In the Dashboard, click on “Appearance” and then click on “Menus”
- On the right-hand side, There is an input box for the menu name. Enter a name and click the “Create Menu” button. (Don’t worry if you can’t think of a good one. You can always change it later.)
That’s it! You’ve now created your first custom menu. Of course, it doesn’t contain any items. We’ll do that next.
Add Items to a Custom Menu
On the left-hand side of the Custom Menu area, you should see a series of boxes that look like this:
If you don’t, click on the “Screen Options” button in the upper right-hand corner:
Now, go back to the first set of boxes mentioned in this section. These are where we will add items to our custom menu.
Adding Pages and Posts
The first option allows us to add pages to our custom menu. In general, it is open by default, although I closed it by clicking on the triangle in the above screenshot.
Additionally, “Pages” and “Posts” both default to showing the most recently published items:
If you don’t see the item that you want to add, click on “View All”. (If you have a lot of pages and/or posts, you can also click on “Search” to find one in particular.)
Tick the boxes of the pages you want to include:
and click the “Add to Menu” button. After a moment, you should see these items listed in your menu to the right:
Use the same exact procedure for adding posts to your custom menu:
Our menu now looks like this:
Adding Custom Links
If you need to add a link to a particular page on your blog that isn’t actually a page (such as the home page), or to a page outside your blog, you can use the “Custom Link” option to do just that:
After you’ve specified the URL (don’t forget the “http://” part) and the Link Text (which is what readers will see in the custom menu), click on the “Add to Menu” button.
Note: You can add as many custom links as you want, but unlike Pages and Posts, you need to add them one at a time.
Adding Category and Tag Archives
WordPress does a neat thing: when you create a category or tag, it also creates an archive page that lists all the posts that are contained within that category (in the case of categories) or that contain that tag (in the case of tags). You can add a link to those category and tag archives in a custom menu:
Similar to the options for posts and pages, the categories and tags option default to “Most Used”. You can click on “View All” to see all the categories or tags, or click on “Search” to find a particular one.
Again, once you finish, click on “Add to Menu”.
Adding Post Formats
The last item in the box on the left is “Format”. WordPress supports nine different post formats by default:
Not all themes support all these posts formats, however. If your theme does, and you use them, you can use this option to link to an archive of the posts that have that particular format.
As an example, I created a single post with a “Quote” post format:
Arranging Items in a Custom Menu
Once we’ve done all the above steps, whatever items we’ve added will now appear on the right side of our Custom Menu screen, in the order we’ve added them. Here’s a snapshot of the menu I’ve been creating as an example:
Each grey box that represents a custom menu item that you can drag up and down to change the order in which they appear in your custom menu. If your theme supports a drop-down custom menu, these items will all appear in a single drop down item, or as a simple list if your theme doesn’t support a drop-down custom menu:
However, you may find it useful to make your menu more compact by making some items children (or even grandchildren) of other items. You can achieve this by draggin individual items to the right. I’ve done that here:
You can see that “Contact” is now a child of “About”, “House of Seven Gables” is a child of “The Wind in the Willows”, and that “Pines” is a child of “Google” and a grandchild of “The Wind in the Willows”. It looks like this on the website:
The upside down carets at the right of a menu item indicates that clicking on that caret will reveal additional items. (Again, this is in the TwentyFifteen theme. Different themes will display child and grandchild items differently.)
Putting Your Custom Menu Someplace
I said earlier that you can only use a custom menu if your theme supports it. The good news is that most modern WordPress themes do support custom menus. How many they support and where they place theme vary quite widely from theme to theme, however.
At the bottom of your custom menu, you’ll see something like this:
The “Theme locations” option tell you where your theme supports a custom menu. In this case, the TwentyFifteen theme supports two custom menus. Click the “Primary Menu” option and then the “Save Menu” option to have TwentyFifteen display your custom menu as its primary menu on the left side.
Many themes support three or more custom menu locations. Additionally, you can have as many custom menus as you want, although you can’t necessarily use them all at once. You may find it useful, for example, to create many custom menus while designing your site, and then play around with where to put them. To do this, click on the “Manage Locations” tab:
This feature lists every location that your theme supports a custom menu. (I’ve switched themes to give you a better idea of this, since TwentyFifteen only supports two custom menu areas.) You can assign a menu to each location from the dropdown:
or click “Use new menu” to create a new custom menu. (Be sure to click on the “Save Changes” button when you’re finished.)
Where Else Can You Use a Custom Menu?
You can also use a custom menu in any widgetized area (which are, typically, sidebars). Navigate to the “Widgets” pane and you’ll see this:
Click on it, and it will reveal a drop-down with all the areas in your theme that you can add a widget:
Select the area you’d like a custom menu to appear (I’ve chosen the “Secondary Widget Area”) and click the “Add Widget” button. You can now select which custom menu you want to appear in this area, and even give it a custom title:
This is especially useful if there is a group of posts or pages that you want to highlight.
Creating a Menu Item That Isn’t a Link
A common issue with custom menus is how to create a menu element that isn’t linked to anything. I’ve actually written about that here.
Using the Theme Customizer
For better or for worse, the powers that be at WordPress have decided that most customization options should be handled through the Theme Customizer. (There has been much gnashing of teeth over this decision, but I’m starting to think it’s a good one—unless you have a small monitor.) In fact, if you look at the first image in this post, you’ll notice an option to “Manage in Customizer”.
For the time being, Custom Menus in the Theme Customizer work pretty much the way I’ve outlined above. You can perform all the functions I’ve outlined above, but instead, you can see your results live. It’s pretty nifty actually, and reduces the learning curve for WordPress quite a bit.
Custom menus are a powerful tool for customizing your WordPress site. If your theme doesn’t support custom menus, it’s time to find one that does. And once you have a theme that supports custom menus, be sure to use them.
Questions? Thoughts? Feel free to comment below.