WordPress Menu Guide: How to Create & Add Menus in Blog or Site

You’re done setting up your WordPress blog.

You’re finished signing up on the website, choosing your theme and fonts, and ensuring that your blog posts are search engine optimized.

With all that, you thought visitors would flood to your blog, and in turn, Google’s web robots would give you a high rank in SERP.

However, your bounce rate proves otherwise.

When you check Google Analytics, you see that people do visit your WordPress blog.

but they only check it out.

They don’t stay on it for too long.

This implies that they don’t even bother to check your old posts and they don’t even navigate around your blog.

What’s wrong with your blog?

Is it your layout or theme?

Do your visitors find it hard to navigate around your site?

If they experience this, then your navigation menus may be the culprit to the issues.

A poorly designed and poorly integrated menu system prevents your visitors from finding what they need from your website.

If they can’t find what they are looking for, they will click the back button, close the page altogether, or even go to other sites.

All of the above implies that you may lose prospective subscribers, customers, and visitors.

A good menu system, on the other hand, shows users where to go.

With this, they can easily find the information that they seek.

For some people, it’s easy to create and launch a WordPress blog.

You just need to register, verify your account, and choose a layout.

After all of that, you’re done.

Contents In Page

The Importance of User Experience

When it comes to designing and integrating a menu system, many steps and technical terms are involved.

There are no default layouts you can use.

Also if your guide is not that reliable, you may just be damaging overall user experience and jeopardizing your brand.

User experience or UX is your visitor’s overall experience while they are browsing your blog.

Users prefer an absolutely seamless UX.

So if you can provide this, they will go visit your blog regularly.

Making it easy for your visitors to get to what they need should be one of your topmost priorities when you are designing a blog.

By setting up your menus properly, you allow your users to find the most important pages and posts with ease on your WordPress blog.

According to KISSmetrics, a San Francisco based analytics platform, poor navigation, along with bad design and slow loading times, is one of the factors that affect web traffic and bounce rate of a blog.

It’s already hard to get searchers to visit your site.

All your efforts will be in vain if they do visit and just leave after a few moments.

So, you should do everything you can to attract users and to make them stay on your website.

Website navigation and user experience help you retain visitors.

This is a solid fact.

WordPress already has a decent menu manager tool.

All you need to do is to master using it.

This usability guide to utilizing WordPress’ menu manager will give you everything you need for optimizing your blog’s navigation system.

When you’re done getting used to the tool, you’ll learn how to design an intuitive menu.

Get Yourself Acquainted with the Navigation Menus

The type of navigation menu your WordPress blog needs depends on the theme that you’ve chosen.

However, you may use the most popular menu bar: the horizontal navigation menu bar.

This allows your visitors to see your blog’s features once they visit it.

You may also try the vertical navigation bar. You may opt to hide your contents or let them appear at the left corner of your blog.

So far, these two are the most popular types of menu bar for WordPress blogs.

You should also use customizable menus.

When you do so, you can set WordPress to add new items or titles automatically.

Designing tiered drop-down menus is even possible with the menu manager tool.

In some instances, your chosen theme has its own menu manager interface.

In this case, check your theme’s documentation for the instructions on how to customize its navigation system.

If your theme relies on WordPress standard menu manager, you can start customizing it by clicking the Menus item.

This is located under the appearance tab.

By doing so, you will be redirected to a page where you can manage the elements of your menu.

Using the Menus in WordPress

You’re now going to create the menus for your blog.

However, make sure that you have created the posts that you need to link to your submenus.

Otherwise, you won’t have anything to link to your navigation menu.

1. Getting Started

Basically, the navigation menu is a list of links that enable users to visit different sections and pages on your blog.

It also enables users to navigate around your site.

WordPress does not offer a fixed layout for your menus.

However, they do allow you to customize the title of your menus and submenus.

You can also choose their colors, font, and layout.

The built-in tool that can make this possible is located at the “Appearance” section. Under it, you will find the “Menus” section.

If you can’t find this section on your dashboard.

Then, go to the WordPress admin area.

Once you’ve been redirected to the manager page, you can create menus by adding items to the right area of the webpage.

You can drag and drop or add any page, categories, custom links, or blog posts to your menus.

2. Adding Social Media Icons

Nowadays, you can advertise your blog on social media platforms.

So enabling your visitors to visit your social media account and allowing them to share your posts can increase your web traffic and revenue.

To add social media icons, you need to install the Social Icons plugin.

