A. Common mistakes and misconceptions
❇ 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 select it from the pulldown in the Theme Locations module and click the Save button of that module.
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, so the little notice inside the module that says “Select which menu you would like to use” can easily go unnoticed.
❇ 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. 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 in the very few themes that display two 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 top menus, replace “simply” with “primarily”.
❇ 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 assign the right category to each post, create a custom menu, add the categories to the menu, save the menu, and activate it by selecting it from the pulldown in the Theme Locations module.
For more on this see my post Posts on Pages.
B. Why custom menus
The regular top menu of a theme automatically displays links to
- all your 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.
❇ 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 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 in 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).
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 the plus sign to add a 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’re not seeing an item you need, click View All or Search. 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 Custom Links module. Paste the URL, type the desired name in the Label field, 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.
4. If you want the menu to appear in your header, select it from the pulldown in the Theme Locations module and click Save. If you want it 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
❇ Home link
Clicking Select All in the Pages module will reveal a ready-to-use “Home” item.
❇ 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.
❇ Submenu (dropdown, if in the header)
Drag items horizontally, as shown in this screenshot.
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.
❇ Submenu with non-linking top level tab
A tab that’s just a heading for a submenu, not a link, is created in the Custom 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.
❇ 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”.
❇ Tabs for 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.
❇ 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.
❇ Reactivate custom top menu
When you change theme, the custom menu you had selected may get deactivated. Select it again from the Theme Locations pulldown and click Save.
❇ Revert to regular top menu
Select the blank option from the Theme Locations pulldown, click Save.
❇ Display no top menu at all
Click the plus sign to create a menu, type a name for it, click Create Menu, click Save Menu, select that menu from the Theme Locations pulldown, click Save.
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:
http://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:
http://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:19