Custom Menus Arrive at WordPress.com

For those of you that are too busy blogging (or too busy with life) to be bothered with WordPress announcements, sit up and pay attention: The Custom Menu feature has arrived at WordPress.com.

This has been something I have wanted for a very long time, and all that waiting has finally paid off. I’ve been using drop down navigation in my web designs since the early 2000′s and it was quite frustrating to not have that ability built right into WordPress. When WordPress was originally introduced and used pretty much exclusively as a blogging platform, there was little need for complex navigation. However as the web moved forward, and WordPress continued to add new features, people started to look at WordPress as more than just a blogging platform. Because of its ease of use, and continuous development – not to mention being Open Source and free – people started wanting to use it more as a content management platform and for general websites (with a little blogging on the side).

For those with self-hosted WordPress blogs, there has been a good number of themes with drop down navigation, and if you had a little knowledge, there were several menu system scripts that you could incorporate into the themes you were using. At WordPress.COM though, we can’t do that so we had to pace back and forth waiting for staff to bring it to us.

Custom Menus with Top Navigation

Currently not all WordPress.COM themes with top navigation support custom menus, but all widget-ready themes (all but Monotone) support custom menus via the custom menu widget. Say goodbye to the venerable old pages widget. Currently the number of themes that support custom menus in the top navigation is limited, but the list is growing. At the time I’m writing this post, the following themes support top navigation custom menus: Twenty Ten, Structure, Vostok, Bueno, Enterprise, Notepad, Paperpunch, MistyLook, Under the Influence, Vigilance, Greyzed, Wu Wei, Blix, Cutline, Freshy, Contempt, Ambiru, Digg3 [Update: Koi and Modularity Lite added]. You can check the WordPress custom menu support page from time to time to watch the progress.

Since WordPress now has the Custom Menu support page up and running (link above), I’m not going to cover the general operation. It will get you started quickly.

Custom Menu Possibilities

So, what can you do with this new feature? A considerable amount actually. For one thing, we used to have to rely on a “trick” to be able to have a tab in the top navigation go to anything other than internal static pages, but the trick did not work in all themes, and in some themes, it worked, but the tab would be misaligned or distorted. With the new custom menu feature, you can easily add tabs that link to external sites such as your own website or perhaps to an off-site forum that you have created.

Many people would like to be able to link to some or all of their categories from the top navigation tabs. You can do that now. You can even create a “Categories” tab and then put all your categories underneath that tab and they will appear under that tab as a dropdown menu. All you do is create a static page called categories and then add the categories as children under that static page. The same goes for tags. Do you have some particularly popular or important posts you would like to have in the top navigation? You can do that too. You can mix and match as well and have external links, internal static pages, categories, tags and popular posts in the top navigation together. At right (click for larger view), you see all the available sections (collaped). If you go to your custom menu page and don’t see all of these, and want to include some of those items, then click on the “screen options” tab at the top right of the window and select them. You can also deselect any that you are not intending to use as well to keep things less cluttered, or you can click on the right end of the title bar to collapse them as in the above image.

Arranging menus in the order you wanted them used to be somewhat of a pain as well. You had to set the “order” in the attributes section of the page editor to get them in order. If you later wanted to change that order, you had to edit the pages and change the order number. Now, you order pages from within the custom menu section of the dashboard with drag and drop ease. Want to make a page a child of another page so it appears on a dropdown from the parent? Simply drag the child under the parent and a little to the right and it becomes a child an shows on the drop down.

Custom Menu Widget

For those themes that do not have top navigation, or for those that do not yet support custom menus on the top navigation, WordPress has not forgotten you. The custom menu widget can be used and offers all the same basic features and operation as with top navigation. And remember, we can all use multiple custom menu widgets, so you could use one for tags, and one for categories, and one to highlight important posts, and one for… well, you get the idea.

A word of warning though: Limit the custom menu widget to about three sub-levels because each level expands to the right, and you don’t want your visitors to have to scroll horizontally just to get to a fourth or fifth level. I always try to limit things to two or three levels if possible.

Using Custom Menu Widget and Custom Top Navigation Menu

