Select Page

WordPress Navigation Menu is the most active and important area of your website because it contains all the important (primary page) link to your site and allows you to present the structure of your site in front of the users.

navigation menu example of website

navigation menu

A good design Navigation Bar ( WordPress Top Menu ) does not only help the user but also helps the search engine like google, bing, Yandex to crawl your site efficiently.

Usually, people don’t focus on the navigation bar. But if you check the static of your site you will realize maximum clicks are done through WordPress menu.

In this article, we will explore the following things.

  1. How To Add Menu In WordPress Header
  2. How To Create Custom Menu In WordPress
    1. How To Add Custom Link In Navigation Bar
    2. Advanced WordPress Menu Properties
    3. Other Location To Manage WordPress Menu

Before we start creating a custom menu in WordPress, let me first highlight few important component WordPress.

Introduction To WordPress Menu

Menu helps users to find important information and browse through different sections of your website very easily and quickly. It comes with the very easy drag-drop interface that allows a site’s owner to create a custom menu in WordPress.

It is quite easy for the site owner’s users to create a custom menu in WordPress and manage their location.

First, have a look at the Website Structure and its terminology.

Website site structure

Website site structure

Form the above screenshot. I think now you have an idea of website structure and its components name as well as its location.

Now, let us check how WordPress menu it looks on the backend.

  • Login your WordPress as an admin and
  • Click on “Appearance >> Menus” to open WordPress Edit Menu.
Wordpress Menu Location and default feature

WordPress Menu Location

Here you will see the default WordPress Menu feature are:

  1. Page – Adds a link to another page on your site.
  2. Post – adds links directly to a blog post/article on your site.
  3. Custom Link – Adds a custom URL linking to another site like facebook, twitter etc
  4. Category – Shows a feed of blog posts from a given category.

Note:  There’s no limit on how many menus you can create. But you can add only one Menu to one Location. So try to add Page, post, link, and category according to your need in a single Menu.

By default all these options are diable, To enable it, you have to add at least one menu in it.

After that, you can place it where ever you want, like on WordPress Top Header  ( that we are going to do in this article)  or in WordPress Footer ( to add a privacy policy, term & condition page etc)

How To Add Menu In WordPress Header

If you are using default twenty-sixteen theme, then you will not see anything on WordPress Header.

default wordpress naviation bar in wordpress

default WordPress navigation bar

So first, You have to add menu in WordPress header and after that, you can add navigation links to it.

To add menu in WordPress,

  • Click on “Appereance>>Menu.”

wordpress Menu with label detail screenshot

Note: Before starting diving into it, you must have to learn the basic difference between post and page in WordPress. So that you can easily understand what I’m doing and why I’m adding pages to the navigation bar.

I hope you did it. So, Lets we move next.

First of all, you have to Create a Menu (for understanding we can say that it is a group of page/post/link/category).

  • So, give a name to a Menu (group) and click on “Create a Menu”.
create a menu in wordpress

create a menu

Do you notice, all the options (page/post/category/custom link) are now activated and you can use it.

Note: Always give a Name according to where you are going to use it. So that, in future you can easily remind it.

After creating a first custom menu in WordPress, You will see one new Tab of Manage Location.

just created Menu in wordpress and activate option for menu

Activated Option

Let we first explore it. what Manage Location can do and after that, we will create custom menu in WordPress.

Manage Location Tab helps you to mange the location of your wordpress menu.

menu location option in wordpress

menu location

From here, you can set the location where you want to show this Custom Menu (a group of the link) on your site.

Note:  This Option is depended upon the Theme and plugins that you are using right now. If you are seeing different or more option, that means your theme can add more functionality to your site.

Let me share with you, my screenshot of Mange Location.  (I’m using eleganttheme)

screenshot of Manage location menu

Manage location

Note: Terminology and option can also be varied by theme to theme as well as by plugin.

We have successfully added the menu in WordPress and now its time to create custom menu in WordPress.

How To Create Custom Menu In WordPress

Right now I have only a sample page (default WordPress page). So, First, we use it and after that, we will add some more things in it, like Facebook link, Category etc

  • Click on Apperance>>Menus and after that click on the page.
  • Now, select sample page (a page that you want to add in WordPress header) and click on “Add To Menu”.
add page to menu in wordpress

add a page to the menu

When you click on “Add To Menu” Button, your selected Page will be automatically added to the WordPress Menu that you just created.

After that, you only have to select the location where you want to show it (as I show in manage location Tab) and click on Save.

Note:  Here I’m selecting a WordPress Top Menu option.

So let check how it looks on the front end.

