Mastering Your WordPress Navigation: How to Create Custom Menus with Sub-Menus and Custom Links

A well-structured navigation menu is the backbone of any successful website. It guides your visitors, helps them find what they’re looking for, and significantly enhances their overall user experience. Without an intuitive menu, even the most beautifully designed site can feel like a labyrinth, leading to frustrated visitors and missed opportunities.

WordPress offers robust tools to create, customize, and manage navigation menus, allowing you to build everything from simple primary navigation to complex multi-level dropdowns and custom links. For new WordPress users, or even those who’ve been around a while but haven’t dived deep into menu customization, the process can sometimes seem a little daunting.

This comprehensive, step-by-step tutorial will walk you through everything you need to know to create effective and user-friendly custom navigation menus in WordPress. We’ll cover not just the basics of adding pages, but also how to implement sub-menus (dropdowns), incorporate custom links, and even touch upon some advanced options that give you ultimate control. By the end of this guide, you’ll be a master of your WordPress navigation, able to sculpt menus that perfectly reflect your site’s structure and user journey.

Prerequisites:

Before we begin, ensure you have:

• An active WordPress website.
• Administrator access to your WordPress dashboard.
• Some existing pages or posts on your site (optional for custom links, but recommended for a full menu).

Step 1: Accessing the Menus Screen

The journey to creating your custom menu begins in the WordPress dashboard.

1. Log in to your WordPress administrative area (usually ZEALTERCODE0).
2. Once logged in, look for the “Appearance” option in the left-hand sidebar.
3. Hover over “Appearance” and click on “Menus”.

You will now be on the “Menus” screen. This is your central hub for all menu management. Take a moment to familiarize yourself with the layout:

• The large central area, “Menu Structure,” is where you’ll build and organize your menu items.
• On the left, you’ll see boxes like “Pages,” “Posts,” “Custom Links,” and “Categories.” These are the sources from which you’ll add items to your menu.
• At the bottom of the “Menu Structure” area, you’ll find “Menu Settings,” which allows you to define where your menu will be displayed on your site.

Step 2: Creating Your First Menu

If this is your first time creating a menu, you’ll likely see a message prompting you to create one.

1. In the “Menu Structure” area, locate the field labeled “Menu Name.”
2. Type a descriptive name for your new menu. For instance, if this will be your main navigation, you might name it “Primary Navigation,” “Main Menu,” or “Header Menu.”

• Example: Let’s name our first menu “Main Navigation.”

1. Click the blue “Create Menu” button.

Congratulations! You’ve just created an empty menu. The next step is to populate it with content.

Step 3: Adding Pages to Your Menu

Most website menus prominently feature links to key pages on the site.

1. On the left side of the “Menus” screen, locate the “Pages” box.
2. By default, you’ll see a tab labeled “Most Recent.” This shows your recently published pages. You can also click the “View All” tab to see a complete list of all your published pages or use the “Search” tab to find specific pages.
3. Check the boxes next to the pages you want to include in your menu.

• Example: Select “Home,” “About Us,” “Services,” and “Contact Us.”

1. Click the “Add to Menu” button.
2. You’ll now see these pages appear as items in the “Menu Structure” area.

• Tip for Reordering: You can easily reorder menu items by clicking and dragging them up or down. A dashed outline will appear, showing you where the item will be placed.

1. Once you’re satisfied with the order, make sure to click the blue “Save Menu” button at the bottom right of the “Menu Structure” area. This saves your changes.

Step 4: Assigning Your Menu to a Location

Creating a menu isn’t enough; you need to tell WordPress where to display it on your website.

1. Still on the “Menus” screen, scroll down to the “Menu Settings” section, located just below the “Menu Structure” area.
2. You’ll see a list of “Display locations” with checkboxes. These locations are defined by your active WordPress theme. Common locations include:

• Primary Menu / Main Navigation: Usually displayed in the header or top section of your website.
• Secondary Menu: Often a smaller menu, sometimes in the header or footer.
• Footer Menu: Displayed in the footer of your website.
• Mobile Menu: Some themes have a dedicated menu for mobile devices.

1. Check the box next to the display location where you want your “Main Navigation” menu to appear. For most sites, this will be “Primary Menu” or “Main Navigation.”

• Example: Check the box next to “Primary Menu.”

1. Click the “Save Menu” button again.

Now, if you visit your website, you should see your newly created menu displayed in the chosen location.

Step 5: Creating Sub-Menus (Dropdowns)

Sub-menus allow you to create nested navigation, making your main menu cleaner and more organized. For example, under “Services,” you might want to list “Web Design,” “SEO,” and “Content Writing.”

1. In the “Menu Structure” area, identify the menu item you want to be the “parent” (e.g., “Services”).
2. Click and drag the item you want to be a “child” (e.g., “Web Design”) slightly to the right, directly beneath its intended parent item.
3. You’ll see the child item indent, and its label will change to “(sub item)” next to its name. This visual cue indicates it’s now a sub-menu item.