And don’t think that you have to limit yourself to using one or the other. Why not create your own custom categories widget that will have drop downs for subcategories and keep the top navigation for pages and other things? At right is a screen cap of the sample menu I created above showing what will appear in the custom menu widget and how the child categories will expand out. Now granted, it isn’t the most aesthetically pleasing implementation I’ve seen, but if you find this issue with your custom menu widget, just let staff know so that they can give it some lovin’. Hopefully they will give them some lovin’, this looks a little lame to tell the truth. Click on the image for a larger view to see what I’m sayin’.

Perhaps you feel your categories are the most important and need to be in the top navigation, which is leaving precious little room for your pages. Not a problem, create a Custom Menu with your categories and assign it to the top navigation and then create one for your pages and assign that to the custom menu widget.

I’ve only covered a few of the possible uses of the custom menu feature here, but I think you can see that it has a lot of potential uses. Is the implementation of this feature perfect? No, all you have to do is look at the expanded drop down on the menu widget above to see that, but that is simply a matter of a little Theme Team tweaking (say that three times fast) of the CSS to get them looking better. It all just takes a little time and from what the theme team has been doing since they first showed up on scene, I think they are up to it.

47 thoughts on “Custom Menus Arrive at WordPress.com

  1. Pingback: Create a WordPress Website Step By Step | one cool site

  2. hi,
    “All you do is create a static page called categories and then add the categories as children under that static page.”
    i create a static page called “categories” and also create 2 categories called “music” & “photography” using custom menu i place both the categories under the “categories” page as a child of this page ,they appear absolutely fine in navigation bar but when i click on “categories” tab as its a blank page it shows nothing “You are browsing the Blog for categories.” shows only this ,but i want to show my all categories under the “categories page”.

  3. Pingback: WordPress.com custom menu walk-through « one cool site blogging tips

  4. I cannot get my custom menus to drag and re-order.. it worked when I first installed the template when i did not really know what i was doing.. but I then had to re-install andit never worked . I cannot get parent child to work in the top line naviagtion either – they show up in the site map at the bottom and they are all labelled correctly under parent etc . I have been going round in circles now and reading 8504-49 blogs and I surrender … I am sure it is something silly , but i HAVE had it with trying to work it out and am out of ideas and patience … help would be wonderful! I have read all of above over and over ..

  5. Pingback: Blogger Sucks: WordPress Rocks! « onecoolsitebloggingtips

  6. Pingback: Better Blogging at WordPress.com: Pages and Posts « onecoolsitebloggingtips

  7. Is it possible to add a blank space between two Custom Menu items? I would like the pages listed in my Menu to be separated into three groups with a blank space between the groups. Thanks.

  8. This was (super) helpful. I was actually able to put my categories in parent>child order below my header. However, I am using the Vigilance theme and an wondering how to get it to show my full post text when you click on a category. Currently, it only shows the title and date.

    • This is normal behavior for the Vigilance theme, and for many if not most of the other themes. The reader has to click twice to get the full post and I don’t consider this to be a big deal but some do.

      “In the majority of themes, posts in category or monthly archive pages show up just as they do in the main posts page. But in some themes only the beginnings of posts are shown, and in a few themes you only get titles or thumbnails.” See here for lists of which posts do and do not siplay full entries without a second click. > http://wpbtips.wordpress.com/2009/03/25/full-posts-in-archive-pages/

  9. I just downloaded the new WP 3.0 with Menus. But I cant figure out how to create a menu without using an existing page, post, or url. Does anyone know how to create a Navigation top level without making it clickable?

    I posted same question in wp forums but no response yet. Thanks for any help in advance!

    • Robert, I’m not sure what you are asking. If the menu items are not clickable, then they have no use.

      Could you explain what exactly you are wanting to do?

  10. Pingback: Should You Upgrade to WP 3.0.1 and Twenty Ten 1.1 | Blogging With Success

  11. If I don’t want to use the menus as a widget, what php code do I use to call a particular menu in my theme?

    • The title of this post is: Custom Menus Arrive at WordPress.com
      Below is a link to support documentation that clarifies the differences between free blogs from and being free hosted by WordPress.com and free software installs for self hosting from WordPress.org

      WordPress.com is a hosted blog service. You do not have to download software, pay for hosting or manage a web server. WordPress.com does not permit FTP access, uploading themes or plugins. WordPress.com is a wpMU (WordPress multi-user) blogging platform. Users do not have access to the database and cannot edit the templates containing the HTML and PHP for their themes.

      WordPress.org is free software. You can install themes and plugins, run ads, and edit the database. http://support.wordpress.com/com-vs-org/

  12. Is the number of menus you can have limited? I have tried over and over in different ways to add more menus across the top… but it just doesn’t show up. When I save my menus, the ones I just added to the bottom, disappear! Please tell me that I am just making a boo boo — I need more menus!!!

    Thank you so much!

    • The answer is “yes”. You have a wordpress.ORG install. You are running the Twenty Ten Theme. When you click Dashboard > Custom Menus and check the “Theme Locations” module is this is what you find?

      “Your theme supports 1 menu. Select which menu you would like to use.”

      If you need support you must post to this forum > http://wordpress.ORG/support/

      Hope this helps.

  13. Hi Richard,

    I had spent the evening doing a major overhaul of my site; since I upgraded to the Twenty Ten theme and am making use of the custom menu. I had to undo my old system of creating static pages for a # of old posts and a static page listeing those pages. Now, I am down to 3 pages and about 29 posts.

    Thanks to the custom menu, it made revamping and organizing by categories a breeze. I had avoided categories as it wasn’t very helpful. Today, I’m glad to make good use of them. I’ve a few minor tweaks and I think it’ll be done. My tweaks involves fine tuning the background color to match image header the color of menu bar. I’ve also need to add some description to the category. Gee, what is this “Insight” category (page) about? :)

    • I’m so happy that you understand that categories and tags are index terms used by search engines to index your data and to produce it in SERPS (search engine page results). Playing hide-and-seek with search engines makes no sense.

      I’m also happy to hear that Richard’s post was helpful No doubt about it custom menus are extremely useful.

      Best wishes with your blog.

  14. nice post, thanks, very informative…
    i will visit this blog more often

    keep up the good works
    cheers

  15. Thank you so much for explaining this to us. I have played around with the custom menu, but am not satisfied with my efforts. I’ll work on it again, and this time I’ll know more about what I’m doing.

    Kathleen

  16. Personally I find drop down menu’s a bit of a pain in the bum but that’s cos my laptop is old a rubbish. If I had a new whizzy Puter then I’d probably think they were great.

  17. The above information is of great value and a very hard work had been done according to me, i appreciate it, keep it up.

  18. Pingback: Wordpress 3.0 Menus, Thesis Menus, and ‘Page Links To’ « Theme Tester

  19. I haven’t got around to upgrading my WordPress yet but after reading this post, I can’t wait to try out the custome menu in WP 3.0.

    Having some of the popular categories in the top navigation bar definitely aids users in browsing websites and reducing bounce rate.

    • Paul, the custom menu feature has taken wordpress to a whole new level and about the only limitations with it are the limitations of our imagination.

      The one thing you will have to do is make sure the theme you are using supports the custom menu feature. If it does not, then ask the theme designer to update it so that it does. If you are the adventurous type with some coding skills, you can look through the .ORG codex and find most of the information you need to add the functionality yourself.

  20. Richard, Thanks for this overview of the new custom menu feature. I’ve already used to display my 10 popular posts and to make some static pages more obvious. But you’ve given me new ideas! Plus more details on how to navigate the new feature. Excellent!

    • Sandra, thanks for the thanks, and to all, I suggest you play around with it a little. I think once you do, you will see what a fantastic addition this is.

  21. hi…
    this is my first visit here..
    nice blog my friend, so useful
    happy blogging

  22. Hello guys,
    Richard is up to his eyeballs right now but I do know he values comments highly and he will answer as soon as he can.

    Isn’t it a scream that the wordpress.ORG users have yet to twig to the fact wordpress.COM has been running on 3.0 since just before San Francisco wordcamp at the end of May?

    I’m waiting to see if wordpress.ORG bloggers backlink to this post. We wordpress.COM bloggers have had 3 weeks of experience with custom menus that they haven’t had as they just got 3.0.

    • TimeThief: Does that mean that there will be no new additional features for us WordPress.com folks when 3.0 is officially released in theory mid-June?

      I thought the visual editor was slated for the post to appear in the editor as it will look on the screen, as in 2010 Theme? And what about Asides, I thought all themes would be getting these as well? Just curious!

  23. I looked at custom menus when WP publicized them and I played around with a menu and gave up.

    So your post got me going again, and the killer thing was your line about

    dragging sub-headings along so they become child headings. From then on all was clear.

    I almost bailed when I saw the ‘warning’ in my admin panel that the theme I am using (Paperpunch) only supports one menu, but a little perseverance showed that I only need one menu in the nav bar and it shows everything I need.

    Thank you for the tutorial.

    • You’re very welcome. Once you play with it a little, the possibilities expand considerably. It will be a great thing for all those people out there that have a lot of static pages. They will now be able to organize them hierarchically and simplify their navigation considerably.

  24. For the themes which are currently not enabled for drop-down navigation menus, using menus is as same as using links widget.

    When you’re using links widget, you manage your links (internal or external URLs) through Links section in your dashboard and you show those links through a links widget on side bar. Currently, if your theme does not support drop-down navigation menu in header, you will see no difference between using Links or Menus.

    • …is as same as using links widget.

      The custom menu widget is actually much more. It is like a combination of a pages, categories, tags and links widget with hierarchical dropdown capability, and if you want, you can include a home tab as well. It is definitely a quantum leap above the standard widgets.

      You could of course build your own pages widget using a links widget especially after wordpress gave us the ability to limit the display of the widget to certain categories, but it did not do hierarchical, and that was a big drawback when trying to use it as a pages widget.

      • Richard, perhaps I’m missing something, but as of now, my understanding is, that if your theme does not support Custom Menu, you are technically not getting anything out of using Custom Menu specifically in your sidebar (sidebar is where you’d be able to use custom menu unless it is enabled it for you in your theme so you can use it at your top header as a navigational bar).

        Currently, the Links widget can be inserted into your sidebar as many times as you like. So for example, if you create five links under a category Plan A, and if you drop a Links widget into your side bar and select Plan A category from the drop-down (drop-down of Links widget), you can sort your links according to the criteria available (I believe there are sort criteria available like Ratings, Alphabetical etc). In this sense, you can sort Links however you want and you can insert internal/external URLs including even blog categories.

        So how is Custom Menu different from Links widget if your theme doesn’t support custom menu like it does for newer themes, as in, drop-down menu showing up in the header navigational bar?

        • The links widget is inflexible and was never really meant for site navigation, although it can be used that way.

          The custom menu widget will allow you to have dropdowns in the sidebar for child pages, and also lets you easily choose the order and the arrange your child pages. With the links widget you have to do it by link ID or rating – more steps in the process. The custom menu widget also allows you to mix and match as you see fit with custom links, categories and static pages and there is no need to enter links to the pages/categories as there would be with the links widget. You simply select what you want to include, from the lists, click the add button and then drag and drop them into the order you want. No need to assign child status to pages or categories, simply drag them up under the item you want them to appear under as a dropdown, and then drag them slightly to the right to make them a sub of the top level menu item. The links widget does not do dropdowns – in fact it doesn’t support sub-links at all, which can severely limit your ability to easily organize your site navigation.

          Not all themes here support the custom menus in the top navigation yet, but ALL themes here, with the exception of monotone, support the custom menus through the custom menus widget.

          The usefulness of the links widget for page navigation pales in comparison to the usefulness of custom menus. You simply have to try it for yourself to see all the capabilities you are missing using the links widget, but then again, if you are satisfied with what you have with the links widgets, then stick with that.

          Oh, and one more thing. You can use as many custom menu widgets as you like. You just create the menus and then when you insert another menu widget, just select which menu you want to display in that particular widget.

        • The custom menu widget will allow you to have dropdowns in the sidebar for child pages,

          I tested the custom-menu widget in the sidebar on 2010 theme. I do not see drop-down. They show up as list and nested list (no drop-down). The drop-down shows up only in the header bar. Hence as I mentioned previously, the custom-menu is good and handy if it is enabled for you in your theme, but it is not much different from Links widget if your theme currently does not support custom-menu.

    • WordPress.com has been running on 3.0 for quite some time actually, but the custom menus stuff was not ready when they implemented it so it showed up a little afterward. But yes, the custom menus was a 3.0 feature.

  25. I really like the custom menu. One of the positive side of using wordpress. They need to come out with things like custom menu and theme options. I can make the links in a different order and now I don’t need to use many widgets.

    • Yes, the custom menu feature can simplify a sidebar considerably, and even for those themes that don’t have top navigation, the custom menu feature can still simplify a sidebar.

Comments are closed.