Tutorial

The best way to Create a Menu in WordPress – WhoClick

You’ve been enjoying your WordPress adventure so far. You chose a great WordPress theme, put together a nice website, and brought your...

Written by admin · 9 min read >
How to Create a Menu in WordPress

You’ve been enjoying your WordPress adventure so far. You chose a great WordPress theme, put together a nice website, and brought your WordPress SEO machinery to life. The visitors started trickling in to your new WordPress-based business, but few convert into loyal fans or customers.

You check out Google Analytics, and your bounce rate is through the roof. So you decide to check every aspect of your website, but can’t find where the problem lies. What the hell?

Well, I will tell you this: your WordPress navigation menu could be the cause of your woes. A poor navigation menu system will keep visitors from finding that’s which they need on your site, and if they can’t find it, they will just do what every sane human being does – click the back button, and load your competitor’s site.

A great navigation system, on the other hand, is like a map that shows your visitors exactly where to go to find what they’re after. This just means without a great navigation menu, you’ll lose customers right, left, and center. Yeah buddy, having a great navigation menu – just like a rally driver has his/her navigator – is of grave importance.

In this step by step guide, we will show you how to design the perfect navigation system. Then we will show you exactly how to set up menus using the intuitive WordPress menu manager – in both the classic main Dashboard and in the live Customizer.

How to Create the Perfect WordPress Navigation

wordpress navigation

Are you ready for some menu adventure? Well, eat al carte… In this section, we will look at what makes a great navigation system.

Keep it Simple

The best navigation system is easy to use.

Don’t over-complicate your navigation menus by including pages that the user doesn’t necessarily need. Stick to your most important content – the content the user needs to stick around long enough to convert. Link only to your most essential WordPress pages, such as About, Contact, Hire/Product etc, and popular content that helps your cause.

Speaking of keeping things simple, do you really need that mega menu on your small personal blog? I don’t think so; mega menus are great yes, but they’re ideal for mammoth WordPress sites with a billion bytes of content, and a trillion products to boot. Keep it simple stupid.

Sitemaps Count As Well

A sitemap is considered an essential cog in the perfect navigation system. While helping search engine spiders to crawl your site easily and properly, Sitemaps can also come in handy when a user is lost, and/or encounters the dreaded 404 error page. Think of it as a navigation menu for your entire site published on a special page. Sitemaps aren’t to be feared, they’re simply pages that contain links to all resources on your site.

The best part is you can easily create sitemaps using plugins such as Google XML Sitemaps, or just go with a WordPress theme that support sitemaps inherently. Create a special sitemap page, and ensure you can see a list of all resources on your WordPress site when you load https://www.yousite.com/sitemap/. You can link to your sitemap from the 404 error page, or from your main menu.

Add Navigation Menus to Multiple Locations

If you were to improve your chances of winning the lottery for instance, you would need to play a couple of times. It has everything to do with the theory of probability. Similarly, to get readers clicking your links, you need to show said links a couple of times, on different locations of your site. The logic here is simple: the easier the reader can find the links, the faster they can click through.

By default, most WordPress themes will let you display your navigation menu in the header section, and perhaps the footer but that’s it. You can, however, use widgets to display your navigation menus wherever you fancy.

Best menu locations for maximum exposure include the header, sidebar, and footer areas. The sidebar is also a prime spot for categories, archives, and tags, so feel free to take advantage of these features to enhance your navigation system.

Add a Search Form

Systems break at the least opportune times. They tend to give in or fail when you least expect. Navigation menus are no exception, they fail all the time, especially if you’re using a third party WordPress menu plugin, and go tinkering around. At other times, the user simply doesn’t have the time to go several levels deep in your menus to find information. What to do?

You implement a search form, which makes it easier for the user to find what they want. Then place it in a prominent location on your WordPress site. For instance, don’t hide it in the footer section that’s only visible when the user scrolls down. If you have infinite scrolling in place, said user might never see the search form.

A search form is a fail-safe measure, as well a device that greatly improves user experience. Relevanssi helps you to build amazing search engines for your WordPress-based business.

Main takeaway: At the end of the day, just ensure your navigation menus are easy to find and use. Also put important content first, so it is incredibly easy to find.

How to Create a WordPress Menu in the Main Dashboard

