Having the right navigation menu on your site is as essential as having good content to engage your readers. An easy to use menu allow your readers to navigate on your website quickly. Plus, you can target your readers to visit specific content easily.
On the other hand, if you don’t have a well-structured navigation menu, your visitors are unlikely to return in the future.
So, it is essential to have an intuitive and well-organized menu that makes your users find what they are looking for on your site. In this tutorial, I’ll guide to create a menu, how to organize them, and place them at different locations. Besides, I’ll also discuss the hidden gem Menu Properties and how to use them.
Let’s get to work!
- 1 Navigation Menus in WordPress
- 2 Creating a Navigation Menu in WordPress
- 3 Adding Categories, Tags or Posts to WordPress Menu
- 4 Adding Custom Links to WordPress Menu
- 5 Arrange Menu items in WordPress
- 6 Creating Nested Dropdown Menus in WordPress
- 7 Delete and Rename Menu items in WordPress
- 8 Menu Properties in WordPress
- 9 Choose your menu’s location
- 10 Adding Navigation Menus in Sidebar and Widget Areas
- 11 Final Thoughts
WordPress comes with a navigation menu system that makes it easier to create and manage menus. Depending on the theme you’re using, the location of the menus varies. Some theme accommodates multiple menus, while some stick with a single menu location.
The process of creating a menu is the same irrespective of menu location. However, your menu items vary depending on the menu location. If you are confused, don’t worry, you’ll understand later in this tutorial.
As mentioned earlier, WordPress comes with a navigation menu system. You can create menus in WordPress by navigating to Appearance > Menus from your dashboard.
Now, you will be taken to the Menus screen, as shown above. On the left, you will see all your pages, posts, categories, and custom links. On the right is the place where you will create and add menu items.
To create a menu, type the menu name, and click on the Create Menu button. You can name it as you like.
Once you create a menu, the screen refreshes. Depending on the theme you are using, you will get different menu locations. In my case, it has three locations, Primary, Footer Menu, and Social Links Menu.
Now that the menu is created, it’s time to add some menu items from the left column. You can do this by selecting the pages listed on the left column and clicking on the Add to Menu button.
After adding the pages to the menu, you need to choose the theme location (the place where you want to display your menu). For now, select the Primary and then click on the Save Menu button. You can change the menu location later on.
Now, you can visit your site to see the changes on your website. You will see the menu add in the header, something like shown below.
The styling may be different depending on the theme you are using.
WordPress Navigation menu system is not limited to pages only. You can add categories, tags, posts, and custom post type items in your menu. The process is the same as adding pages.
On the left column, click on the tab from where you want to add menu items. For this example, I will add some categories.
You can follow the same process for posts and tags. Isn’t that easy?
Adding the categories, posts, and pages are easy as you created them and are listed on the left. But, what if you want to add a link to another website like appointment site or social media profile. This is when the custom links option comes handy.
To add a custom link, click on the Custom Links tab to expand it. Here, you will see two fields. One for the URL and the other one for link text. In the URL field, enter the URL of the website you want to add. For the link text, add the relevant anchor text.
You must add the custom links starting with either http:// or https://. If you don’t, it will throw an error.
At this point, you have successfully added the necessary menu items. By default, when you add a menu item, it appends at the end. Don’t worry, you can rearrange them in the order you want.
To change the position, simply drag and drop a menu item to your desired position.
Repeat the process to adjust the position of each menu item. Once you are done, click on Save Menu.
Nested menus are also known as dropdown menus. Dropdown menus can be used to represent the hierarchy or group similar menu items together. For example, under Travel, you can add categories like France, Spain, Australia, etc.
Creating nested menus allow you to accommodate many menu items together. The sub-menus appears when you move your cursor to a parent item.
To create a drop-down menu, simply drag the menu item below the parent item and slightly drag it to the right. You will notice that it automatically indents and become a sub-menu item.
You can create multiple layers of sub-menus by nesting the menu items. However, I suggest you not to exceed more than two layers as the most theme doesn’t support it. Plus, it makes it too complicated to navigate.
Don’t forget to hit the Save Menu button when you have made any changes.
When you add menu items like pages, posts, or categories to your navigation menu, WordPress automatically uses the page title, post title, or category name as the link text. In some cases, you don’t want to display as it is and change as per your need.
You can change the link text with your custom text without affecting its link. Further, you can also delete the menu item if you don’t need it.
All the menu items can be edited by clicking on the downward arrow, as shown in the screenshot below.
You can also add a title attribute to the link and configure other menu properties( covered in the latter part of this tutorial). Don’t forget to click on Save Menu button to reflect your changes.
WordPress navigation menu system also comes with some handy and essential menu properties features. Many users are unaware of this. You can set the link target and add CSS classes, description, title attributes, and link relationships.
You can enable the menu properties from Screen Options, as shown below.
You must be wondering when can this be useful. Let suppose, you have added a custom link to another website. You necessarily don’t want your users to leave your site when they click on it. With Link Target property, you can set the link to open in a new tab. Similarly, if you want to add a button to your navigation menu, you can add a CSS class to your menu item. After that, you can style that CSS class like a button.
Let’s look at how to do it.
Once you enable the menu properties, you can access them by clicking on the downward arrow located next to the menu item.
As shown in the screenshot above, you can checkmark the option to open in a new tab, add a CSS class to style it, and even add the description. Here’s a preview after styling a custom link.
The menu location is the place where your menu appears. All the theme comes with at least one menu location. Some themes even include multiple menu locations, like in my case. The theme I am using has three locations primary, footer menu, and social links menu.
You can create a different menu for each of these locations using the method shown above. To choose the menu location, go to the Menu Locations tab. Then select different menus you have created for each location.
You can leave the menu location blank if you don’t want to display any menus there.
WordPress menus are not just limited to specified theme locations. You can also add your navigation menus in the sidebar and other widget areas.
You can add the menus to the sidebar by using the Navigation Menu widget.
Don’t forget to hit the Save button to publish your changes.
A well-structured navigation menu makes it more accessible for your readers to navigate through your site. Plus, they can easily find the content they are looking for. It improves the user experience and increases your conversion rates. I hope this article helped you learn how to create a menu in WordPress.
Was this tutorial helpful to you? Do let me know if you face any difficulty setting up your menu. Please feel free to share your thoughts and feedback in the comment section below.