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. It allows you to present a site structure of your website to your users.
WordPress Navigation Menu Bar helps users to find information and browse through different sections of your website very easily. A good and well design navigation menu bar does not only help to the user but also helps the google, bing, Yandex and another search engine bots to crawl your site efficiently. Usually, people don’t focus on the navigation menu. But if you check the static of your site you will realize maximum clicks are done through Navigation Menu and Sidebar. In this article, we will explore the feature and use the option available in the WordPress Built-in Menu to create
- Drop down menu,
- Place link the in the menu,
- Add a social link
- WordPress custom menu
In the WordPress Menu.
Introduction WordPress Menus
WordPress Navigation menu comes with the very easy drag-and-drop interface that allows a user to create a simple as well as drop-down menus in WordPress. It quite easy for beginner users to Create Custom Menu and manage their location in the WordPress. First, have a look at the Website Structure.
Form the above screenshot, you have an idea about the website structure, its components name, and location. Let us move next. The location of the menus option available in apperance>>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,
Create Custom Menu In WordPress
The built-in WordPress Menu feature allows you to create your own custom menu in place of your theme’s default menus. lets we start with the basic thing, Adding page link to WordPress Navigation Menu by creating WordPress custom menu
- First of all, Login your WordPress as an Admin and click on Appereance>>Menu.
This is the screenshot of the just install WordPress and here you will see some options. like post, page, category and custom link as I told you above. 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 going to say. So, Lets we start. First of all, you have to Create a Menu (for understanding we can say that it is a group of page/post/link/category).
- Click on Appereance>>Menu and give a name to a Menu (group) and click on Create a Menu.
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 your first WordPress custom menu. You will see a two new Tab of Manage Location and Menu Setting.
Do, you will notice one thing, all the options are activated and you can use it now. But, we first check “Manage Location” Tab after that we come back to our main topic. When you click on Manage location, you will see some options.
Note: This Option is depended upon the Theme and plugins that you are using right now. You can set the location from here where you want to show this WordPress custom menu (a group of link) Let me share with you, my screenshot of Mange Location.
Now you can see my theme have three option, Primary Menu, Secondary Menu and Footer Menu. But if you check the option available in default WordPress theme is Top Menu and social link menu. Note: Terminology and option can also be varied by theme to theme as well as by plugin. Ok, Let’s come back to the WordPress menu Option and create a Custom menu in WordPress. Right now I have only a sample page (default WordPress page). First, we only use this page and after that, we will add some new page and add it to the WordPress Menu.
- Select the page and click on Add To Menu.
When you click on Add To Menu Button, your all selected Page will be automatically added to the WordPress Menu that you just created. After that, you have to select the location where you want to show it and click on save. Right now I’m selecting a Top Menu option. So let check how it looks on the front end.
So, Now you have a clear cut view create WordPress custom menu. This is just an example, We can do a lot of interesting things in WordPress menu just stay with me.
Create WordPress Dropdown Menu
If I add some more page in the Menu and arrange it as shown in the below screenshot by Dragging them on each other.
Then how is it look on the front end? All the page that is in the Page-2 ( parent page of 3,4,5) is shown in the dropdown Menu when someone hovers over it.
Now you know how to creates a WordPress Dropdown Menu in WordPress. Note: You can also be changed the name of the Navigation that is showing on the WordPress Navigation Menu bar.
- Click on Dropdown Menu and change the name “sample page” to “Home”.
Just close the drop down menu. Leave the page and go to the front end and see the change.
Add Post To Navigation Menu Bar
Adding Post to navigation is similar to add the page in the Navigation Menu. It looks something like this.
Select the post and move this post in the WordPress menu and save the Menu. it’s simple hmmm. But Here, I tick one more option that is “Automatically add new top-level pages to this menu“. By doing this. Ever page (not a post) you will publish in future will automatically add into this Menu.
You can see, I update a new page with the name “Newly published Page 6” just now and it automatically added to the Navigation menu.
Add Category and Custom Link In The Navigation Menu Bar
The process of adding a category to the navigation menu is also same as post and page. But there is one thing that you should have to take into the mind before doing this. If you add a category in the Menu than all post under that category will be shown only when someone clicks on it not hovering on it.
- Do the setting as shown in the screenshot below and save WordPress menu.
Let, check how it looks on the front end.
Now the last but important form all of them that is Custom Link The Process of adding custom link in the WordPress menu is little different than other.
- Click on Appereance>> Menu and then click on a custom link.
First, add the label that you want to use and then enter the link (URL). It looks something like this on the front end.
You can use custom link to do following things,
- Add a Social Link
- Add Important Link
- Add another website Link
- Add Signup, Registration, and Login/logout link
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) So this the brief introduction to WordPress Menu.
Advanced WordPress Menu Properties
There is few more option to that you should have to learn 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 in the screen, When you open the drop-down menu you will see the following new option.
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. So you can show how you are related to the authors/owners of the site to which you are linking. Description: Description for 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 optimise 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.
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
When you click on Customizer, then a new screen will be open. Here you can see the change in the Real Time
- Click on Menu
Here you will see the list of all the Menu that you created previously. Click on the list that you want to add and set the location where you want to show it.
Note: All the change you can see in real-time without saving the setting. So this the brief view to the WordPress Menu that helps you to do whatever you want to do with the menu. 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! And also Support Us By Liking Our Facebook, Twitter, and Google+ Page. If you have any suggestion or problem about WordPress custom menu please feel free to comment below.
Latest posts by Harvinder Singh Sharry (see all)
- What Is Robots Meta Tag? It’s Syntax And Different Values - November 18, 2017
- How To Remove Website From Google Search! Also Page, Images & Link - October 19, 2017
- Ultimate Guide To WordPress Menu To Create & Customise Navigation Bar - October 19, 2017