wordpress: beyond the basics

Building Menus

Your site's navigation menu is generally a combination of Categories and Pages, as shown in this example:

Menu1

Categories are shown here in red, while the other three links are to Pages in the system.

Prior to WordPress 3.0, menu building was a semi-manual process. There are WordPress function calls that can be inserted into a theme's header.php template file, which will automatically pull in a hierarchy of nested pages, or of categories and their subcategories. However, that system required users to touch the HTML/PHP of the site (many users aren't comfortable with this), and made it tricky to precisely control the order of items in the menu, or to exclude certain items.

WordPress 3 introduced a new "Menus" system which has made menu construction much, much easier. If your currently active theme is designed to support Menus, you'll see a "Menus" link in the Appearance section of the Dashboard sidebar:

Menus2

If that entry doesn't appear in your Appearance manager, you'll need to edit your theme's header.php template file, remove the code that currently builds menus, and replace it with a bit of new code. That process is well-described here. For now, we'll assume that your theme already has Menu support.

WordPress can actually support the use of multiple menus on a site. To get started, you'll need to name at least one menu in the system - may as well call it "Main":

Menus3

Once you've saved a blank menu, you'll need to attach it to a location. In the default "2010" theme that comes with WordPress, the main named location is called "Primary Navigation." Associate your "Main" menu with the "Primary Navigation" location:

Menus4

With that done, you can now begin dragging menu sections from the left side of the page to the "Main" menu drawing area at the right, in much the same way as you built your collection of Widgets.

Start by checking the boxes for some or all of your Categories at the lower left, then click Add to Menu:

Menus5

The selected categories now appear in the menu builder:

Menus6

To change the order of the menu, try dragging the category entries up or down. Click Save Menu, then take a look at your live site. Want to see something even cooler? Try dragging one of your menu items a bit to the right, so that one category is nested under another:

Menus7

Now take another look at your live site - the hierarchy of categories will be translated into nested "fly-out" menus on your site.

Now try adding some of your Pages to the menu, in the same way. You might want to arrange it so your menu shows one page, then three categories, then another page, or whatever you like.

Finally, take a look at the Custom Links section on the left of the Menu builder. Create a Custom Link to your homepage by entering a URL of "/" (or whatever is relevant for your site) and a label of "Home":

Menus9

Of course, custom links can go to any page or post on your site, or even to other pages on the web! Drag the new custom link to the top of the menu and save.

Menus10

Using this system, categories and pages no longer show up automatically in your menus, but you'll find that you have much more control, and end users will have far less need to call in developers to build their menus.

If you do decide you want newly added top-level pages to be added to your menu automatically, check the box labeled "Automatically add new top-level pages" near the top of the menu builder.