WordPress Menu Building Guide

A guide to WordPress navigation Menu building system covers the basic tasks a user may carry out when using the built-in menu editor to set up

Updated on July 25, 2022
WordPress Menu Building Guide

This guide to the WordPress navigation Menu building system covers the basic tasks a user may carry out when using the built-in menu editor to set up a menu on your website.

Visualmodo WordPress themes add spacial and advanced menu layout and customization features to this native WordPress tool.

Defining a WordPress Menu

You must define a WordPress menu before you can add items to it.

WP appearance menu dashboard   WordPress Menu Building Guide
WordPress Menu Building Guide – define a menu.
  1. Firstly, log in to the WordPress Dashboard.
  2. Secondly, From the ‘Appearance’ menu on the left-hand side of the Dashboard, select the ‘Menus’ option to bring up the Menu Editor.
  3. Select Create a new menu at the top of the Page.
  4. Enter a name for your new menu in the Menu Name box
  5. Finally, Click the Create Menu button.

Your new custom menu has now been defined.

Adding Items: WordPress Menu Building Guide

add page to wp nav menus
WordPress Menu Building Guide -menu items

You can add different link types to your menu. These are split between panes left of the menu you’re currently editing.

  1. Firstly, Locate the pane entitled Pages.
  2. Secondly, Within this pane, select the View All link to bring up a list of all the currently published Pages on your site.
  3. Select the pages you want to add by clicking the checkbox next to each Page’s title.
  4. Click the Add to Menu button at the bottom of this Page to add your selection(s) to the menu you created in the previous step.
  5. Click the Save Menu button once you’ve added all the menu items you want.

Your custom menu has now been saved.

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

WordPress Menu Building Guide

Deleting a Menu Item

Deleting a Menu Item
WordPress Menu Building Guide – delete menu item.
  1. Firstly, Locate the menu item that you want to remove in the menu editor window.
  2. Secondly, Click on the arrow icon in the top right-hand corner of the menu item/box to expand it.
  3. Click on the Remove link. The menu item/box will be immediately removed.
  4. Finally, Click the Save Menu button to save your changes.

Customizing Items: WordPress Menu Building Guide

Navigation Label

This field specifies the title of the item on your custom menu. Your visitors will see this when they visit your site/blog.

Original

A link to the source of the menu item (e.g., a link to view the post or Page).

The following items are hidden by default. Use Screen Options to show the required fields.

Title Attribute

This field specifies the menu item’s Alternative (‘Alt‘) text. This text will appear when a user’s mouse hovers over a menu item. For example, link Target Select “Same window or tab” or “New window or tab” from the pulldown.

CSS Classes

Optional CSS Classes for this menu item links relationship (XFN) Allow for automatic generation of XFN attributes so you can show how you are related to the authors/owners of the site to which you are linking.

See Link Relationship for details. Description for this link. The report will appear in the menu if the current theme supports it.

  1. Click on the arrow in the top right-hand corner of the menu item to expand it.
  2. Enter the values for the required fields you want to assign to the item.
  3. Finally, click the Save Menu button to save your changes. As a result, all site following the menu building WordPress guide.

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 titles (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 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.
Position the mouse over the 'child' menu item
While holding the left mouse button, drag it to the right

Adding Your Menu to Your Site

If your current theme supports custom menus, you will be able to add your new menu to one of the Theme Locations.

  1. Scroll to the bottom of the menu editor window.
  2. In the section titled Theme locations, click the check box for the place where you want your menu to appear.
  3. Click the Save menu once you’ve made your selection.
Scroll to the bottom of the menu editor window
WordPress menu – primary menu to show up on live site

If your current theme does not support custom menus, you must add your new menu via the Custom Menu widget in the Appearance Widgets screen.

Congratulations! Your new custom menu is now present on your site.

Add Link Attributes to your Nav Menu