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.
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.
- How To Add Menu In WordPress Header
- How To Create Custom Menu In WordPress
- How To Add Custom Link In Navigation Bar
- Advanced WordPress Menu Properties
- 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.
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.
Here you will see the default WordPress Menu feature are:
- Page – Adds a link to another page on your site.
- Post – adds links directly to a blog post/article on your site.
- Custom Link – Adds a custom URL linking to another site like facebook, twitter etc
- 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.
How To Add Menu In WordPress Header
If you are using default twenty-sixteen theme, then you will not see anything on WordPress Header.
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.”
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”.
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.
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.
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)
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”.
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.
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.
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.
- Show (Primary Category)
- Show for Men (Sub 1 Category)
- Formal Shoes (Sub 2 Category)
- Flat Shoes (Sub 2 Category)
- Show For Women (Sub 1 Category)
- Show for Men (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.
After Organizing and giving a name to all page click on save.
- Go to the front end and refresh the page.
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.
Here, I’m making a link to the facebook page.
- give the title,
- enter the URL
- select the location and
- hit the save button.
Go to front-end and refresh the page and it looks something like this.
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
After enabling all the option on the screen.
- When you open a drop-down menu you will see the following new option.
Here is the glossary of all the terminology.
- Title Attribute: The text you write in the box will be displayed when a user’s mouse hovers over a menu item.
- Link Target: It helps you to make your link open in the Same Window Tab or in New window Tab.
- CSS Classes: This Option help you to add CSS class which is used for designing purpose. (it is all technical work)
- Link Relationship (XFN): Allows for the generation of XFN attributes automatically.
- 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.
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.
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.
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.