Help yourself

Defining a Menu

You will have to define a menu before you can work on it. The steps below outline this process:

• Login to the WordPress Dashboard.
• From the ‘Appearance’ menu on the left-hand side of the Dashboard select the ‘Menus’ option to bring up the menu editor. You should see something similar to the screenshot below in your browser window:

Menu Editor (No Menus Defined)

• Enter a name for your new menu in the Menu Name box then click the Create Menu button. For the sake of this example, we’ll give this menu the name 'navmenu’ but you can give it any name you want. The menu editor should now look something like the screenshot below:

Menu Editor (Example Menu Defined)

Adding Items to a Menu

• The Screen Options allow you to choose which items you can use to add to a menu. Certain items, like Posts are hidden by default.

In this example, we’ll add 6 pages to the menu we created in the previous section. One of the pages added will point to the ‘Home’ page of the site. The steps you will need to take are listed below:

• In the left-hand corner of the menu editor screen, you should see a sub-menu titled ‘Pages’ In this sub-menu, click the View All link. This will bring up a list of all the pages that are currently published on your site/blog. (See the screenshot below.)

Pages List in Menu Editor

• Select the pages you want to add to your menu by clicking the checkbox to the left of each item’s title. In this example, the ‘Home’, ‘About’, ‘Another New Page’, ‘Child Page 1’, ‘Child Page 2’, and ‘Level 1’ Pages will be used. When you have selected the pages you want to include, click the Add to Menu button located in the bottom right-hand corner. You should now see a series of boxes, with the page titles of the items you added in the previous step on the left-hand side of each box.

• Click the Save Menu button to save the changes.

Deleting a menu item

• To access the options for the relevant menu item, find the corresponding menu item box in the right-hand corner of the menu editor window and left-click on the arrow icon in the top right-hand corner of it. The menu item box should then expand and the options we need to edit should be visible. See the screenshot below for an example.

Menu Item Options

• Click on the Remove link in the bottom left-hand corner. The menu item box for the menu item you deleted should no longer be displayed.
• Click the Save Menu button to save the changes you have made.

Customising Menu Items

Before we jump to the example, a little explanation about the ‘Navigation Label’ and ‘Title Attribute’ options is needed.

The ‘Navigation Label’ option specifies the title of the menu item as it appears on the navigation menu. This is what your users will see displayed on the navigation menu when they visit your site/blog.

The Title Attribute’ option specifies the Alternative (or ‘Alt') text for the menu item. This is what will be displayed when a users’ mouse hovers over a menu item, or if the user is accessing the site using screen reader software, for example.

In the example for this section, we’ll be using the menu item titled ‘Another Test Page’. The ‘Navigation Label’ option will be given value of ‘Page 2’ and the 'Title Attribute’ value will be changed to a value of ‘Click here for Page 2’ The steps you will need to take are listed below:

The steps you will need to take are listed below:

• Left-click on the arrow in the top right-hand corner of the menu item box. The menu item box should then expand and the options we need to edit should be visible.
• Enter the values for the Navigation Label and Title Attribute that you want to assign to the menu item and then click the Save Menu button to save the changes. In the menu editor, the title for the menu item you edited should have now been changed to the value you entered for the Navigation Label option. In the case of this example, it now has the label ‘Page 2’ instead of ‘Another Test Page

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 of the page.

The WordPress menu editor allows you to create multi-level menus using a simple ‘drag and drop’ interface. You can drag menu items up or down to change their order of appearance in the menu, or you can drag them left or right in order to create a multi-level menu structure. To make one menu item a subordinate of another item, then position it underneath, and drag it slightly to the right of, the main menu item.

This section will build on the example menu used in the previous section. Currently the menu only consists of main menu (Level 1) items, as can been seen in the screenshot below:

Example Menu as viewed in the Menu Editor

So, with our report analogy in mind, the menu in this example will be re-structured as follows:

*Home
*About
*Page 2
  *Child Page 1
  *Child Page 2
*Level 1

In this example, the menu items ‘Home’, ’About, ‘Page 2’ and ‘Level 1’ will be the main menu (Level 1) items, while ‘Child Page 1’ and ‘Child Page 2’ will be sub-items, subordinate to ‘Page 2’

The steps you will need to take can be found below:

• Position the mouse over the menu item box for ‘Child Page 1’. While holding the left mouse button, drag it to the right then release the mouse button.
• Repeat the above step for ‘Child Page 2’ and make sure that ‘Child Page 1’ and ‘Child Page 2’ are both indented the same distance from the left. Your menu should now look like the one the screenshot below:

Example Menu (Re-structured) as viewed in the Menu Editor

• Click the Save Menu button to save the changes. Your new menu, with the structure described in the example, should now be created.