• Example: Drag “Web Design” and “SEO” under “Services,” indenting them.

1. Repeat this for any other items you want to include in your sub-menu. You can even create multiple levels of sub-menus by indenting items further (though it’s generally recommended to stick to one or two levels for optimal usability).
2. Click “Save Menu” when you’re done.

• Tip: Too many levels of sub-menus can confuse users. Most usability experts recommend limiting dropdowns to two, perhaps three, levels deep for better navigation.

Step 6: Adding Custom Links to Your Menu

Sometimes you need to link to an external website, a specific section of a page (anchor link), or even just a placeholder for a menu item that serves as a parent for sub-menus. This is where “Custom Links” come in handy.

1. On the left side of the “Menus” screen, locate the “Custom Links” box.
2. In the “URL” field, enter the full URL you want to link to.

• Example for external link: ZEALTERCODE0
• Example for placeholder: ZEALTERCODE0 (This creates a non-clickable parent item, useful if “Services” itself isn’t a page but just a container for its sub-services).

1. In the “Link Text” field, type the text that will appear in your menu.

• Example: For ZEALTERCODE0, you might use “Search Google.” For ZEALTERCODE1, you might use “Our Portfolio.”

1. Click the “Add to Menu” button.
2. The custom link will appear in your “Menu Structure.” You can drag and drop it into place like any other menu item.
3. Click “Save Menu” when finished.

• Tip: Using a placeholder ZEALTERCODE0 in the URL field for a parent item (like “Services” if you don’t have a main “Services” page) is a common and effective way to create a dropdown without linking the parent itself to a page.

Step 7: Adding Posts or Categories to Your Menu

While pages are the most common menu items, you might want to highlight a specific blog post or link directly to a category archive.

1. On the left, find the “Posts” box or the “Categories” box.
2. Similar to pages, you can select from “Most Recent,” “View All,” or “Search.”
3. Check the box next to the specific post or category you want to add.
4. Click “Add to Menu.”
5. Drag the new item into its desired position within the menu structure.
6. Click “Save Menu.”

• Example: You might add a “Blog” category under a “Resources” parent item, or directly link to a popular “Latest News” post.

Step 8: Renaming Menu Items and Removing Items

You have full control over the text displayed in your menu and which items are included.

1. To rename a menu item, click the down arrow on the right side of the menu item in the “Menu Structure” area. This will expand its settings.
2. Change the text in the “Navigation Label” field. This only changes the text in the menu; it does not change the page title itself.

• Example: You might have a page titled “About Our Company,” but want the menu item to simply say “About Us.”

1. To remove an item, click the “Remove” link (red text) at the bottom of its expanded settings.
2. After making changes, remember to “Save Menu.”

Step 9: Advanced Menu Item Settings (Screen Options)

For even finer control, WordPress offers advanced settings for individual menu items. These are hidden by default.

1. Look for the “Screen Options” tab at the very top right of your “Menus” screen. Click it to expand.
2. Under “Show advanced menu properties,” check the boxes next to the options you want to enable for your menu items:

• Link Target: Allows you to open the link in a new tab or window (useful for external links).
• Title Attribute: Adds a tooltip that appears when a user hovers over the menu item. Good for accessibility or extra context.
• CSS Classes: For advanced users, this allows you to assign custom CSS classes to individual menu items, enabling unique styling.
• Link Relationship (XFN): Rarely used for most sites, defines the relationship between the site and the author of the link.
• Description: Some themes display a small description under the menu item.

1. Once enabled, expand a menu item in the “Menu Structure” area, and you’ll see these new fields.
2. Populate the desired fields and “Save Menu.”

• Tip: “Link Target” is particularly useful for external links to keep users on your site, while “CSS Classes” can be powerful for custom designs if you’re comfortable with CSS.

Step 10: Managing Multiple Menus (Optional)

Many websites require more than one menu (e.g., a primary menu, a footer menu, a social media menu).

1. To create an entirely new, separate menu, click the “create a new menu” link at the top of the “Menu Structure” area. Then repeat Steps 2 and onward for this new menu.
2. To manage which menu is assigned to which location, click the “Manage Locations” tab at the top of the “Menus” screen.
3. Here, you’ll see a list of your theme’s available menu locations and dropdowns to select which of your created menus should appear in each location. Make your selections and click “Save Changes.”

• Tip: Give your menus clear, descriptive names (e.g., “Footer Navigation,” “Social Links Menu”) so it’s easy to assign them correctly in the “Manage Locations” tab.

Conclusion

You’ve now mastered the art of creating and customizing navigation menus in WordPress! From setting up your primary navigation to implementing multi-level dropdowns and incorporating custom links, you have all the tools to design a user-friendly and effective menu system for your website. Remember to always save your changes, test your menus on both desktop and mobile devices, and strive for clear, concise navigation labels. Experiment with different arrangements, add relevant posts or categories, and leverage the advanced options to fine-tune your site’s usability. A well-designed menu is a cornerstone of a great user experience, guiding your visitors effortlessly through your content.