Now let’s create a great navigation menu with the helpful WordPress menu manager. Out of the box, WordPress comes with a great menu manager that allows you to create simple menus, including drop down menus. It’s a simple drag-and-drop manager that makes adding menus as easy as pie. Even a fifth grader can add WordPress menus in minutes.

Create a New Menu

How? Just navigate to Appearance > Menus in your WordPress admin area. This will launch the Menus editor screen. If you’ve not yet created a menu or if you click on the “Create a New Menu” link you should see this screen:

Create a New WordPress Menu - Dashboard

Go ahead, and give your new menu a name. We shall call our example “main menu.” Enter your preferred name, and hit the Create Menu button. This will launch this screen:

Add WordPress Menu Name - Dashboard

As you can see, there are several options available. To the left, you’ll notice a list of your pages, categories, a custom links tab, and perhaps a couple of other features depending on your theme.

To the right, you have the Menu Structure area where you will edit and order your menu items. You also have the Menu Settings area that allows you to choose menu location, and an option that lets you add new top-level pages to your menu automatically (though for most sites this one can be ignored).

Add Menu Items

All you have to do from here to build your menu is select your pages, categories, or add custom links from the left panel, and then click the Add to Menu button. In a flash, your menu items will appear in the right column, where you simply drag and drop them as you fancy.

Why would you want to add categories to your WordPress menu? If you’ve created posts (e.g. lessons) in different categories (courses), you can group the lessons into courses using this feature. It’s a helpful feature as well if you run a news site. I went ahead and added various categories to my example menu like so:

Add WordPress Menu Items - Dashboard

Let’s also add a few custom links to direct visitors to third party sites, or even our very own sites living on sub-domains. Just navigate to the Custom Links tab.

