WordPress Menu User Guide

Defining a Menu

You must define a menu before you can add items to it. To define a menu, follow the steps below:

  1. Login to the WordPress Dashboard.
  2. Navigate to Appearance > Menus and click on Menus to open the Menus window.
  3. If you have created some pages for your site, but do not have any menus, your window should resemble the right hand screen capture. Otherwise, click the create a new menu link near the top (green arrow).
  4. Enter a name for your new menu in the Menu Name text input field. For the sake of this exercise, we shall call it Main.
  5. Click the Create Menu button.

Adding Items to a Menu

The right hand screen capture depicts the result of creating our menu named Main. Notice we have revealed the contents of the Screen Options pane by clicking the Screen Options tab in the top right corner of the Menus window. The top row of checked boxes corresponds to the default configuration of panes depicted to the left of the Menu Structure interface you are about to edit. Certain screen option items, such as Tags, are hidden by default.

  1. Locate the Pages window pane.
  2. Within the Pages window pane, select the View All link to bring up a list of all the currently published Pages on your site.
  3. Select the Pages that you want to add to Main by clicking the checkbox next to each Page title. For the purpose of this exercise, we shall click the Select All link.
  4. Click the Add to Menu button located at the bottom of the Pages pane to add your selection(s) to Main. You may repeat the process for other pane types assuming you have content assigned to those taxonomies; however, this is just an overview to get you started.
  5. Once you are finished adding menu items click the Save Menu button.

The checkboxes in the Menu Settings pane just below the Menu Structure pane are discussed at the end of this article. Your custom menu should now appear similar to the right hand screen capture.

Customizing Menu Items

Reference the screen capture to the right for the location of the following menu item attributes. You will need to have all the Advanced Menu Properties selected (green circle) as depicted in the Screen Options pane at the top of the screen capture in oder to view all attributes in the following list. The Title Attribute, Link Target, CSS Classes, Link Relationsip (XFN) and Description attributes are all hidded by default on the Screen Option pane.

  1. Click on the arrow in the upper right-hand corner of the menu item to expand it (indicated by green arrow).
  2. Enter the values you want to assign to the attributes described below.
  3. Click the Save Menu button to save your changes.

Attributes

  • Navigation Label
    This field specifies the title of the item on your custom menu. This is what your visitors will see when they visit your site/blog.
  • Title Attribute
    This field specifies the Alternative (“Alt”) text for the menu item. This text will be displayed when a user’s mouse hovers over a menu item.
  • Link Target (the label has been removed)
    Select “Open link in a new tab” or leave the box unchecked to open the link in the same tab or window.
  • CSS Classes
    Optional CSS Classes for this menu item.
  • Link Relationship (XFN)
    Allows for the generation of XFN attributes automatically so you can show how you are related to the authors/owners of site to which you are linking. See Link Relationship for details.
  • Description
    Description for this link. The description will be displayed in the menu if the current theme supports it.
  • Original
    A link to the original source of the menu item (e.g. a link to view the post or page).

Deleting Menu Items

  1. Locate the menu item that you want to remove in the menu editor window
  2. Click on the arrow icon in the top right-hand corner of the menu item/box to expand it.
  3. Click the Remove link in the lower left corner. The menu item/box will be immediately removed.
  4. Click the Save Menu button to save your changes.

Creating Multi-level Menus

When planning the structure of your menu, it helps to think of each menu item as a heading in a formal report document. In a formal report, main section headings (Level 1 headings) are the nearest to the left of the page; sub-section headings (Level 2 headings) are indented slightly further to the right; any other subordinate headings (Level 3, 4, etc) within the same section are indented even further to the right.

The WordPress menu editor allows you to create multi-level menus using a simple ‘drag and drop’ interface. Drag menu items up or down to change their order of appearance in the menu. Drag menu items left or right in order to create sub-levels within your menu.

To make one menu item a subordinate of another, you need to position the child underneath its parent and then drag it slightly to the right.

  1. Position the mouse over the child menu item.
  2. While holding the left mouse button, drag it to the right.
  3. Release the mouse button.
  4. Repeat these steps for each sub-menu item.
  5. Click the Save Menu button in the Menu Editor to save your changes.

Publishing Your Menu

To make your new menu visible on your site, add it to one of the theme specific (varies by theme) Display locations:

  1. Scroll to the bottom of the Edit Menus window.
  2. In the section titled Menu Settings, click the check box for the location you want your menu to appear.
  3. Click Save Menu once you’ve made your selection.

The setting, Automatically add new top-level pages to this menu is explained in the WordPress Menus section of the article Creating Pages.

Congratulations! Your new custom menu has now been added to your site.