Introduction

In this tutorial, our goal is to understand how menus can be used to organize content on a WordPress site. Menus are a crucial element of website design as they provide a way for visitors to navigate through your site.

By the end of this tutorial, you will learn:

• What WordPress menus are
• How to create, customize, and manage menus
• How to add items to your menus like pages, posts, categories, and custom URLs.

Prerequisites: Basic understanding of WordPress and its dashboard. No coding skills required.

Step-by-Step Guide

Understanding WordPress Menus

Menus in WordPress are navigational structures that allow you to organize your site content. They can be located in several places like the header (most common), footer, sidebar, or even inside content with a shortcode.

Creating a Menu

1. Navigate to your WordPress dashboard, and click on Appearance > Menus.
2. Enter a name for your new menu in the Menu Name box and click Create Menu.

Adding Items to the Menu

You can add different types of items to your menu like pages, posts, custom links, and categories.

• Pages: Used to add static pages like Home, About, Contact, etc.
• Posts: Used to add blog posts.
• Custom Links: Used to add custom URLs.
• Categories: Used to group content into different sections.

To add items:

1. With your menu created, select the items you want to add from the left-hand side.
2. Click on Add to Menu and they'll appear on the right-hand side.

Organizing Your Menu

You can organize your menu items by dragging and dropping them. You can also create sub-items by dragging an item slightly to the right under another item.

Displaying Your Menu

Finally, you can display your menu on your site by assigning it to a menu location. Common locations include the header, footer, and sidebar. This varies based on your theme.

Code Examples

While menus are typically managed via the WordPress dashboard, there are instances where you might want to programmatically add, remove or change menu items. Here's an example of how you could do this in your theme's functions.php file using PHP:

//Code to add a new menu item
function add_new_menu_items()
{
    global $menu;
    $menu[99] = array(
        'My Custom Menu', //Menu title
        'manage_options', //Capability
        'my_custom_url', //Menu slug
        '', //Function
        'dashicons-admin-site', //Icon URL
        99 //Position
    );
}
add_action('admin_menu', 'add_new_menu_items');

In this code, we're adding a new menu item to the WordPress admin menu. We're using the admin_menu action hook and a custom function to add our new menu item.

Summary

In this tutorial, we've learned how to create, customize, manage, and display menus in WordPress. We've also seen how to add items to your menus like pages, posts, categories, and custom URLs.

Next, you may want to learn more about WordPress theming to understand how different themes can affect your menu's locations and appearance. The WordPress Codex provides plenty of resources for this.

Practice Exercises

1. Exercise 1: Create a new menu with items linking to your 'Home', 'About' and 'Contact' pages.
2. Exercise 2: Add a sub-item to your menu linking to a blog post.
3. Exercise 3: Add a custom link to an external site in your menu.

Solutions:

1. Navigate to Appearance > Menus, create a new menu, add the required pages, and save.
2. Add a blog post to your menu, drag it under another item and slightly to the right to make it a sub-item.
3. Add a custom link by entering the URL and link text, then add it to your menu.

Tip: Experiment with different menu structures to see what works best for your site's structure and content.