A. Why custom menus
The regular top menu of a theme automatically displays links to
- all your publicly published parent pages, [*]
- in alphabetical order (unless you assign order numbers),
- with dropdowns to child pages in some themes only,
- and nothing other than that (except a built-in Home link in some themes).
The names of the links will be the actual page titles, and each link will bring up the page in the same browser window or tab (replacing the page you were on).
[*] A few themes display links to parent pages and/or post categories.
A custom top menu replaces the regular one and displays what you tell it to display; it allows you to:
❇ Change the page order more easily.
❇ Display links to some instead of all your parent pages.
❇ Give the links names other than the actual page titles.
❇ Create submenus (dropdowns) without having to turn your pages into child pages.
❇ Create submenus if the regular menu of the theme doesn’t support them.
❇ Add a Home link, or remove the built-in Home link, and/or rename it.
❇ Display other links in addition to or instead of static pages (to categories, tags, posts as well as any valid URL).
❇ Make any of these links open in a new browser window/tab when clicked.
❇ Display no top menu at all (when the theme displays your pages in the header area but you want them in the sidebar instead).
You can also display such ‘irregular’ sets of links in your sidebar or other widget area, by adding Custom Menu widgets. (Only difference: submenus will show up as indented lists instead of dropdowns.)
So, custom menus are a great feature, especially because they can include links to your categories or to external webpages. To do that before the feature was implemented, you could only use the workaround shown in my post Page tabs as extra links (and only on some themes). It’s no coincidence that, a year and a half after the introduction of custom menus, this post continues to be my most popular one by far (as of December 2011: around 50,000 visits as opposed to around 31,000 visits for my next most popular post).
B. Common mistakes, misconceptions and other complaints
1. I created a custom menu but it’s not showing up
A custom menu isn’t automatically activated once you create and save it (reasons: a, it can show up in at least two different places, b, you can create and save several menus). If you want your custom menu to appear in the header area, you must check the option “Primary Menu” next to “Theme Locations” in the Menu module and click Save Menu (or click Manage Locations, select the menu from the pulldown, click Save Changes).
Inexperienced users often miss this last but crucial step – perhaps because creating menus seems too complicated at first, or because they don’t read the Support doc on menus carefully (or at all), or because they don’t understand that doc. But they wouldn’t have to study any doc if WP had chosen a more intuitive label for the module: “Theme Locations” doesn’t mean anything to the beginning user, and the little notice that says “Select which menu you would like to use” in “Manage Locations” can easily go unnoticed.
If you want your custom menu to appear in the sidebar (or other widget area) instead of the header, see section C below, step 4b.
2. I want to add several menus but my theme says it supports only one
First, a menu is a group of tabs, not a single tab. A menu can be vertical or horizontal. The whole group of tabs in the header area is the top menu or top navigation menu (usually horizontal); each tab is a menu item.
Users who confuse menus with menu items will sometimes try to create several custom menus when they only need to create one.
Second, some themes support top menus and some don’t – see list in my post Header tabs. Of all the themes that support the feature, most display one top menu, and very few display two or three. You can create and save as many custom menus as you like, but only one of them can be activated as your top menu (except on the very few themes that display two or three top menus); the rest can be kept as potential alternatives, or they can be added to your sidebar via Custom Menu widgets.
So: “supports 1 menu” doesn’t mean one tab, it means one set of tabs; and it means one set in the header area at a time.
(And this is the other reason why “Theme Locations” is an unfortunate label: in this module you simply [*] select which menu your theme will display in the header area, not where it will display it.)
[*] For the very few themes that support two or three “theme locations”, replace “simply” with “primarily”.
3. I want to add posts to my pages
You cannot literally add posts to a static page (because a static page is just like a single post). What users really mean when they ask this question is that they want to make the top menu tabs link to groups of related posts instead of static pages. But since the regular top menu of a theme displays links to static pages (the ones you create in Pages > Add New, or edit in Pages > All Pages), they think that they need to create and somehow manipulate such pages.
By definition, a group of related posts is a post category. So, to make your top menu tabs link to groups of related posts, you don’t create pages: you assign the right category to each post, create a custom menu, add the categories to the menu, etc (see section C).
For more on this see my post Posts on Pages.
4. I published a new static page but it won’t show up in the top menu
The whole point of custom menus is that they display only what you tell them to display (and if you don’t edit your menu often, you may have even forgotten that you’re using one). You need to go to Appearance > Menus, click the Pages module to open it, select the new page, click Add to Menu, drag the newly added page vertically to change its order, if necessary, and click Save Menu.
If you wish to prevent this from happening again, you can check the option “Automatically add new top-level pages to this menu”.
5. I created a custom menu and my previous menu items disappeared
A custom menu doesn’t add items to the regular menu of the theme, it replaces the regular menu. So if you want to add a new item via a custom menu (say, a category) without removing the rest, you don’t add only that item, you add that item plus all the other items that the regular menu displayed (that is, your parent pages, possibly a Home link as well).
6. I changed theme and my custom menu disappeared
When you switch to a different theme, the custom menu you had selected may get deactivated. Go to Appearance > Menus, click Manage Locations, select the menu again from the pulldown, click Save Changes. (Assuming of course that you didn’t switch to a theme with no top menu.)
C. How to
Custom menus are created (and edited) in Appearance > Menus.
Click Screen Options (top right) and make sure Theme Locations, Custom Links, Posts, Pages, Categories and Tags are checked. (If you are an experienced user you can of course enable only the modules you need and disable the rest.)
Simple menu (with top level items only – no submenus)
1. Click “create a new menu”, type a name for it, click Create Menu.
2a. If you need tabs that link to static pages and/or post categories and/or post tags and/or posts, all the items are already there in the respective modules. If you click one of these modules to open it, and you don’t see an item you need, click View All or Search. (Note: a static page or a post won’t show up if it’s not published and public.) Select by clicking the rectangles or the item titles. If you want to add all the items of a module to your menu, click Select All. After selecting the items you need, click Add to Menu.
2b. If you need tabs that link to any other valid and allowed URL, you create them in the Links module. Click the module to open it, paste the URL, type the desired name in the Link Text field, click Add to Menu.
2c. You can also create a link to all the posts of a specific post format (if the theme supports alternative post formats). Click the Format module to open it, select the desired format (click View All if you don’t see it), click Add to Menu.
3. Once all the items you need have been added to the menu, drag them vertically to change their order, if necessary, then click Save Menu.
4a. If you want the menu to appear in your header, check the option “Primary Menu” [*] next to “Theme Locations”, click Save Menu. (Or click Manage Locations, select the menu from the pulldown, click Save Changes).
[*] Or other similar option, in case the theme supports more than one menu areas.
4b. If you want the menu to appear in your sidebar or other widget area, go to Appearance > Widgets, add a Custom Menu widget, select the menu from the widget pulldown, type a title, click Save.
Other options, special cases and tricks
a. Home link
Clicking View All in the Pages module will reveal a ready-to-use “Home” item; you select it and click Add to Menu, just as you would do with a regular page.
Note: This item displays two names in the module. If you’re using the regular blog homepage (latest posts), the item will read “Home:Home”; if you’re using a static page as your homepage, the second name will be the title of that static page. In both cases only “Home” will show up in the actual menu.
If you wish to turn the home link to something other than “Home”, see “e” below.
b. Submenu (dropdown, if in the header)
Drag items horizontally, as shown in this screenshot, then click Save Menu.
Note: if you use a custom menu to display subpages to a page or subcategories to a category, those pages/categories don’t have to be actual child pages/categories.
c. Submenu with non-linking top level tab
A tab that’s just a heading for a submenu, not a link, is created in the Links module: type anything after “http://”, type the name in the Label field, click Add to Menu; once it’s added to the menu, click the arrow to open it, delete everything in the URL field, click Save Menu.
Note: In some theme this produces a differently looking tab; in that case replace the content of the URL field with a # instead of deleting everything.
d. Item that opens in a new browser window/tab
Normally not reasonable for in-site links but reasonable for off-site links. Click Screen Options (top right) and check Link Target. After you add an item to the menu and click its arrow to open it, you’ll see the option “Open link in a new window/tab”. Check it, then click Save Menu.
e. Menu tab not identical to actual title of page/category/tag/post
After the item has been added to the menu, click its arrow to open it, type new name in the Navigation Label field, then click Save Menu.
f. Tabs for static pages but no page titles on the actual pages
After you add the pages to the menu, click their arrows to open them, type an additional character in the Navigation Label, click Save Menu.
Go to Pages > All Pages, hover under each page name, click Quick Edit, replace title with (HTML for a space), click Update.
Back to Appearance > Menus: delete the additional character from the Navigation Labels, click Save Menu.
g. Tabs with hover-over text
Useful only if a tab isn’t self-explanatory. After you add the item to the menu, click its arrow to open it, type explanatory text in the Title Attribute field, then click Save Menu.
h. Revert to the regular top menu of the theme
Go to Appearance > Menus, click Manage Locations, select the option “– Select a Menu –” from the pulldown, click Save Changes.
i. Display no top menu at all
Click “create a new menu”, type a name for it, click Create Menu, don’t add anything to it, click the option “Primary Menu” next to “Theme locations”, click Save Menu.