Description

Menus provide a list of links for website navigation. In this lesson you'll learn how to create menus with links to pages and other content, how to place menus in various locations, and how to customize and manage menus.

Objectives

At the end of this lesson, you will be able to:

• Describe how menus support website navigation.
• Manage the primary menu in WordPress.
• Create a custom menu.
• Modify a menu by adding and removing items.
• Automate new menu items.
• Organize menu items by order and level.
• Place a menu in a secondary theme location.
• Utilize the "Custom Menu" widget.

 Prerequisite Skills

You will be better equipped to work through this lesson if you have experience in and familiarity with:

• Ability to operate the dashboard
• Ability to differentiate pages and posts
• Knowledge of how to work with categories and tags
• Understanding of how to add widgets to sidebar areas
• Ability to import content into WordPress
• Knowledge of how to activate a theme
• Setting a static front page knowledge might be required to demonstrate the whole scope of the menu

Assets

• Twenty Sixteen Theme
• Twenty Fourteen Theme
• Theme Unit Test Data for sample content, if needed

Screening Questions

• Are you able to log in to WordPress as an administrator?
• Are you familiar with using the WordPress dashboard?
• Do you understand that themes control the layout of a website?
• Do you understand how hyperlinks are the primary means of website and web navigation?
• Can you differentiate pages and posts, as well as categories and tags?

Teacher Notes

• Time Estimate: 30-45 minutes
• This lesson uses the dashboard Menus page, not the customizer, though that method is similar.
• If students are weak on screening questions, brief explanations may help.
• Be sure that students have a variety of content including use of pages, posts, and categories.
• If students are using a fresh WordPress installation, they should import the Theme Unit Test Data for sample content.
• Students should activate the Twenty Sixteen theme in order to follow the lesson, or they should be comfortable using their own theme which will have different content and menu locations.

Hands-on Walkthrough

Introduction

WordPress themes may provide a default menu that automatically adds navigation for the pages of a website. The default menu is typically displayed on the home page and most pages throughout the website. However, themes and templates may display menus in whatever manner a designer chooses. While a default menu can serve a blog or simple website, most websites will benefit from modifications of the primary menu along with the use of custom menus to improve navigation for users. It's helpful to have a plan to indicate what menus are needed for a website. During the web design process, you can create a site map to show how content is arranged, wireframes to indicate where actual menus are located and what items to include, and other planning documents may describe how users navigate the website.

The Primary Menu

Begin by locating the "primary menu" of your website. Here is an example of a simple primary menu with three page links using the Twenty Sixteen theme. In this example, the menu is located in the upper right corner of the website layout above the header. Your menu may appear in a different location or have different page links.

Managing Menus

Use the "Menus" section of the dashboard to access management functions for the primary menu. On the dashboard choose "Appearance" and then "Menus." If you have created or imported content, you may have menus that are already available to use. On the "Menus" administration page you will see two tabs: "Edit Menus" and "Manage Locations". Select the "Manage Locations" tab. The "Edit Menus" tab manages what's on the menus, while the "Manage Locations" tab sets where menus appear in the website layout. Themes can support various menu locations, but all themes should have "Primary Menu" listed as a location. Use the dropdown menu under "Assigned Menu" to select a menu for the primary menu. In this example (using the theme unit test data) the "Short" menu is selected, but try any menu you have available with your content. When you visit your website to view from the front end, you'll see the primary menu on the home page and throughout the website. Menu items that are followed by a downward facing caret (∨) can display a submenu associated with the top menu item. Test navigating the website with the menu items.

Custom Menus

You can replace a default menu with a custom menu, and you can create multiple custom menus to use in the various menu locations provided by a theme. Custom menus have many benefits. They can:

• Show or hide specific pages
• Edit labels for pages
• Re-order pages
• Enable multi-level menus
• Add posts and post categories
• Allow for custom links to any URL

To create a custom menu, go to Appearance > Menus > Edit Menus. Click the "create a new menu" link, type a short descriptive "Menu Name", as in this example for "Menu Test," then click the "Create Menu" button. The new menu is empty to start, and you can add items to it from the six types available: pages, posts, custom links, categories, tags, and formats. If you don't see the full list, click on "Screen Options" in the upper right corner of the dashboard, and check all the boxes for those. Click "Screen Options" again to save the changes and close the panel.

Adding Pages to the Menu

