WordPress Tutorial #11
WordPress Menus are your first tool for organizing your site. 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.
For this site, my top menu includes the About page, the Work with Me page where I outline the WordPress setup services I provide, and the Contact page. There’s also an explicit link to the Home page, and another page I call Social Fun.
The second menu gets a little more interesting. When you hover your mouse over the first item, The Basics, a whole list of items drops down. These represent the seven phases of building your WordPress house.
It’s easy to set up when you use WordPress Custom Menus.
Before you start, make you know clearly what menu items you want, and where you want them. Then head on over to your WordPress Dashboard.
#1. Click on Appearance/Menus
#2. Name Your Menu, then click the Create Menu Button
I’m calling this one Test Menu.
Notice there’s a checkbox next to the menu name. I suggest leaving it unchecked, at least for now.
#3. Add Items to Menu
This is very easy to do.
You can create menu items from several sources:
- Custom Links
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.
Some themes and plugins give you even more ways to make menu items. For example, the Elevatr plugin lets you use the Elevatr forms as menu items. For now we’ll just stick to the ones that WordPress 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.
I don’t want Blog to be my first item, though, so I drag the External Page to the top of the list.
I don’t want the External Page to have its own listing on the menu, I want it to be under the Work with Me link. 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.
When you’re done dragging and dropping, click the Save Menu button.
#5. Save your Menu in Theme Locations
To the left of your screen is the Theme Locations box. It will tell you how many custom menus your theme supports. Click the dropdown arrow under Primary Navigation Menu to select the custom menu you just created, then click the Save Menu button.
If your theme supports two menus, follow these same steps to create the second menu, and select it as the Secondary Navigation Menu.
After you’ve saved your menu(s) you’ll see a message from WordPress:
Here’s what the menu we just made looks like. Note the External Page item that drops down when you hover over Work with Me.
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.