WordPress Tutorial #11

Your site’s organization is vital for helping readers find all your great content, and custom navigation menus are your first and best tool.

Your goal is to make it easy for readers to find what they’re looking for — ideally in one, two or three clicks.

Any more than that and they’ll probably leave unsatisfied.

Different themes give you different custom menu options. The simplest allows a single menu across the very top of your web page. Some allow two menus. They can be above and below the header, or two lines together, maybe in contrasting colors to make them stand out visually.

Whichever way your theme does it, you need to make the most of that precious bit of on-screen real estate.

That doesn’t mean you throw everything into the menu. You’ll only end up with a cluttered mess if you do that.

Instead you can use Custom Menus to nest subtopics under main topics, keeping the look clean while making your reader’s navigation easy.

I use two menus on this site: the one across the top gives you easy access to top-level topics. The one underneath the header is where you’ll find all the information about using WordPress.

an example showing 2 custom menus in WordPress

For this site, my top navigation menu includes Learn From Me and Work With Me, which feature the services I offer. Next is the About page and the Contact page. There’s also an explicit link to the Home page, and an icon for the WooCommerce shopping cart..

The second menu gets a little more interesting. When you hover your mouse over any of the items that show the little arrow symbol, a whole list of items drops down. Here’s what the How To dropdown looks like.

an example of a dropdown menu

You can even nest submenus under submenus, like this.

An example of a submenu under a submenu

It’s easy to set up when you use WordPress Custom Menus.

Before you start, it’s a good idea to map out your site’s navigation on a piece of paper, or using a mind mapping tool. Then head on over to your WordPress Dashboard.

#1. Click on Appearance/Menus

Appearance / menus menu in the WordPress dashboard

#2. Create a New Menu

Click Appearance / Menus. Type in a name for your menu, then click Create.

create your new custom menu here
Click to see a larger version

I’m calling this one Test Menu.

Notice there are several checkboxes at the bottom next to Menu Settings. I suggest leaving them unchecked, at least for now.

don't fill in the menu settings - at least not yet

#3. Add Items to Menu

This is very easy to do.

Your custom navigation menu items come from several sources:

  1. Custom Links
  2. Pages
  3. Posts
  4. Categories

You’ll notice the Pages, Posts, and Categories boxes all have three tabs. Click the middle one, View All to see a complete list of your pages, posts, or categories.

it's easy to build your custom menus

Notice the differences here? The first is Most Recent and the second is View All.

custom menus

Some themes and plugins give you even more ways to make menu items, but for now we’ll just stick to the ones that WordPress always provides.

To select items for the menu, just check the box next to it and click the Add to Menu button.

#4. Drag and Drop to Rearrange your Menu Items

Once you’ve selected the menu items, you can drag them to arrange them exactly the way you want your readers to see them.

You can nest one or more items under each other — just drag and drop.

I selected three pages, one category and one custom link for this particular menu. Here’s what it looks like before I start moving things around.

WordPress Custom Menu

I don’t want Blog to be my first item, though, so I drag the External Page to the top of the list.

WordPress Custom Menu

I don’t want the External Page to have its own listing on the menu, so I drag Work With Me to the top, then pull External Page to the right. Now it’s a sub-item nested under the main item.

WordPress Custom Menu

When you’re done dragging and dropping, click the Save Menu button.

#5. Save your Menu in Theme Locations

Notice near the top of the page there are two tabs: Edit Menus and Manage Locations. Select Manage Locations, and assign a location for the new menu.

Each theme will provide the locations — this particular theme allows three, while most themes allow at least two.

Assign a location to your new menu

Follow these same steps to create the second and subsequent menus, and assign locations for them.

You can also assign the location from the Edit Menus tab, next to Menu Settings.

Bonus Tip

Some widgets let you put a Custom Menu into your sidebar or footer. I’m using two custom menus in the sidebar — Tutorials and Reviews.

You create them exactly the same way, but you don’t save them to the Theme Locations.

Looking for more basic tutorials? You’ll find them here.

This article was updated on June 5, 2019.