To start, click the downward triangle to open the "Pages" section, and you'll see three tabs for "Most Recent", "View All", and "Search". "Most Recent" shows a limited list of pages in reverse chronological order by date, while "View All" lists them all - listed as specified by the page order. Search allows you to type some characters and view an autocompleted list of pages to quickly find a page by its title. In this example (using the Theme Unit Test Data), select the following pages by clicking their checkboxes, then click the "Add to Menu" button to add all the items at one time:

• Home
• Sample Page
• Level 1
  • Level 2
    • Level 3

Notice that WordPress adds the five selected menu items in a flat list in the "Menu Structure" panel, which you may want to customize. First, edit the label of "Level 1" by clicking the downward pointing triangle next to the level 1 page item to open the configuration options and typing "First Level" in the navigation label field. You can see the original page name referenced as the menu link target. Also, notice that a red "Remove" link is available to delete the item from the custom menu.

Arranging Menu Items

This may seem counter-intuitive, but WordPress does not automatically create any specific order or hierarchy of your website pages when you add them to a custom menu. WordPress places new menu items to the bottom and at the same level in a flat list, so you'll probably want to rearrange menu items to meet your needs. WordPress does allow for complete flexibility for customizing menus. In addition to editing labels, you can arrange the order and levels of menu items with drag and drop functionality. Grab the "Sample Page" menu item by holding down the left mouse button, and when you see a four-headed arrow, drag the item to the bottom of the list. You'll see a dashed outline to guide the positioning of the item, and you can drop it into place by releasing the mouse button. Multi-level menus can be used for hierarchical lists and for condensing the screen space used by a menu. Themes may simply display a multi-level menu as an indented hierarchical list, though most theme designs will use dropdown or fly-out functionality to display lower level menu items as users interact with the menu. In this example, since the level 2 and level 3 pages are child pages below the top-level parent page level 1, they would be better arranged in sub-levels below the main level. A site map might show how to arrange them for site navigation, or in the list of WordPress pages they would be nested in a hierarchical arrangement according to the parent settings of pages. Grab the level 2 menu item by holding down the left mouse button, and then drag it to the right. You'll see a dashed outline to guide the positioning of the item, and you can drop it into place by releasing the mouse button. Notice that the menu item now has a grey "sub item" notation next to the menu item label. Similarly, move the level 3 item below the level 2 item, so that it's nested another level to the right. After you've created sub-level items, the set of items beneath a top-level parent are included in a menu group with the parent, so the entire section can be moved within the menu by grabbing the top parent item. To remove an item from a submenu, simply drag it to the left, so that it is back at the main level. Be sure to click "Save Menu" in the lower right or upper right corners to save the changes to your custom menu.

Adding Posts, Categories, and Tags

Specific posts along with post categories and tags can be added as menu items in the same manner as pages. You can relabel and rearrange them as well, mixing them in any order with page items. Using your new custom "Menu Test", add a post menu item, such as the "Hello World" post and relabel it "World." Also, add a category, such as "Media." With the new menu items at the bottom of the menu structure, grab the "First Level" group including the two nested sub items and drag that between the post and category menu items so that your resulting menu looks like this: Keep in mind that although pages and posts can both be added to custom menus, they tend to have different functions within a website. Pages are sometimes called static pages, meaning that they have a permanent function for a website, such as an About page. They may be updated occasionally, but they are always relevant and may be useful on a navigation menu. Posts, on the other hand, are timely and are usually organized by date with the most current items first, so as they age they may become less useful on a navigation menu over time. Categories organize posts and continue to be used over time, so categories do offer useful navigation as a form of taxonomy in a website structure. Tags provide a secondary means of cross-referencing posts, sometimes referred to as folksonomy, and they may be less useful on a menu. WordPress offers a variety of navigation tools for organizing content on a website, including widget lists of post categories, tag clouds, and links for associated categories and tags that appear with posts. Be careful that you don't overload menus with every possible item.

Adding Custom Links

The basis of the World Wide Web and Hypertext Markup Language (HTML) is the ability to link to any other web page, document, or Internet asset. WordPress allows you to manually add a link to anything with a standard Uniform Resource Locator (URL) that functions as a standard web link. This means that you can provide a menu link to a download document, such as a PDF on your website, or to a webpage or resource anywhere else on the web. First, be sure that you have a functional URL for the web address. You may copy the URL from the URL field for a WordPress media item, from the web address of a resource in web browser, or from other sources. You can test the URL by pasting it into a web browser to check that it accesses the web resource correctly. You will create a link to an image attachment page. Go to "Media" in the Dashboard and look for the Golden Gate Bridge image (provided with the Theme Unit Test Data), or select any image in your website. On the "Attachment Details" for the image, click the "View attachment page" link at the bottom of the right column. Select and copy the web address in your web browser, which will look something like this:

