Website menus and how to create them in WordPress

May 25, 2019 - 4:10

We notice lots of contestants having problems with menus of their website. Some of them do not know the use of menus, some have no ideas how to start and the others want to change the theme’s menu but they can not.

In this post, we collect explanations and instructions from Bourn Creative and WordPress.org which are realy good sources for you to learn WordPress. Don’t wait to practice on your website.

1. Website Menu And How They Are Used In WordPress (Jennifer Bourn, April 11, 2014)

At the most basic level, a WordPress menu is a collection or list of links. The most common placement of a menu is in the site navigation area or navigation bar and is referred to as a navigation menu.

Each link in a menu is called a menu item. Some menu items may have sub-menu items that are displayed in a drop down menu.

  • EXAMPLE: A basic website navigation menu may include menu items such as About, Services, Products, Testimonials, and Contact. The Services menu item may display a drop down menu, with the sub-menu items Private Consulting, Group Training, VIP Day.

Below you’ll see a site with a primary navigation menu, a secondary header menu, and a drop down menu of sub pages under the Assessments menu item.

How to Use WordPress Website Menus

WordPress menus can be used almost anywhere in a WordPress site. In addition to your website navigation menu, you can display a WordPress menu in the header, in a sidebar, in the footer, or in any widgeted area.

  • EXAMPLE: On a media page, you could add a menu of links in the sidebar to interviews, features, and videos.
  • EXAMPLE: In a website footer, you could display a menu of links to your individual product or program sales pages.
  • EXAMPLE: On a speaking page, you could add a menu to the sidebar that links to your SlideShare presentations, speaking videos, or reviews.

Different Types of WordPress Menus

Why use a menu?

You may be reading this thinking, “Yeah, I get using a menu for my website navigation bar, but why use a menu elsewhere on my site? Why wouldn’t I just list the links?”

In a sidebar, footer, or other widgeted area, there is no editor available to help you add links, so listing links requires you either to write HTML code to create the links, or first create the list of links in a page and copy and paste the code into the widget. What a pain!

Menus make the process much easier!

WordPress menus allow you to quickly create a custom menu and easily add pages, posts, category archives, tag archives, author archives, or custom links.

On the menu screen, you can change the name and titles of any menu items without affecting its permalink (URL), and with its drag-and-drop functionality, you can change the order of the menu items, and create drop down menus. Plus, with the WordPress Custom Menu Widget, you can add a custom menu to any widgeted area on your website — all without having to touch any HTML!

Plus, custom CSS can be written for menus in the sidebar and footer to display them in a bulleted list class, to use icon fonts, images, or buttons, and to add hover effects.

Custom WordPress Website Menu Design

Responsive Website Menus

Responsive web design — where a site is designed to respond to, resize, or adjust itself, based on user behavior and the viewing environment — requires additional design considerations for website menus. Forethought must be given to how the menus will be displayed as screen sizes get smaller (or larger is using a mobile first approach).

One of the most common mobile menu designs is to use the “Hamburger” — an icon displaying three short horizontal lines that represents a menu. When clicked, the hamburger icon expands downward to show the full website menu (as shown below). If multiple menus are used (as shown below), whether or not the menus will be combined and how that will work must be addressed.

Responsive Menu Design For WordPress Websites

 

If you are reading at this point, you have acquired basic understandings about website menus. Let’s see how you create your own menu on WordPress.

2. WordPress Menu User Guide

Defining a Menumenu-screen1.png

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

  1. Login to the WordPress Dashboard.
  2. 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. Click the Create Menu button.

Your new custom menu has now been defined.

Adding Items to a Menu

menu-screen2.png

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

  1. Locate the pane entitled Pages.
  2. 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 that you want to add by clicking the checkbox next to each Page’s title.
  4. Click the Add to Menu button located at the bottom of this pane to add your selection(s) to the menu that 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 items, like Tags are hidden by default.

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. Whilst 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.

menu-screen4.png menu-screen5.png

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 location where you want your menu to appear.
  3. Click Save menu once you’ve made your selection.

menu-screen6.png

If your current theme does not support custom menus, you will need to add your new menu via the Custom Menu widget in the Appearance Widgets Screen.

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

Trailer