How to Create and Add Navigation Menus in WordPress?

Jeniffer| 2018-06-01 Tutorials, WordPress Comments( 3 )

For beginners using WordPress to create their online presence, you may not know that there is a simple menu interface allowing you to easily create and add drop-down menus on your WordPress website. In below, we will introduce you how to easily create and add WordPress navigation menus. 

About WordPress Navigation Menus

By default, WordPress includes a navigation menu system. For beginners, creating and managing menus becomes quite easy with that menu system. Depending on the WordPress theme you are using, the menu system location is different. Almost all themes have minimum one menus location and some themes even have more than one location for the menus system to adjust to more complex sites.

The navigation menus in WordPress can make you show your users with the website structure clearly. With navigation menus, your users can easily find the information they need and browse it via various sections of your WordPress site. So, you can tell that the navigation menus are very important to you and your site. Because of this, more WordPress themes make them close to your header.

Create a Custom Navigation Menu on Your Site

For creating menus, you can go to WordPress admin area and find “Appearance” >> “Menus” from the left sidebar. 

Click on “Menus” which will make you switch to the page of editing menus, and the page has two columns: the left column includes your pages, custom link tab, and categories, while the other one is the place requiring you to add as well as adjust your menu items.

Now, you have learned the methods. You can start to create the first custom navigation menu for your website.

Firstly, you need add a name for this custom menu, such as “My First Menu”. Next, click on “Create Menu” button to start. It will expand the custom area for this new menu. By default, it is like the following image:

In our demo site, you can find there are 3 theme locations named as “Primary”, “Secondary” and “Social”. Actually, the theme location as well as placements will be different according to the using theme.

Then, you can adjust the menu structure by selecting and adding the pages you want to that menu. Note that the pages you can add are listed on the left side. Simply check the boxes next to the pages you want and then click on “Add to Menu”.

After that, you can choose a theme location to display this menu. Finally, click on “Save Menu” to store the first custom menu you created.

Now, you can go to the front to view your website and the menu just created, which can help you to check the menu location on your website and see if they look good. If not, you still have chance to make adjustment.

Arrange Items in Your WordPress Custom Navigation Menus

We are not sure you can find that the menu items in your customer menu have been arranged according to the order you just added them. For instance, the “About” link is the last one and the “Contact” page link is the first. But don’t worry, this is not the final! You can simply drag as well as drop the item in any order you like. 

You can repeat this step till you make all items in your custom menu look reasonable. 

Create Nested Drop-Down Menus on Your Site

Beginners may not clearly understand what the nested menu is. In fact, it is also the drop-down menu. In WordPress, the nested menu is also the navigational menu including parent item and child menus. Normally, nested menus are styled by themes in the way that as a user put his mouse on a parent item, its sub-menus or child items will be all displayed.

When you are created the nested menus in WordPress, you can add a well-organized navigation system to the website. We have now how to add a custom navigation menu on your site, but how to add menu items to be sub-menus?

On the screen of “Menu Structure”, you can directly drag a menu item beneath the parent one and then drag that item to the right slightly. You will find that WordPress has made it a sub-menu item automatically.

You are allowed to add more than one layer of the sub-item menus to build up deeply nested menus. Nevertheless, you need know that not all WordPress themes allow you to create multi-layer nested drop-down menus. Mostly, they support 2 layers.

Add Categories to Your WordPress Menus

For WordPress users, you can add categories to your menus easily, like adding a drop-down in WordPress menus. 

Normally, WordPress can give you an easy way to add categories and pages in left columns on “Menu Editor” screen.

Click on “Categories” and you will get the expansion of it. And then you will find the your categories below. Just choose the categories you plan to add to your menu, and then press the button of “Add to Menu”. 

After that, the categories just added will appear like the menu items below your menu structure column. Simply like your pages, you are able to drag as well as drop those categories to arrange the positions in your menu. In our demo site, we will drop all blog categories to make them look like the sub-menus under “Blog” parent menu.

Add Custom Links to Your Navigation Menus

After adding categories to your menus, you may want to add links to your social media profiles and other locations. At present, you can take advantage of custom link option well.

Click on “Custom Links” tab in the column of “Edit Menus” which will make the tab expand. “Custom Links” has 2 fields: “URL” and “Link Text”. “URL” is the place requiring you to add the real link you need add; “Link Text” is the filed for adding the link’s anchor text.

It is noticeable that all links must start with “https://” or “http://”. If it is not, then your link is broken. 

Edit a Menu Item in Your Navigation Menus

WordPress will automatically utilize the titles and names of the pages and categories you manually added to the custom navigation menus to be the link text. However, you can still make changes on it.

WordPress allows you to edit each menu item by directly clicking on the downward arrow that is next to the menu item.

It enables you to change the menu item’s link text or the navigational title. Besides, you can add a tile attribute to that link. In the end, click on “Save Menu” and then you visit your site to check the preview.

Remove Links from WordPress Navigation Menus

You have known the way of adding custom link to your navigation menus, and here we will tell you how to remove links from your navigation menus. Click on downward arrow next to one menu item, and there is a “Remove” link in below. Click on the link and the link to the menu item will be removed.

Add Navigation Menus in Sidebars & Other Widget-Ready Areas

In some cases, you may need to add your navigation menus into your sidebars and other widget-ready areas of your WordPress themes. 

You may find that there are some websites have social links or sites added by using menus in sidebars.

WordPress enables you to add menus in sidebars via widgets. Just visit “Appearance” >> “Widgets” page with two columns as well. The left one has many widgets available. You can directly add “Custom Menu” to your sidebar.

Then, in the widget editing area, give a title for this widget heading, choose a custom menu of yours by using the drop-down list next to “Select Menu”, and finally save these widget settings. 

After that, you can go to your site to view your custom menus appeared in your sidebar. 

About the social media icons, there are some WordPress themes that have pre-built ones in menus. Or, you can choose to make use of WordPress plugins such as Menu Social Icons to add them in the navigation menus.

That’s all. This guide has talked almost every detail of easily creating your WordPress navigation menus. We hope you can use these techniques to make your own well-structured and proper WordPress navigation menus. 

Tagged with:

We hope webmasters to share and promote the good articles ,Please click herecontribute

You need to log in to commentLogin|Register

All Comments(3)

2018-06-04 17:15
Hi, Thank you, guys. It takes me a few minutes to create a WordPress site. But then I encounter a problem how to add navigation menus in WordPress. This useful article provides a professional answer. So far, your website has helped me a lot . For example, I have learned how to start a website with WordPress under your guidance. Again, thanks for your efforts. 
[Reply]
[UnReply]
2018-06-12 11:43
I have learned much knowledge from your plenty of useful articles. Under this guide, I have the ability to create a nested menu. The good appearance can help me deliver a better user experience. Frankly, I couldn't imagine that before reading this article. 
[Reply]
[UnReply]
2018-06-15 11:48
In fact, it is advisable to style the WordPress navigation menus for a better user experience. Editing CSS Code and using a plugin are the two different methods to style it. Frankly speaking, beginners can take the CSS hero plugin into consideration. The price is worth what it can provide. 
[Reply]
[UnReply]