[As usual, WP changed things again… Post updated April 11, 2013.]
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).
❇ Display a top menu on themes that don’t display one by default.
❇ Display more than one menu, on themes that support this option.
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.
Preliminary step
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 on top of all the other pages; you select it and click Add to Menu, just as you would do with a regular page.
Note: if you’re using the default blog front (latest posts), the item will actually be labelled “Home”; if you’ve set the blog front to display a static page instead, the label of the item will be the title of that page. In both cases you can rename the item – see “e” below.
b. Submenu (dropdown, if in the header)
After you add the items and drag them below the item they should drop down from, drag them horizontally, as shown in the 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 in Appearance > Menus) 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.
wordpress tips 
I finally realized that the categories used to group several related posts!
Great post!
Panos, I send you my most cordial a Merry Christmas and Happy New Year.
Franco.
Posted by portaleazzurro | December 19, 2011, 13:44Oh? Wouldn’t expect you hadn’t realized that! I just noticed that all your posts are “Uncategorized”, which is pointless.
All the best to you too – but before that I’ll beg you once more to lighten your main page: you’ve got too many posts and too many embedded objects. I had to force quit my browser to get out; for visitors with a slow connection the browser may time out or crash. You should try to cut down on widgets, but more importantly set the number of posts per page to only a few (in Settings > Reading) and use the read-more tag to truncate the posts.
Posted by Panos | December 19, 2011, 18:12Just wanted to say thanks for your help in fixing my home page.
Posted by Tilly Bud | December 20, 2011, 13:02You’re welcome, but see my reply here:
http://en.forums.wordpress.com/topic/widget-areas-not-displaying-properly?replies=11#post-773804
Posted by Panos | December 20, 2011, 15:56Wow !
…actually I also had trouble loading the page, and some widgets could not be opened.
I did as you advised me and I noticed a great improvement! (Can you prove yourself if it is faster?)
As regards the categories I have never used because I use the pages. But now I realize that serve to categorize posts.Thanks.
Greetings.
Posted by portaleazzurro | December 20, 2011, 22:51Finally a clear and complete information!
Wow, thanks a lot. You are my guru :D
Kiss kiss ♥ Joyeuses Fêtes!
Posted by lilmaouz | December 21, 2011, 05:14@Franco: Yes, a lot faster. The only problem is the weather widget that appears top right of the browser window, in front of your actual content. Is that intentional?
@Lilmaouz: You understand that the post (especially the first section) is the result of countless questions in the forum. Thanks and happy holidays!
Posted by Panos | December 21, 2011, 20:26I’ve got it all sussed out …now
lol
Posted by lilmaouz | December 21, 2011, 21:33no, a static page is not dated and it cannot be categorized nor tagged! ????
Ha! not really a surprise, as that one made you famous—the custom menus are really well done on WordPress.com and they were long longed for.
Nice post, and it will surly be useful for many…
t
Posted by Tess | December 22, 2011, 01:23Hey don’t spoil it! I know that the first passage isn’t 100% accurate, but I have purposefully written it the way I did – for users who don’t understand what static pages are and ask the posts-on-pages question!
(But because I don’t like being inaccurate, I at least took care to link to my posts-on-pages post, where I explain that static pages are “similar to posts, only outside the chronological structure of the blog”. And if you want us to go nitpicking: a) in some themes pages are dated, b) in some themes stickies don’t display the date, c) pages are categorized, you just don’t see the category.)
As for the second passage, I don’t know if that one made me famous (am I famous?), but it certainly used to be the link I pasted most often in the forum and the link that drove the most traffic from the forum to my blog, proving that custom menus were a sorely needed feature and one of the best features that WP has ever introduced.
Posted by Panos | December 22, 2011, 04:36LOL:
quoting back to ya:
Of course you are famous: even I know you, and I don’t know anyone!
I agree completely that custom menus were needed. And one of the best features wp.com has introduced.
Posted by Tess | December 22, 2011, 11:09hmm…
” c) pages are categorized, you just don’t see the category ”
really! how do I not know this? which themes?
Posted by Tess | December 22, 2011, 11:35Strike c out: the sourcecode of static pages used to include the category in some themes but apparently they changed that. Category naturally was the one you had set as your default post category.
Posted by Panos | December 22, 2011, 15:36Happy Xmas Panos, Thanks very much for all your help…I expect I will be back for more …all being well!
Julia
Posted by Anonymous | December 23, 2011, 15:16Julia M., I suppose? Happy holidays!
Posted by Panos | December 23, 2011, 19:16This is incredibly helpful. Thank you!
Posted by nfreiling | January 10, 2012, 17:46You’re welcome! (Helpful if a bit unorthodox in its order: I put the “Common mistakes and misconceptions” section first, as these are the issues we deal with more frequently in the forum.)
Posted by Panos | January 10, 2012, 20:02Thanks for putting together such a fantastic wealth of information here.
I’m also using The Morning After on this site
How did you change the SUBSCRIBE TO RSS to read COMMENT GUIDELINES?
Posted by Simon | January 21, 2012, 13:18The RSS subscription link can be deactivated in Appearance > Theme Options > General: Feed link. For more on the theme see here:
https://wpbtips.wordpress.com/2011/06/02/the-morning-after/
I put the Guidelines link in that place by using appropriate coding in a Text widget in the primary sidebar.The basis of this coding is position:abosolute, a property and value that allows you to place something at a specific point (specifying distance from top or bottom and left or right). Works well in some themes only, and TMA is one of them. You can see the code here:
http://textsnip.com/3f288d
Of course I could have included that page in the custom menu. The reason I used the trick is that I wanted it in red.
Posted by Panos | January 21, 2012, 16:33Thanks for showing me what looks to be the infinitely tweakable world of position:absolute
I agreed with your point about the aesthetics of Header Links and the Search Bar so I’ve reinstated them.
Could you please explain what extra code I’ll need to raise the text so it lines up with my new icon as it does with default ones (Contact etc)
I already tried vertical-align to no avail.
I’ve also tried to figure out the CSS using rtclk Inspect element, but it just says inherited, how do I know what font to use
http://inemptybuildings.wordpress.com/
Thanks in advance.
Posted by Simon | January 23, 2012, 17:54You’re welcome!
To align the little image with the text, you need to add a negative bottom margin to it. But you’ll never be able to precisely align the whole thing with the other links in a way that will be exactly the same in all browsers. Better go to Appearance > Theme Options > Header Links and delete all three URLs from those fields, and paste this in your widget:
<div style="top:80px;right:16px;position:absolute;">
<ul id="menu" class="clear-fix">
<li><span class="home"><a href="BLOG URL HERE">Home</a></span></li>
<li><span class="about"><a href="PAGE URL HERE">About</a></span></li>
<li><span class="contact"><a href="PAGE URL HERE">Contact</a></span></li>
<li><img style="margin:0 6px -4px 0;" src="IMAGE URL HERE"><a style="color:#c00;" href="PAGE URL HERE" target="_blank">Open call for uses</a></li>
</ul>
</div>
By the way, this “world” is the world that WP hates it when I show it:
https://wpbtips.wordpress.com/2011/10/17/positions-absolute-relative-and-others/
Posted by Panos | January 23, 2012, 19:16Wow Panos that’s even better!
Positions relative and others was the first post of yours I read. It reminded me of MM’s remark that the user support for Drupal is better than WP (or words to that effect) its somewhere in the first half of this video: http://wordpress.tv/2011/10/16/drupal-wp/
Thank you!
Posted by Simon | January 24, 2012, 01:17You’re welcome, but at the moment I don’t understand what you’ve done: instead of my code you have inserted the “Open call” part four times.
Positions relative and others was the first post of mine you read? How come?
I’d rather not write my opinion about MM. But I’ll underline one salient point in the video you linked to, that contrasts with a reply I quote in the post I linked to (“the end goal is helping people with their WordPress.com blogs”), and gives a more realistic perspective about us poor wp.com bloggers. Video, at 25:10:
“On wordpress.com we’ve got 25 million beta testers”
Posted by Panos | January 24, 2012, 05:05The four open calls were just a point of transition.
I guess i was Googling “disgruntled WP.com support victims” or words to that effect after my experience w/WP support…
25 million beta testers !
Posted by Anonymous | January 25, 2012, 13:55Ah ok, you’ve fixed it nicely now!
Could you elaborate on your experience with WP support?
Posted by Panos | January 25, 2012, 23:55This was incredibly helpful. Thanks. :)
Posted by Mou | February 15, 2012, 04:43You’re welcome! This post (like many others of mine) is a direct result of my experience in the wordpress.com forum, so users usually find it more helpful than the equivalent Support doc.
Posted by Panos | February 15, 2012, 07:19thank you very much, i now have an orderly list of posts on the sidebar, with a heading and subheadings! your advice was very helpful.
Posted by glensbirdonawire | March 3, 2012, 01:31one more follow up question.hope this is ok….having set up my menu with its sub headings [am very pleased with it] i think I should have left off the long list of posts under one of them and just had it with the title and then able to be clicked on to bring up all the posts under it..can i change it simply, without losing any posts?
thanks…….glen
Posted by glensbirdonawire | March 3, 2012, 02:33You’re welcome.
Yes of course you can change it: you go to Appearance > Menus, open each item you don’t want, delete it, click Save Menu when you’re done with all the items you wish to remove. You’ll only “lose” the items from the menu, not from your blog. A menu is just a set of links: deleting a menu item doesn’t delete the post itself, it only deletes the link to it from that menu.
Or you can leave the menu as it is (because you might change your mind again), create a new menu, and select the new menu from the Theme Locations pulldown.
Posted by Panos | March 3, 2012, 08:19you are a genius! have mentioned your “name ” in my blog hope that is ok……..I know where to come when i am having difficulties, , much appreciated…….
Posted by glensbirdonawire | March 3, 2012, 09:16RE: “Tabs for pages but no page title on the actual pages”
I followed your instructions above, and now the actual page reads, “ ” in very large, very dark font….
Help…
:-(
Posted by pacificchristianschool | March 20, 2012, 23:33You probably omitted the semicolon after the letters.
Posted by Panos | March 20, 2012, 23:39You know, I looked at that twice, trying to determine if it was red and a part of what to paste, or not.
I’ve just tried adding the ; and now it too appears in print.
So I assume I need to restart the process from the get go and will give that a try.
Many thanks, Panos.
Posted by pacificchristianschool | March 21, 2012, 00:12