Your Page on Navigation Menu wordpress

A page on Navigation Menu

So, In this way, you can add navigation links to WordPress top menu. But, this is just an example, We can do a lot of interesting things in WordPress menu just stay with me.

Note: You can also be changed the name of the Navigation links that are showing on the WordPress Navigation Bar.

change the title of menu in wordpress

change the title of menu

You can also delete it by just click on delete option.

How To Add Sub Menu In WordPress

Sub Menu in WordPress plays a very important role to organize your site store if you are selling a lot of similar categories product.

For Example,

  1. Show (Primary Category)
    1. Show for Men (Sub 1 Category)
      1. Formal Shoes (Sub 2 Category)
      2. Flat Shoes (Sub 2 Category)
    2. Show For Women (Sub 1 Category)

Its similar to WordPress category Vs Tags. I recommend understanding its function and how we can use to organize our site.

So, lets we Add Sub Menu in wordpress.

  • Click on “Appereance>>Menu” and organize your Page (whatever you want ) in the following manner.
Sub-level menu in wordpress

Sub-level menu

After Organizing and giving a name to all page click on save.

  • Go to the front end and refresh the page.
create a sab page menu in the wordpressa

create a sub page menu

All the pages in the Page-2 ( parent page of 3,4,5) is shown in the drop-down Menu when someone hovers over it.

Now you know how to add sub menu in WordPress.

Note: You can also be changed the name of the Navigation that is showing on the WordPress Navigation Menu bar.

How To Add Custom Link In Navigation Bar

The process of adding a custom link in the navigation bar is almost same as adding post and page, expected you have to add the link to the page manually where you want to link.

This option is very useful to add the following things,

  • Add a Social Link
  • Add Important Link
  • Add another website Link
  • Add Signup, Registration, and Login/logout link etc

Click on Appereance>> Menu and then click on a Custom link.

Add custom link in the navigation menu

custom link

Here, I’m making a link to the facebook page.

So,

  1. give the title,
  2. enter the URL
  3. select the location and
  4. hit the save button.

Go to front-end and refresh the page and it looks something like this.

add link on header in wordpress menu

add a link on the header

Note: You can add only one Menu to one Location. So try to add Page, post, link, and category according to your need in a single Menu (group).

Advanced WordPress Menu Properties

There is few more option that you should have to know to Customize and style the Menu.

  • Click on the screen option on the Top-Right corner and
  • Enable all the advanced menu properties option and click on Save Menu
screen option in wordpress menu

screen option

After enabling all the option on the screen.

  • When you open a drop-down menu you will see the following new option.
enable advanced menu properties in wordpress

Advanced menu properties

Here is the glossary of all the terminology.

  1. Title Attribute: The text you write in the box will be displayed when a user’s mouse hovers over a menu item.
  2. Link Target:  It helps you to make your link open in the Same Window Tab or in New window Tab.
  3. CSS Classes: This Option help you to add CSS class which is used for designing purpose. (it is all technical work)
  4. Link Relationship (XFN): Allows for the generation of XFN attributes automatically.
  5. Description: Description of this link. (description will be displayed in the menu if the current theme supports it) These all options look like normal options but it is very useful to optimize your site for the user.

Have a look at this screenshot.

use of title attribute in wordpress

title attribute

How clearly you can tell your user if you click on this link it will redirect you to the homepage.

So, in this way you can guide your user in the more precise way.

Other Location To Manage WordPress Menu

As I told you, you can manage Menu form more than one location if your current theme supports it. right Know I’m using a Twenty-sixteen (default WordPress theme).

  • Click On Appereance>>Customize to open customize time.
WordPress customise for Menu

Menu

Everything you change here. Will mediately reflect and show you, how it looks.

For, example if you have created 2 menus and you want to see which one look better then you can check it in real time.

  • Click on Menu and select the menu that you want to apply.
menu loaction in customizer in wordpress

menu location

So this the brief view to “how to create custom menu in WordPress”. I hope you like it and don’t forget to check the hidden option of the WordPress Post Editor Toolbar and unlock the WordPress Post Screen Option that helps you write content in WordPress easily.

Remember to share this post with anyone who might benefit from this information, including your Facebook friends, Twitter followers and members of your Google+ group!

If you have any suggestion or problem to create custom menu in WordPress please feel free to comment below.

Follow me

Harvinder Singh Sharry

owner at Hitechwork
I'm Professional Blogger, SEO, and Digital marketing expert. I started my blog in 2016 with the aim to share my knowledge and experiences for the people associated with my field as well as for the general public.
Follow me

Pin It on Pinterest

Shares
Share This