The navigation structure of a blog and a website are quite different, in my opinion. For a blog, the content is classified by categories, tags and an archive section. In the case of a website however, the content is organized by topic. You have top-level, secondary and sometimes tertiary links.
Prior to WordPress 3.0, you could create such a navigation structure using nested categories. The problem was displaying it in an intuitive manner. Either the secondary and tertiary links appeared as a dropdown menu below the primary links or all the links were visible in the sidebar all the time. Other than that, you didn't have too many options.
With WordPress 3.0's custom menu feature, you can lay out the navigation as displayed in Figure 1.
The top-level navigation menus are displayed horizontally and the secondary (and tertiary) menus specific to the section you are in show up vertically. In other words, the primary and secondary navigation menus are decoupled and can be placed anywhere you like.
Before WordPress 3.0, it was extremely hard to do this. Now, with custom menus and just a few lines of code, you can build such a navigation system easily. This article explains how.
Step 1: Define the Primary Navigation
First, you need to define the primary (top-level) links. Log in to the admin panel and click on Appearance -> Menus. For clarity, I prefer to call this menu "Primary Navigation" but you can call it anything you like. To add entries to the menu, choose the entries from any of the three boxes: Custom Links, Pages or Categories.
To add a link to the homepage, click on View All under Pages. You will find an item titled Home. You can choose to give the menu a different name from the name of the page. For example, in the screenshot in Figure 1 clicking on "About The City" takes you to the "Impressions" page.
Figure 2 shows the Primary Links menu for the example in Figure 1. Don't forget to click on the Save Menu button before going to some other page.
Figure 2. WordPress 3.0 Primary Navigation
Step 2: Define Secondary Menus
Now you need to define the secondary navigation menus in the same way as the primary navigation. I usually prefix the name of these menus with "Secondary -", so the menu for "About the City" would be called "Secondary - About the City". I have added the pages that should appear under About the City, into this menu (see Figure 3).
Figure 3. WordPress 3.0 Secondary Navigation
Step 3: Link the Pages to the Menus
So now that we have the primary links and the secondary menus in place, let's link them to the pages. To do this, we will use WordPress' custom fields feature. For each page, we will tell WordPress which top-level menu should be highlighted and which menu should be displayed (see Figure 4).
Figure 4. WordPress 3.0 Custom Field
Now where do you find the value for these custom fields? The answer might sound a little intriguing. You'll find the value in the status bar. Head over to the Menus page and choose the Primary Links menu. Now hover the mouse over the disclosure icon (triangle pointing down) on the side of the menu item. The status bar will display a URL. At the end of the URL, you'll find edit-menu-item= with an ID after that. You need to enter this ID as the value for the primary_menu_id field.
Similarly, for the secondary_menu field value, click on the secondary menu and at the end of the URL, you will find menu= followed by an ID. Use this ID as the value for the secondary_menu. You will need to do this for all pages that have a navigation menu.
Find a programming school near you
