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”.

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.

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.

5. 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

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.

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.