Add your link in the URL text area, and the menu name in Link Text. Then just hit the Add to Menu button. Always include the extension (the https://) or your links won’t work:

Add WordPress Menu Custom Link - Dashboard

Dropdown Menus

So far we only have a few links in our menu, but if we were to add a bunch of link it could get really mess really fast. This is where drop down menus come in handy.

To create a dropdown, first add the sub-menu items you’d like to use. We’ve selected a few blog posts and added them to our menu as an example. Then just drag the sub-menu item slightly to the right like so:

Add WordPress Menu Dropdowns - Dashboard

Dropdowns are a great way to make your menus shorter, cleaner and easier to navigate. You can create more sub-menus under existing sub-menus, creating multi-level drop down menus as needed.

Note: Depending on your theme, you may have additional dropdown styling options available in the Customizer or your Theme Panel.

Advanced Menu Properties

Did you know that there are hidden menu options? To enable them, just click the Screen Options tab at the top right of your screen. Then check the Advanced Menu Properties you’d like to enable:

WordPress Menus Advanced Menu Properties - Dashboard

You’ll find the following options, each of which are added to menu items once you’ve enabled them.

Link Target: Check this option to add a target=”_blank” to the link, so your menu item opens in a new tab when users click on it.

Title Attribute: Title attributes can be used to add additional information about a link. This is typically most helpful to search engine crawlers, but is also visible to users as a tooltip when they hover on your menu item.

CSS Classes: This option can be used to add custom CSS stying to individual menu items. This is something you can code yourself, but often theme developers might include an extra option or two. For example, our own Total WordPress theme includes a custom menu-button class that will make the menu item display as a styled button (great for adding a “Buy Now” “Request a Quote” or similar call to action).

Link Relationship: This option is a bit advanced, and to explain quickly it can be used to define how your site is personally related to the link on your menu item. Is it another of your sites? Is it a friend’s site? You can read the official guide if you want to learn more.

Description: Exactly as it sounds, this options allows you to add a more in-depth description to your menu items. Even though this is an option you can enable somewhat easily, it will not be displayed unless supported by your theme.

Menu Location

We’re almost there, but we’re not done yet! You still need to assign the location where you menu will be displayed. Beneath the menu builder you’ll notice a Menu Settings section. This is where you’ll find your Display Location options. Each theme supports a different number of menus, so depending on your theme you may have one or many menu locations. You’ll need to assign a menu to each location you plan on using, however you have the choice to assign the same menu to multiple locations or to create individual menus for each location (it’s up to you).

Note: Alternatively, you can use the Manage Locations tab to control the location for all of your menus in one place.

To assign a menu to a location, simply check the box:

WordPress Menu Location - Dashboard

When you’re satisfied with your menu, items, and selected location click the Save Menu button.

Now when you look at your website on the frontend you’ll see your menu. Because we assigned our menu to the Main/Header it’s displayed as the main menu on our demo site:

WordPress Menu Frontend Display

But so far, the classic Dashboard menu editor lets you see the structure of your menus, but you can really visualize them. If you want to see you menus in real time then the Customizer is the right choice for you.

How to Create a WordPress Menu in the Live Customizer

Instead of using the traditional Menu editor in the main WordPress dashboard you can create menus with a live preview in the Customizer. Many of the options are the same, but we’ll walk you through each step again just so you can be sure.

To get started, you’ll need to open up the live Customizer which is located under Appearance > Customize:

WordPress Live Customizer

Then click on the Menus tab to be taken to the following screen to customize your menus:

Create New Menu - Live Customizer

From here you can see your already created menus (like the “My New Menu” we just created in the traditional menu manager), create new ones or view all menu locations. Since we’re showing you the ins and outs of creating menus in the Customizer, we’ll click on the Create New Menu link.

Create a New Menu

When creating a new menu in the Customizer your first steps are to choose a Menu Name and check a box for the Menu Location. As a reminder, available menu locations will depend on your theme. Because we’re using the Total theme we have a number of locations available, so we’ll select the “Footer” location since we’ve already created a main menu:

Name New Menu - Live Customizer

Add Menu Items

After naming and assigning your menu you can start building. Click the Add Items button to open up the menu builder:

Build WordPress Menu - Live Customizer

Here you’ll find all the same options to add links as in the traditional menu manager.

Add Posts and Pages to Menu - Live Customizer

To add pages, posts, custom post types or taxonomies simply click the plus + icon next to the item your want to add. It will immediately add the item to your menu and display it on your site’s live preview:

Add Page to Menu - Live Customizer

Reminder: We’re creating a Footer menu, so our menu is displayed in the footer. Depending on which menu you location you choose your menu live preview will be different. If you’ve selected a mobile menu location the menu will only be visible on mobile, so you’ll need to click on the tablet or phone icon at the bottom right of the live Customizer to preview your mobile menu.

To add a custom link, simply add your URL and link text and click the Add to Menu button:

Add Custom Link to Menu - Live Customizer

Advanced Menu Properties

When working in the live Customizer the menu link Advanced Menu Properties are not visible by default. To enable them you’ll need to go back to the main WordPress dashboard menu editor (if you’ve already started building you menu, be sure to Publish your menu first so you don’t lose all your hard work), click on the Screen Options tab at the top right of the screen and check the boxes for the options you’d like to enable. Then when you head back to the live Customizer > Menus, open your menu and click on the arrow next to menu item you’ll find all of the Advanced Menu Properties you’ve enabled:

Advanced Menu Link Options - Live Customizer

Dropdown Menus

Once you’ve added menu items you might want in your menu, you can create dropdowns. For a dropdown you’ll need submenu items, so simply add your links to your menu then click and drag them to the right. This will create your dropdown:

Create Dropdown Menu - Live Customizer

Menu Live Preview

You’ve probably already noticed as you were building, but the live preview to the right of the Customizer menu updates in real time as you make changes. So as you add menu items, add drop downs, change the location, etc it will be reflected in the live preview. Here is what our footer menu currently looks like:

Menu Live Preview - Live Customizer

If you’re happy with your menu be sure to Publish it before exiting the live Customizer. After publishing, you menu will be visible on the frontend of your website:

Menu Frontend - Live Customizer

As you can see – looks just like the preview. No surprises here!

Final Thoughts

WordPress navigation menus are a vital part of your WordPress site. They guide your users allowing them to find the content they’re after. They’re great for improving user experience, and consequently, your conversion rates. The best part is they’re quite easy to implement, so nothing’s to hold you back.

And if you want to create a truly special menu, give one of these best WordPress menu plugins a try. They’re a quick and easy way to build, or improve upon your existing WordPress menus.

Don’t leave money on the table anymore, invest in a WordPress menu plugin that suits your business needs. Have questions or comments? Share in the comment section below!

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *