WordPress.com custom menu walk-through

custom class The arrival of custom menus at WordPress.com last year was very well received as many of us wanted this kind of flexibility for a long time. Creating a custom menus allows us to structure a website.

Have you ever wanted to have a different title for one of your pages than the label displayed in your site’s navigation? Ever wanted to change the order of the list of pages to an order you chose yourself? Ever wanted to be able to mix pages, categories, and random links in your navigation instead of your theme deciding for you? If you answered yes to any of these questions, you’re in luck! The new custom menus feature will do all those things. — Jane Wells in New Custom Menus Feature

Preparation

Before creating a custom menu it’s important to clearly understand the differences between pages and posts. Pages are static and sit outside the blog structure. Although there is only one dynamic page in a blog for posts and we cannot post to more than that one page, we can create the appearance that we have posted to more than one page by creating a custom menu.

We organize our posts by assigning Categories to them. When we publish a post it automatically appears on the dynamic page for posts and also on the Categories pages. (Note: There must be one published post in each Category and/or Tag in order for there to be anything to display.)

With a custom menu we can display Categories and drop-downs to sub-categories in tabs along the horizontal navigation where normally only Pages tabs are displayed. We can also include Pages and drop-downs to sub-pages, tabs and Custom links tabs in our custom menu as well.

To do that, you need to select a suitable theme: Posts on pages

Custom menu walk-through

1. Create Pages and sub-pages and assign hierarchical structure in the Page attributes module. In the case of new sub-pages pages do not assign numerical order in the Page attributes module. Remove any numerical order from the “Order” boxes on existing sub-pages in the Page attributes module.

2. Create a custom menu. On the custom menu page in the top right hand column to create a custom menu, give your custom menu a name and click “Create Menu”.

menu name 1

pages

3. Locate the Pages module in the left column, select the Pages and sub-pages you want to display and click “Add to Menu”. The Pages and sub-pages selected will appear in the module on the right hand side of the page.

Drag and drop the Parent pages you want to display and arrange them in the order you want in the right column.

Then drop and drag the sub-pages below the appropriate Parent pages, indenting them and when you have them arranged in the menu “save” the menu.

pages & subpages

4. Repeat the same process above to include Categories and sub-categories, and to create Custom links. Locate the Categories module, select the Categories you want to display and click “Add to Menu”. Arrange them in the order you want. Then add and drop and drag the sub-categories below the appropriate Categories. Add Custom links, and when you have everything arranged in the menu “save” the menu.

theme location5. Go to the “Theme Location” module at upper left on the menu page. Select your custom menu name from the pull-down labeled “Primary Menu”. Click the “save” button in that module.

Note: As static pages sit outside the blog structure it will take longer for the custom menu pages to load when we click save than it normally takes.

7. Refresh your browser so that it isn’t possibly pulling a cached page, and view your front page of your blog to see your new custom menu with parent Page tabs and drop-downs to sub-pages, Categories tabs and drop-downs to sub-pages, and Custom Links tabs.

Troubleshooting

page att Custom menu isn’t appearing! Go to the custom menu page in the dashboard Appearance > Menus and in the “Theme Location” module on the upper left select your custom menu from the pulldown and then click “save”.

My pages and/or sub-pages are in the wrong order. Check the sub-pages themselves to see if you have established a Parent page and child page “hierarchical structure” in the page attributes module. Remove if required. Also remove any “order” numbers you have assigned that may conflict with the order you are creating by dropping and dragging. Or simply change them so they are the same order as you establish in the menu. Establish consistency – problem solved.

Duplicate pages appearing! If you click the “Automatically add new top-level pages” on the custom menu page top right module then any new Pages are automatically added. If you later try to drag and drop them to create a hierarchical parent page structure in your custom menu that will happen but you will also get a duplicate page when you view your menu on the front page of your blog. The best practice is to disable that “Automatically add new top-level pages” function and then save the menu.

auto add

theme location My Pages aren’t appearing! They must be public pages – not private.
Public – The page will be visible to everyone.
Protected – The page is protected with a password you set. Only people who have the password can view a protected page.
Private – Pages are only visible to blog Editors and Administrators. Private pages are not visible in Blog Surfer, feeds, or in any search. A page can be private without being password protected.