http://mywebdomain.com/?attachment_id=755

In Appearance > Menus > Edit Menus, select the "Menu Test" that you created. Open the "Custom Links" section and paste the URL you copied, then type a label such as "Golden Gate," or whatever label applies to your image. Click the "Add to Menu" button and the new custom link will appear at the bottom of the menu. Now you have a custom menu item that will open the attachment page for the image.

Format Menu Items

Post formats provide a range of specific types of content for which themes may provide custom templates for special formatting. Although post formats are not widely used, if your theme supports them and you have created content using them, then you may add menu items for a format. This would be similar to using categories or tags as a means of aggregating similar types of content.

Automating New Menu Items

For a website that will add new pages that should appear on a menu, there's a useful auto add pages setting to automatically add them. The "Menu Settings" below the menu structure has a checkbox to "Automatically add new top-level pages to this menu". However, this setting does not handle child pages for sub items, so those need to be added manually.

Managing Menu Locations

Any WordPress theme should support a primary menu location, but its location in the layout will depend upon the particular theme. The primary menu is often located near the top of a website layout, either above, below, or adjacent to the header, logo, or website title; but it may be placed on a sidebar or any location chosen by the designer. You can assign menus to the various locations specified for a theme, and you many need to refer to the theme's documentation to determine where they appear. You'll review how changing themes can change the menu locations available, so you can work with a secondary menu. Go to Appearance > Menus > Manage Locations to view how menus are assigned to theme locations for the Twenty Sixteen theme. Notice that there is a "Primary Menu" and and "Social Links Menu. " [info]The "Social Links Menu" is a special type of menu that only displays icons related to social media services. You'll work with that in an exercise that follows later, as it's not a typical menu. [/info] To work with a secondary location of a menu, you'll need to switch to a different theme. Go to Appearance > Themes in order to activate another theme with different locations. Look for the Twenty Fourteen theme, which is a standard default theme supplied by WordPress, hover your mouse over the theme and select "Activate". [tip]If you do not have the Twenty Fourteen theme, you can use the "Add New" button to install it, or you may activate another theme already available in your WordPress site to review its menu locations.[/tip] With the Twenty Fourteen theme activated, return to "Manage Locations" in menus, and you can see that a secondary menu is available. To assign an existing menu to the secondary menu, click "Select a Menu" to access a dropdown list of available menus and select "Short", or pick another custom menu from your list. Notice that you could click on the "Use new menu" link to switch to the "Edit Menus" tab if needed. Be sure to click "Save Changes", then review and test your menus on the front end of the website.

Custom Menu Widget

WordPress includes a "Custom Menu" widget that can add a menu to a sidebar. This is available using Appearances > Widgets to activate it in a sidebar location. Although this is a convenient feature, it has some limitations: the widget simply has options to select a menu and set a title, it's not directly integrated with the Menus functions, and themes may not format the widget in the same manner as other menus. You may try using the custom menu widget as an additional exercise.

Exercises

Create a new menu that has multiple levels

• Do the submenus have to mirror the parent/child settings of pages?
• How does it display as a primary menu?
• How does it display as a secondary menu?

Create several custom menu items with external URLs that are not found on your website

• Can you add any website page?
• Can you add a social media page?
• Can you configure the link to open in a new window or tab?

[tip]On Appearances > Menus > Edit Menus, use "Screen Options" to activate the advanced menu properties for that allow you to change the link's target. This will add a menu item configuration checkbox to "Open link in a new tab." [/tip] Add a custom menu widget to a sidebar

• Does the menu widget appear similar to a standard menu location?

Quiz

What could be used to determine what menus are needed for a website?

1. Site map
2. Wireframe
3. Planning document
4. All of the above

Answer: 4. All of the above

What is the default menu provided by most WordPress themes?

1. Main menu
2. Primary menu
3. Header menu

Answer: 2. Primary menu

Which is not listed in the choices for a type of menu item?

1. Page
2. Category
3. Image

Answer: 3. Image

How do you create a multi-level menu?

1. Select multi-level when creating the menu.
2. Use the Parent function of the pages.
3. Drag the lower level menu items to the right.

Answer: 3. Drag the lower level menu items to the right.

What do you need to make a custom link?

1. Social media account
2. URL
3. Theme support

Answer: 2. URL

Additional Resources

1. WordPress Menu User Guide @ Codex
2. Navigation Menus @ Codex
3. Appearance Menus Screen @ Codex
4. WordPress Theme Unit Test data @ Codex