How to Create a Custom Navigation Menu with Sub-Menus and Custom Links in WordPress

A well-structured navigation menu is the compass for your website visitors, guiding them through your content seamlessly. In WordPress, the built-in menu system is incredibly powerful, allowing you to create custom menus with top-level pages, sub-menus (dropdowns), and even links to external sites or specific sections of your own. This tutorial will walk you through every step of creating a sophisticated and user-friendly custom menu for your WordPress site.

By the end of this guide, you’ll be able to design a navigation experience that not only looks professional but also helps your users find exactly what they’re looking for with ease.

Introduction to WordPress Menus

Your WordPress theme typically comes with at least one designated “menu location,” often in the header (primary menu), but sometimes also in the footer, sidebar, or a secondary location. The beauty of custom menus is that you can decide exactly what goes into each location, organize items hierarchically, and even add unique elements like custom links to social media or calls to action.

Let’s dive in and transform your site’s navigation!

Step 1: Accessing the Menus Screen

The first step is to navigate to the central hub for all menu management within your WordPress dashboard.

1. Log in to your WordPress Admin Panel: Go to ZEALTERCODE0 and enter your username and password.
2. Navigate to Appearance > Menus: Once logged in, look for the “Appearance” section in the left-hand sidebar. Hover over it and then click on “Menus.”

You’ll now be on the “Edit Menus” screen. If you’ve never created a menu before, this screen might look a bit empty, prompting you to create your first one. If you have existing menus, you’ll see a list of them.

Step 2: Creating a New Menu

Before you can add items, you need a container for them – a new menu.

1. Click “create a new menu”: Near the top of the “Edit Menus” screen, you’ll see a link that says “create a new menu.” Click this.
2. Give your menu a name: In the “Menu Name” field, enter a descriptive name for your menu. For example, “Main Navigation,” “Header Menu,” or “Footer Links.” This name is for your internal reference only and won’t be visible to your website visitors.

• Example: Let’s call this one “Primary Header Menu.”

1. Click “Create Menu”: After naming it, click the “Create Menu” button.

You now have an empty menu ready to be populated with items.

Step 3: Adding Top-Level Pages/Posts to Your Menu

This is where you start building the core structure of your navigation. You can add various types of content to your menu: Pages, Posts, Custom Links, and Categories. Let’s start with Pages, as they are often the most common top-level items.

1. Locate the “Add menu items” section: On the left side of the screen, you’ll see several boxes: “Pages,” “Posts,” “Custom Links,” and “Categories.”
2. Add Pages:

• Click to expand the “Pages” box.
• You’ll see options for “Most Recent,” “View All,” and “Search.” It’s generally easiest to click “View All” to see all your published pages.
• Check the boxes next to the pages you want to add to your menu.
• Example: Select “Home,” “About Us,” “Services,” and “Blog.”
• Click the “Add to Menu” button.

You’ll now see these pages appear as individual items in your “Menu Structure” on the right side of the screen.

Step 4: Arranging and Reordering Menu Items

The order of your menu items is crucial for user experience. WordPress makes this incredibly intuitive with drag-and-drop functionality.

1. Drag and Drop: In the “Menu Structure” section, you can simply click and hold a menu item and drag it up or down to change its position.

• Example: You might want “Home” first, then “About Us,” “Services,” and “Blog.” Adjust them as needed.

1. Expand Item Details (Optional): Each menu item has a small arrow icon on its right. Clicking this arrow will expand the item, showing you additional settings like “Navigation Label,” “Title Attribute,” and “Remove.”

• Navigation Label: This is the text that will actually appear in your menu. You can shorten or change it without affecting the page’s actual title. For instance, if your page title is “About Our Company,” you might set the Navigation Label to simply “About.”
• Title Attribute: This text appears as a tooltip when a user hovers over the menu item. It’s good for accessibility and providing extra context.

Step 5: Creating Sub-Menus (Dropdowns)

Sub-menus are essential for organizing large amounts of content without cluttering your main navigation. They create dropdowns under a parent item.

1. Add Sub-Items: First, ensure you have the items you want to be sub-items added to your menu (e.g., “Web Design,” “SEO Services,” “Content Marketing”).
2. Indent to Create Hierarchy:

• Click and drag a sub-item (e.g., “Web Design”) directly under its intended parent item (e.g., “Services”).
• While dragging, subtly move the sub-item slightly to the right. You’ll see a dashed box appear, indicating it will become a sub-item.
• Release the mouse button. The sub-item will now appear indented under the parent item, labeled as a “sub item.”
• Example: Arrange “Web Design,” “SEO Services,” and “Content Marketing” as sub-items under “Services.”

You can create multiple levels of sub-menus by indenting further (e.g., a sub-item under another sub-item), though it’s generally recommended to stick to one or two levels for usability.

Step 6: Adding Custom Links to Your Menu

Custom links allow you to point to any URL, whether it’s an external website, a specific anchor tag on your own page, or even a file download.

1. Expand the “Custom Links” box: On the left sidebar, click to expand the “Custom Links” section.
2. Enter URL and Link Text:

• URL: Enter the full URL you want the menu item to link to.
• Example: ZEALTERCODE0
• Link Text: Enter the text you want to appear in the menu for this link.
• Example: “Twitter” or “Follow Us”