69 thoughts on “WordPress.com custom menu walk-through

  1. Pingback: Use the Display Posts Shortcode to Effectively Feature Content | one cool site

  2. timethief,

    Just spent about two hours trying to different methods, found near the top of Google search results, of creating an image link in a WP custom menu (sometimes referred to as “adding an image to a custom menu”). Each method repeatedly failed, WordPress evidently stripping or rejecting the code.

    The easier of the methods involved only using HTML tags as one does in a text widget. Didn’t find any threads (save one unanswered query three weeks old) in WP.com forums, but did find the second method illustrated in a WordPress.org forum, here:

    http://wordpress.org/support/topic/images-in-custom-menu

    Got a tip?

  3. timethief,

    1. Love your translations page. Can you tell me how you did that, or provide a hint at least/ Did you have to direct all the language links to the translated homepage individually?

    2. I’d like an opportunity to correct my sloppy explanation in on July 17, 2012 at 10:29 pm. Already submitted a revision, but possibly rejected as duplicate?

    3. Regarding WordPress Menus again:

    The WP menus page says “Your theme supports 1 menu. Select which menu you would like to use. However, I discovered that I could have both the top menus activated, plus a different menu in the sidebar.

  4. I think the ones I called sub-categories might actually be categories, whereas their children (if they have any) are sub-categories. Have I got right, yet?

      • I just noticed, though, that the grandchildren which I had in the top menu using Pages hierarchy are absent. I guess I assumed those would still display. That looks like it’s going to be a huge job to do in menus, since many of my children have ten or twelve grandchildren (Pages), and there are great-grandchildren as well which I’ve lost in the custom top menu.

        The custom top menu is displaying only 13 of 630 pages. That’s a lot of work to replace them one by one. Is there a short cut which I’ve missed? Can you somehow transfer the complete page hierarchy as is to a custom menu? If not I probably revert to the top menu built on Pages, and forfeit a custom top menu for now.

        There hadn’t been a lot of evidence that visitors were using that drop-down list much when it contained every page on the site, but it was nice to have. I used it, if no one else.

        • ” Can you somehow transfer the complete page hierarchy as is to a custom menu?”
          Yes. Here’s my advice. Register another blog make it private, then make it a mirror blog (a duplicate) of your main blog by export and import. You can then test whatever you want to change in the mirror blog and know how it will display on the main blog. That’s what I do.

          • ” Can you somehow transfer the complete page hierarchy as is to a custom menu?”
            Yes. Here’s my advice. Register another blog make it private, then make it a mirror blog (a duplicate) of your main blog by export and import. You can then test whatever you want to change in the mirror blog and know how it will display on the main blog. That’s what I do.

            Sorry to be perhaps misusing your site as a forum for WP support issues.
            Also, sorry again, but I don’t follow you.

            I’ve previously done something like what you suggest while I was grabbing a lot of non-Youtube video codes for embedding with the (now defunct) Vodpod Firefox Extension for WordPress. But I don’t understand how a second site solves the problem of constructing a duplicate of the page hierarchy in a menu. I can place the pages in widget on this site in order to see it, and then copy it to a text editor for ease of access. However, my question is not how to do it, but whether there is an quicker method of transferring an existent page hierarchy with grand children and (I think) at least a few great grandchildren to a custom menu, 630 pages long. One would hope to be able to at least drag and drop 10 or 20 at a time.

            Your aware, of course, that the Menus page doesn’t show the page in hierarchical order. Instead they are in alphanumerical order. In the Menus Pages selector I’ve got 14 pages of 50 page titles, plus a shorter 15th page. Can you imagine selecting one of those pages at a time for inclusion in a menu, then having to search click on the page selector up to 13 times just to make the next selection? 600+ times.

          • OK. Thanks for trying. I really appreciate it and will not try to turn your site into a WP support forum again.

            The page number is high because I’ve consistently used them, rather than posts, for the great majority of my feature articles. See an explanation of why I made this choice from the beginning with this site, and have stuck with it for three years, here: Why your tag searches are failing (http://songbook1.wordpress.com/pp/introduction/notices/2011-2/24-oct-2011-tag-searches/), also linked to the sidebar image titled, “You want tags, too?”

            I want WordPress to liberate pages, allowing them (optionally) to:

            1.be date stamped
            2. have tags
            3. automatically prompt email notifications when published, and again if later significantly revised (not even post updates do the latter present).

            However, regarding things I’d like to see changed at WordPress, nothing presently compares to the Infinite Scroll invasion. I may request to do a guest post on your site regarding my chosen method for avoiding what appears to be an obvious strategical move by WordPress to force members to buy back the freedom to not be invaded by the infinite scroll/load more posts Catch-22.

            My method goes a step beyond the relevant recommendations I’ve read here on your site, and in forum threads, for disabling the feature. You don’t have to be burdened with “Load more posts” as the alternative. That is, you don’t have to use that link to get to archived pages. Each archived page has an URL, n’est-ce pas? Yes, I’m aware that the content of these pages is in flux, but the URLs remain the same.

          • I want WordPress to liberate pages, allowing them (optionally) to:

            1.be date stamped
            2. have tags
            3. automatically prompt email notifications when published, and again if later significantly revised (not even post updates do the latter present).

            I do not want that and it isn’t going to happen. Our reality is that Posts have tonnes of Google juice and Pages do not. Choosing to have create a Page based structure means you are making a choice that has ramifications, all of which are well known.

            Characteristics of pages
            Static Pages sit outside the blog structure. Static pages cannot have Categories and Tags assigned to them. Pages do not appear in our RSS feeds. Most Pages do not have date stamps in their URLs. They have very little “google juice” Other bloggers rarely if ever backlink to static Pages in their published posts. Consequently, Page structured blogs have a very difficult time:
            1. securing traffic;
            2. securing comments;
            3. securing backlinks;
            4. achieving authority in their niche;
            5. achieving Google PageRank.” from http://onecoolsitebloggingtips.com/2010/05/12/better-blogging-at-wordpress-com-pages-and-posts/

          • I said, “I can place the pages in widget on this site in order to see it.”
            I meant, “I can display the page widget in the sidebar of this site, temporarily. It’s too long to leave there permanently.”

            That’s why the drop-down list in the top menu is great. I questioning whether duplicating it in in a custom menu is worth the effort. It looks like it will take 10+ hours of drone work (and also be a chore to edit in the future) unless I’m missing some shortcut.

          • Also, I’ve been unable to export this site since January of this year. The site is too big according to the WP support of staff person who responded to my queries on the repeated failure of export attempts. That’s another large looming problem which I’ll have to address soon.

          • The site is HUGE and I did not realize that until this discussion took place. I think you will have to export and import in smaller files and in increments. I don’t think you will be able to do a single export. I’ve done several but I’ve never dealt with that much content.

  5. Ideally I’d like to keep a separate menu in the sidebar as well, for those who don’t like or don’t know how to use drop-down menus yet. But the theme I’m using only supports one menu. Any idea why the strict limitation of menus?

    • I’m not sure what you mean by that as we can have as many items in a menu as we want and we can choose to use a custom menu widget in the sidebar. Oxygen is a theme with multiple menus in different locations.

      • OMG, I just reread my last comment. Very sorry about the mixed-up grammar and numerous typos and omissions. Please delete it. Here’s a revision:
        ________________

        As you noted I’ve customized Koi and there is not another theme which can duplicate the results I want at this time. I periodically look through all of them.

        I’ve resolved the issue, but here’s what happened

        1. In order to get customized menu A into (below) the header area, I had to select it at Theme Locations.
        2. That caused both the default top menu (Is that the correct term?) and the sidebar menu A to disappear.
        3. I read your info more carefully and learned how to recreate, page by page, my site index as a menu sub-category(?). Also the homepage, which had disappeared, was replaced as a sub-category. I’d only those two to replace at the time (but have been playing with it ever since, adding and subtracting pages, posts, internal and external links, etc.).
        4. But I still wondered why the sidebar menu no longer displayed. Tonight, it suddenly dawned on me that I merely needed to change the title, since I had the same title in the top menu.

        Warm regards, Jim

  6. timethief,
    Many thanks for your efforts and detailed explanations. A huge help. I’ve been using the custom menu widget off and on for a year and a half perhaps, but had idea how much it could do. Have just today replaced a long unattractive sidebar menu with a drop-down header menu (I’m not sure what the correct term is for these), and at the same time included the homepage link and the site index in the same widget. Have now got virtually the whole site, which took me three years to build, hiding under two tabs.

    • OOps! I think I have answered these comments in reverse order and I apologize for that. Your customizations of the Koi theme are arresting. What a great job. The custom menu drop downs are so handy and help keep things organized without taking up the space that widgets do. Best wishes for happy blogging and thanks so much for letting me know what I published was helpful.

  7. YEAHHH!!! It worked!! I’m SO excited!!

    Okay, I’ve calmed down now. I read through the directions once and still wasn’t clear. I read through the comments and still felt out of my league. I finally stopped trying to visualize what you were describing and went to my dashboard to actually do it. I kept your post open in a tab and my dashboard in another and would flip back and forth after each step. And it worked! Holy Guacamole, Batman. I am so happy now (as if you couldn’t tell). This is my first time blogging or attempting a website, so the fact that I could do this on my first attempt says a lot about the clarity of your post.

    Thank you, very much.

    • veganfunandtasty
      Your custom menu is perfect. The Recipe Categories drop-downs two levels deeper than the Parent category are in place – good work. I love it when I get feedback like this. Thanks so much for making the time to comment. I appreciate it. Best wishes for happy blogging!

  8. Thanks for the valuable information, I think its the best out of the google page 1 results I found.
    Will you be making a video production of this ? Would be hugely successfull.

  9. Thanks for this. However I’m still struggling to get my custom menu to show up on my new ‘manifest’ theme. I cannot locate a ‘theme locations’ area in my dashboard at all. Has wordpress been updated since this tutorial or do I just have something wrong with my dashboard?!

  10. Pingback: WordPress.com Forum Options | one cool site

  11. Pingback: Create a WordPress.com Website | one cool site

  12. Hello – I am also a newbie on WordPress (http://scentrail.wordpress.com/) and after just a few days of setting stuff up and consulting numerous WordPress troubleshooting blogs, I was immediately impressed by your clarity! Thank you for your posts, they really are a great help.

    I feel I have a fairly good sense of the basics and now I need to get clear information on something which is a bit more tricky: how to put the posts in categories into descending alphabetical order A-Z, rather than having them merely displayed in chronological order. Also, how to display just the post titles when categories are clicked on (these post titles are almost all perfume names, as my blog is all about scent!) rather than the entire post including text or an extract from it (the posts are mostly perfume reviews).

    Currently when I click on the category Perfume Reviews on the categories side bar, the most recent comes up verbatim with all the other older perfumes reviews coming after. Default mode, right? Basically, I would like people viewing my blog to be able to click on the categories (especially ‘Perfume Reviews’) and be able to see a list of titles (post titles i.e. perfume names) in alphabetical order, so if they had a particular scent in mind and I had reviewed it, they could click on the title and go to the review without having to scroll through pages of text.

    I guess this should apply to all categories and all tags.

    I created a custom menu on the side bar for the category Perfume Reviews but when I came to the issue of alphabetizing it, the troubleshooting blogs leap to a whole other level of expertise, which is a bit beyond me. So I was wondering if you have written on this topic? or if you (or anyone on this thread) know of a clear way of explaining about Codex or using plugins to a beginner!! I’ve been downloading plugins without knowing what exactly to do with them!

    I hope my explanation here is clear! Any advice appreciated. (Perfume recommendations dispensed freely in return!)
    Neil

  13. Having seen several web postings on the topic of Custom Menus for WP, I have to say that this is the best one imho. It’s very neatly organized and shows a lot of professionalism on the part of its author. If one had to resort to Custom Menus to effect “page hierarchy”, this represents the clearest guidance I’ve seen. Kudos! Nicely done!

  14. Have to say, as a ‘newbie’ I find myself looking for your responses in past support forum posts. Now I’ll check back here first. You are very clear and easy to follow, not assuming fore-knowledge in the people reading it. Thank you so much for the time you put into these responses and posts!

  15. Pingback: 6 Easy Ways to Feature Older Content « one cool site

  16. I have tried to set up custom menus on my blog (blackworklessons.wordpress.com) The primary menu is called about and includes an introduction and copyright statement. The two pages still show up at the top of the homepage and the menu shows up as a widget in the bottom as planned, but it is not a drop down menu and there is no link to the pages. Same thing with the Chapters Menu I put in the same footer. The Links menu also does not show up as a drop down menu. Have I done something wrong or am I just expecting something that isn’t going to happen (the drop down sort of thing.) Thanks heaps! I continue to learn from everyone of your posts!

    • Hi Julie,
      The top horizontal bar is the only place any dropdowns can display.

      “The two pages still show up at the top of the homepage and the menu shows up as a widget in the bottom as planned, but it is not a drop down menu and there is no link to the pages.”

      I don’t know what yoy mean by the widget in the bottom.

      Would you please post to the support forum? Here’s the link http://en.forums.wordpress.com/forum/support

  17. Finally… mission (20-11) completed!! thanks for your support.. :)
    but… there is still but.. :(
    can we make slideshow of featured post!!?? clicking on every circle is not a better idea for feature.
    can we put featured post above the single post in twenty eleven? because we share single posts not blog url. there should be something like this… if we want to make some GFs… :D probability of success depends upon so many things. :):) (kidding)

  18. Another reason for me to move to WordPress. I know I’ll have to do it someday. Still, I’m so scared. There’s such a huge learning curve. From what I can see, though, it is worth it.

    • Dear Janene,
      If and when you do decide to make the move please give me plenty of prior notice and I will help you with the basic set up and structure of the blog. There’s no doubt about it. The ability to structure a WordPress blog as either a conventional blog or a website was a huge step forward for WordPress bloggers. There will be a learning curve involved and provided you are patient and persistent you will master it. Only those who are compelled by an artificial sense of urgency lose it when they make the conversion. Believe me when I say I have helped many frustrated bloggers. Take a look at this – 795 pages with 30 threads of questions on each one that I have answered.

    • @Pranab
      I tried to lay everything out in a step by step and illustrated manner that was easy to follow. I did visit your blog and I saw that you did work this out. Yay! I helped you and that makes me happy. Best wishes for happy blogging.

      • So sorry for being such an ungrateful wench! I just forgot to thank you for this detailed tutorial. Thanks so much! It worked like a dream! :)

        Now to see if there are any free templates that accept two menus. Any ideas…

  19. Thanks for the tutorial, Timethief! I’ve only used the custom menu in WordPress a few times. I like the step by step explanation of how to do it correctly. I’m also glad that you pointed out “preparation.” It definitely helps to organize our pages correctly beforehand.

    Have a good one!

    Allyson

    • Hi Allyson,
      I found that I was answering a lot of support forum questions about creating custom menus and decided a tutorial would be helpful. Organizing Pages first is a critical step that many have overlooked and that leads to inconsistency that produces unwanted results. You’re welcome and thanks for the well wishes which I’m sending right back to you.

    • Hi Carol,
      There is a learning curve involved as the software is different but there are tutorials, support documentation, a peer support forum, and Staff to assist you if you do decide to make the switch. Best wishes with yiur blogging. Your artwork is a joy to behold.

  20. Hello,
    I recently purchased purchased the domain (kissmy-abs.com) but received (kissmyabs.wordpress.com). Did I do something wrong? I paid $25.

    Can you please help me! OR how can I receive a REFUND.
    Thank you.
    Mayra Najera

  21. Good Morning TT, this is a timely post for me as I am tempted to sneak in and ask if maybe you know the answer to this one, as it’s been puzzling me for a while now and I think I’ve made a mistake when I first started blogging and didn’t understand how Categories work, in fact I still don’t otherwise I would be able to sort this out.

    If you make a Page using one Category only, will it pull in all the child categories too? In which case I need to re-structure my categories so that none of them are children ( as this seems to have happened on my Page ‘Posts with Recipes which is simply wrong). I have left a message for Staff but I think they are away right now. Hope all’s well and you are enjoying the summer!

    • Hi Joanna,
      Pages are Pages and Categories are Categories. When creating a custom menu and selectively including some Category tabs in it; we are not creating static pages at all. Categories and sub-categories are displayed on their own dynamic pages. We are simply placing the approprtiate URLs for them in custom menu in oder to create tabs. The tabs are arranged to display only the Categories and the sub-categories we choose to create, and will appear in hieracrhical drop-downs in the custom menu if and only if we structure them to do so. The relationship between them is a hierachical structure or not depending on our choices when we create them or later edit to create it. We use the Parent Category drop down menu to nest a category within a category.

      Categories, unlike tags, can have a hierarchy. You might have a Jazz category, and under that have children categories for Bebop and Big Band. Totally optional.

      It’s important to define that hierachical structure when we create Categories and sub-categories by defining a Parent and “child” relationship. If we do not do that it does not exist. If we haven’t done that when we created the Categories and sub-categories then we can edit to create it in the Categories module on our dashboard. http://zebbakes.wordpress.com//wp-admin/edit-tags.php?taxonomy=category

      When you select and position Categories and sub-categories and arrange them in your custom menu it’s important to create the identical hierachical structure in your custom menu. Consistency is key in this assignment just as it’s key in the assignment of parent Pages and child sub-pages.

      P.S. I am enjoying my summer. I completed my contracted work just 2 hours before my company arrived.

    • Hello Anne,
      It’s so good to hear from you. I’m taking a bit of a vacation at present and I finally have some time to devote to reading. I’m now on page 314 of your book and enjoying it. Thank you!

    • Hi Arnab,
      It’s been a year since custom menus were introduced but as we get bloggers asking how to do this every day on the support forum I decided to blog it. I’m happy to hear I filled in some ifnormation gaps for you.

Comments are closed.