Custom navigation menus

WordPress’ default navigation menu is geared toward simple blog entries.  If you add static (non-blog) pages to your site, and want a more useful way to navigate, you will need to replace the default top navigation toolbar with a custom navigation toolbar.

If you will have a lot of content, we urge you to spend some time planning your information architecture. You may want to consider creating parent pages and using dynamic drop menus to your navigation.

WordPress makes custom menus as simple as possible. You can even build hierarchical drop-menus with a few clicks.

  1. From your Dashboard, hover over “Appearances” in the sidebar, and click “Menus.”

    Appearance > Menus

    Appearance > Menus

  2. On the Menus page, enter a name for your custom menu in the input field for Menu Name, then click “Create Menu.”

    Menus page: Enter name for custom menu & save

    Menus page: Enter name for custom menu & save

  3. Tell WordPress where you want this custom menu to appear.  To create a navigation toolbar across the top of each page, select your custom menu from the Header Menu options, then click “Save.” (NOTE: Various themes offer different menu options, but most will refer to the primary horizontal navigation toolbar as the Primary Menu or Header Menu. Don’t be afraid to experiment!)

    Specify location for custom menu

    Specify location for custom menu

  4. Using the “Pages” panel, select the pages you want to use as top-level links in your navigation toolbar; you should include your home page as well as any other “Parent Page” you will use for a top-level category of content (see below); click “Add to Menu.”

    Select "parent" pages to use as primary menu items

    Select “parent” pages to use as primary menu items

  5. In the box at the right labeled with the name of your custom menu, arrange the menu items in the desired order by dragging & dropping, then click “Save Menu.”

    Arrange menu items using drag and drop

    Arrange menu items using drag and drop

  6. View your site to make sure the menu appears in the right place; if not adjust the location (step 3).

If you followed along, you should now have a basic navigation toolbar with links to pages.

Adding Dynamic Drop-Menus to your Navigation Toolbar

Building a navigation toolbar with dynamic drop-menus — like we have on this Tutorials site — is done in the same way, but requires a little more planning and preparation.

Planning your Info Architecture

If you haven’t already done so, take a few minutes to consider how you’re going to organize your site content.

Typically, the categories by which you organize content will determine both your navigation scheme and your site structure: if you plan to create multiple pages for each Course you teach, then you probably want a link for each Course in your navigation menu, AND a top-level page for each Course that will provide links to its related pages.

This planning of site structure is what web professionals call “Information Architecture.”

Information Architecture - Explained

Information Architecture – Explained

“Parent” Pages

WordPress helps you organize your content into categories, AND automatically build fly-out drop-menus, by the use of “parent pages.” A “parent page” is simply a top-level page for a collection of related pages. In our above example, each top-level Course page would be a Parent page; pages related to each course would be “Child” pages.

When you associate selected secondary pages with a parent page, WordPress builds URL pathnames (addresses) that reflect this hierarchical relationship. It also represents the hierarchy in your Dashboard’s “All Pages” list, with child pages arranged below their parent page.

This organization should also be represented by your navigation menus.

Building the Drop-Menus

To build drop-menus for each category, you set up your custom menu as above, using your Parent Pages as top-level menu items. Then, using simple drag and drop actions on the Dashboard’s “Menus” page, you add child pages to each parent.

  1. Create a parent page for each top-level category of content
  2. Create the “child” pages for each content category
  3. From your Dashboard, hover over “Appearances” in the sidebar, and click “Menus.”

    Appearance > Menus

    Appearance > Menus

  4. Set up your base navigation menu as described above; add your Parent Pages as primary menu items

    Select "parent" pages to use as primary menu items

    Select “parent” pages to use as primary menu items

  5. In the Pages panel on the left, select all the “child” pages assigned to a Parent category, and click “Add to Menu.”

    Select "child" pages for a category and Add to Menu

    Select “child” pages for a category and Add to Menu

  6. WordPress appends the new links to the bottom of your custom menu list.
  7. Drag the “button” for one of your child pages up to its Parent. Notice how adjacent items move aside, and a dotted outline appears to indicate a drop zone — but don’t drop it yet!
  8. Drag the child menu item to the right just slightly, until the drop-zone outline also shifts right, THEN drop the menu item. It should now be indented below the Parent.

    Drag child items beneath parent and left slightly to indent, define hierarchy

    Drag child items beneath parent and left slightly to indent, define hierarchy

  9. Repeat to organize all your the child pages below their parents.
  10. Click “Save Menu.”
  11. View your site to make sure the drop menus work as expected and that items appear in the right place; if not adjust the items as needed.