1. Click “Add to Menu”: The custom link will appear in your menu structure.
2. Arrange and Adjust: Drag and drop the custom link to its desired position. You can also make it a sub-item if needed.

• Tip: For social media links, you might create a “Connect” parent item and make Twitter, Facebook, LinkedIn custom links as sub-items.

Step 7: Adding Categories to Your Menu

If your blog has distinct categories, adding them to your menu can help users browse specific topics.

1. Expand the “Categories” box: On the left sidebar, click to expand the “Categories” section.
2. Select Categories: Similar to pages, select the categories you want to add.

• Example: If you have categories like “WordPress Tutorials,” “Marketing Tips,” and “Web Development,” select them.

1. Click “Add to Menu”: The categories will appear in your menu structure.
2. Arrange and Adjust: Position the categories as top-level items or as sub-items, perhaps under a “Blog” or “Resources” parent item.

Step 8: Configuring Menu Item Settings (Optional but Important)

WordPress offers additional settings for each menu item that can enhance functionality and accessibility. These are often hidden by default.

1. Enable Screen Options: At the very top-right of your WordPress admin screen, you’ll see a tab labeled “Screen Options.” Click it.
2. Check Additional Fields: A dropdown panel will appear. Check the boxes next to:

• Link Target: This allows you to choose whether the link opens in the same window or a new tab/window.
• Title Attribute: (Already covered, but ensure it’s checked if you want to use it).
• CSS Classes: (Advanced) This allows you to add custom CSS classes to individual menu items, which is useful for theme styling or advanced functionalities (e.g., making a button-style menu item).
• Description: (Less common) Adds a brief description under the menu item (theme support required).

1. Configure Item Settings: Now, expand any menu item in your “Menu Structure.” You’ll see the newly enabled fields.

• Link Target: For external links (like social media) or PDF downloads, it’s good practice to check “Open link in a new tab.” This keeps visitors on your site while they view the external content.
• CSS Classes: If your theme or a plugin provides specific classes for styling (e.g., ZEALTERCODE0), you can enter them here.

Step 9: Assigning Your Menu to a Display Location

You’ve built your menu, but it won’t appear on your site until you tell WordPress where to display it.

1. Locate “Menu Settings”: Below your “Menu Structure” on the right side, you’ll find the “Menu Settings” section.
2. Select Display Location(s): Under “Display location,” you’ll see a list of available menu locations provided by your theme (e.g., “Primary Menu,” “Footer Menu,” “Social Menu”).

• Check the box next to the location(s) where you want your newly created menu to appear.
• Example: For “Primary Header Menu,” you would likely check “Primary Menu.”

1. Click “Save Menu”: This is a critical step! Don’t forget to click the “Save Menu” button after making any changes, especially after assigning a location.

Step 10: Previewing Your Menu

Finally, it’s time to see your masterpiece in action!

1. Visit Your Website: Open a new browser tab and navigate to your website’s front end (yourdomain.com).
2. Inspect the Menu: Look at the area where you assigned your menu (e.g., the header).

• Check if all items are in the correct order.
• Test the sub-menus by hovering over parent items.
• Click on each menu item to ensure it links to the correct page or URL.
• If you added custom links with “Open in new tab,” verify that functionality.
• Tip: If your menu doesn’t look quite right or doesn’t appear, go back to Step 9 and double-check that you’ve assigned the correct menu to the desired location and clicked “Save Menu.” Clear any caching if you have a caching plugin enabled.

Helpful Tips and Troubleshooting

• Always Save: Get into the habit of clicking “Save Menu” frequently, especially after significant changes.
• Theme Specifics: Menu locations and how sub-menus appear can vary slightly depending on your WordPress theme. Some themes offer more locations or specific styling options.
• Too Many Items: If your main menu becomes too long, consider simplifying it, creating a separate “Utility Menu” (e.g., for login/logout), or exploring “mega menu” plugins for more advanced dropdown designs.
• Accessibility: Use clear and concise navigation labels. Ensure sub-menus are easily navigable with both mouse and keyboard for users with disabilities.
• Removing Items: To remove an item from your menu, expand it in the “Menu Structure” and click the “Remove” link.
• Changing Parent/Child Relationships: You can easily change a sub-item back to a top-level item by dragging it to the left.
• Menu Not Displaying:
• Did you assign the menu to a display location (Step 9)?
• Did you click “Save Menu” (Step 9)?
• Is your theme properly set up to display menus? (This is rare but can happen with custom themes).
• If you have a caching plugin, try clearing your site’s cache.
• Dropdowns Not Working: If sub-menus aren’t appearing on hover, it could be a CSS or JavaScript conflict within your theme or another plugin. Check your browser’s developer console for errors (F12 in most browsers).

Conclusion

Creating custom navigation menus in WordPress is a fundamental skill for any website owner. By following these steps, you can craft a logical, intuitive, and visually appealing navigation structure that significantly enhances user experience. A well-organized menu not only helps your visitors find information but also contributes to a professional and credible online presence. Experiment with different arrangements, utilize sub-menus wisely, and don’t forget to leverage custom links to integrate all aspects of your online strategy.