To do this, just go to the plugins section and enter into the search field “menu social icons.”

Then, click the search button.

Next, install the plugin and activate it by clicking the “enable” or “activate” button.

Once you’ve activated the plugin, go to the appearance section to create a social menu.

Then, go to the custom links tab. It’s located in the left column.

You’ll see the icons for Twitter, Facebook, and other popular social media platforms.

They are located below the URL fields and link text.

Click on them and paste your social media profile URL. After that, click “add menu.”

Do this again for your other social media profiles.

When you’re done, choose a location for your social menus. Lastly, save your work.

3. Show Different Menus for Different Types of Users

If your blog is a WordPress membership website, you need to show different menus to your users.

You can achieve this by following the instruction below.

First, create two menus.
The first one should be for registered users, and the other one is for users who are not logged in
Next, add the code below to a site-specific plugin or to your theme’s PHP file.

Once you’ve added the code, test your navigation menus.

4. Styling Your WordPress Navigation Menus

In some cases, your theme may control the color schemes and fonts of your menus.

If this is the case, use CSS or Cascading Style Sheets to customize your navigation menus’ appearance.

To do this, you may manually write CSS or install the CSS Hero plugin.

If you choose the latter, just install the plugin to your WordPress blog.

Once you’ve installed it, a guide will help you get acquainted with the plugin’s functions.

If you prefer the former, follow the instructions below.

How to Style WordPress Menus Manually

The navigation menus of your blog are displayed in a bulleted list.

Typically, if you use the default menu tag, it displays a list that has no CSS classes.

Your bulleted list has the class name “menu.”

On the other hand, your list items have their own CSS class.

This is the simplest form of WordPress’ navigation menu.

If you have multiple menus, you must not use the default CSS class. It will not work.

The default CSS class represents any form element. This is the default among a group of related elements.

For instance, you can change the style of your default checkboxes even if there are other types of checkboxes present in a page.

That’s why you must define menu location and CSS class as well. You can do so by using the code below.

The code above tells WordPress that it is a theme that displays the primary menu.

It also integrates a CSS class primary menu with the navigation menu.

When you use the code, you can customize your menu bar and other navigation menu elements with the use of this CSS structure.

You must replace #header with your navigation menus’ container CSS class.

This CSS structure can completely modify the appearance of your menus even if your theme includes a default menu style.

There are also other generated CSS classes that WordPress adds to each menu item.

You can use them to further customize your navigation menu.

Further, WordPress also allows you to add your customized CSS classes to your individual menu items. With this, you can add image icons, highlight an item, or change fonts and color schemes.

To do all of the above, go to WordPress admin and find the menus page.

Lastly, click the Screen options menu and tick “CSS classes.” By checking that box, an additional field will be added.

5. Add Image Icons

Popular websites like DIY.com and wearemovingthings.com utilize image icons in order to attract their visitors.

Icons also make your menus noticeable.

To add navigation menu icons on your WordPress blog, you may use CSS or install and activate Menu Image plugin.

Once you’ve activated it, go to the Appearance section and add your images for each of the existing menu items.

6. Add Customized Navigation Menus

Most premium and free WordPress themes features predefined locations.

You can use them to exhibit your menu items.

If you’re using such kinds of themes, you can customize your navigation menu by adding the below code to your chosen theme’s functions.php file.

By doing this, you will create “My Custom Menu.”

Once it has generated, it can be found on the Appearance page.

Next, you have to display the menu.

To do this, add the code below to your theme.

7. Create a Mobile Ready Intuitive WordPress Menu

Most themes for WordPress feature intuitive menus for mobile browsing.

However, if your WordPress blog does not load menus and page backgrounds on mobile browsers, then you need to modify your navigation menu.

The previous steps involve writing codes.

Luckily, this one just requires you to install and activate the Responsive Menu plugin.

Once you’ve activated it, you must click the Responsive Menu icon located in your admin bar.

By doing this, you can configure the settings of the plugin.

Next, select a screen size.

Then, choose a layout for your navigation menu.

Keep in mind that the style will only appear on mobile browsers.

Finally, click the update options button to save your settings.

Tips for Designing WordPress Menus

Add custom links.
If you have many categories on your blog, create multi-level drop-down menus.
Use simple design and layout.
Integrate a site map to your blog.
Add menus to multiple locations.
Implement a search form or add a search box.
Don’t forget to optimize your menus for mobile browsing.
Properly write the codes above so that you will not face any issues with site navigation in the future.