Custom menus

When you publish a new Page, it’s normally added automatically to the Menu on the navigation bar, often at the top of your site.  And if you have a Pages widget on a sidebar, it will show up there as well.

The Page Attributes module on the right side of the Page Screen contains a dropdown menu that allows you to assign the Page to a Parent Page, thereby creating a Sub-menu on the navigation bar.  A Child Page can be a Parent to another Page.   There’s no limit to the depth of the hierarchy of Pages.

Custom Menu Editor

Further customisation is possible by using the Menu Editor. With it, you can not only add Pages as Sub-menus, you can also mix in other elements, Categories and Tags, as well as Links to other websites, and in any order or you prefer.

You can access the Menu Editor page via:

  1. the Appearance menu in the left navigation sidebar
  2. the Appearance hanging tab from the top Admin bar

Creating a Custom Menu

To create a custom menu:

  1. Click the + Tab (hover over the + to see the Add Menu tooltip), give it a name (only you will see this) and click the Create Menu button.
  2. In the Themes Locations module on the left side, select your new menu name from the Primary Navigation dropdown bar and click Save.

To add and organize Pages on your Custom Menu:

  1. In the Pages pane on the left, tick the checkboxes next to those Pages you want to be part of your new menu
  2. Click the Add to Menu button
  3. Your selected Pages will appear in your Menu workspace on the right. Click and drag each one to the desired position/hierarchy. When the dotted box appears underneath it, drop it. Then click the Save Menu button.

Adding Blog Categories and Custom Links

Besides Pages, you can also add blog Categories, as well as links to other websites.

  1. In the Categories pane on the left, tick the checkboxes next to those Categories of blog posts that you want to be part of your new menu. Click the Add to Menu button at the bottom of the pane.
  2. In the Custom Links pane on the left, paste the web address/URL of the external website, type the name of the site in the Label field, and the click the Add to Menu button at the bottom of the pane
  3. Your selected Categories and Custom Links will appear in your Menu workspace on the right. Click and drag each one to the desired position/hierarchy. When the dotted box appears underneath it, drop it. Then click the Save Menu button.

Custom Menu Item Labels

You can also change the Label and the hover-over text of Menu items independently from the Page name itself.

  1. Click the down arrow in the upper right corner of the Menu item to expand it
  2. Type in a new name in the Navigation Label field. Note that the underlying Page will always show its name in the Original section of the menu item
  3. Optionally, type in text that describes the Menu item in the Title Attribute field. This text will display in a tooltip when one’s cursor hovers over the Menu item.  Click the Save Menu button.

The result:

Our sample Custom Menu looks like this viewed via the website. Moving the cursor over the Training Menu in the navigation bar drops down the Sub-menus. Hovering over the Images Menu makes its toolip pop up.


Tutorial by Griff Wigley, Instructor
WordPress for Newbies (next online course begins 16 May, 2011)

Leave a Reply

Comments are moderated. This may take some time as there is no full time moderator for this site.

Your email address will not be published. Required fields are marked with a *