How to create custom menus in WordPress

Recently a new version of WordPress has been updated. Although there are no significant changes to the end user, it is true that some functions or features, as the dashboard, have been changed. Let’s see step by step how to create and manage menus on a website with WordPress if your template or theme installed supported it.

This tutorial is useful for both WordPress.com users (free version without your own domain) and WordPress.org users (WordPress hosting using your own domain, more professional.)
Let’s see the following sections:
1. The WordPress menu
2. How to create your own WordPress menu
3. How to add sub-level menus in WordPress
4. How to locate the menu in the header or footer

1. The WordPress Menu

Menus are a key part of any web design or blog, considering that it serves to visitors and users of the site as a navigation system to access to the content. The better the menu design is structured, the more satisfactory the navigation for users and customers to your website will be. Never forget this; always try to make things simpler for your visitors, they will thank you.

Ideally, you can access the content through the navigation menu, however, as you may have noticed, when a site begins to have some content, it is very difficult to place all these pages, sections, articles and categories on your WordPress menu.

Therefore, it is necessary to have a menu that allows us to locate drop-down menus and sub-menus where to place child elements or categories depending on the main category, but without collapse, as in the picture, your site with infinite drop-down menus. It is therefore essential to have selected a good navigation strategy; so as we always say, first take a pencil and a paper and think.

Likewise, if you have a WordPress blog, it is also very positive to have a good strategy combining categories and tags to browse your blog with ease and efficiency. If you are interested in this issue, in this other tutorial we will tell you how to optimize correctly categories of your blog.

Last but not least, we must be clear about the location of navigation menu before creating it, because as you know, there may be a menu in the header, the footer, or even in the sidebar. Most of the time, it depends on the template you are using in WordPress (you can see our templates designed by us here and tell us what do you think,) but it is usually placed in the header. If these concepts are not clear to you, it might be good for you to read this article about the basic structure of a website in HTML5

2. How to create your own WordPress Menu

Okay, get down to work! The first thing you need to do to create your menu is to access to the dashboard of your WordPress. We illustrate this example with one of our WordPress themes, in this case Meadow, a blog style.

Once you are inside the dashboard, click on “Appearance” on the left sidebar of your WordPress. After clicking, a menu where you will have several options (Menus, Widgets, Themes …) will be displayed. We are interested in Menus, so click on “Menus.”

Perfect, you have already accessed to the dashboard. As you can see, and this is the novelty that incorporates the new version of WordPress regarding the dashboard, you have two tabs:

• Edit Menus: a place where you can create and organize your menus. As you will see below, you can create as many menus as you want.

• Manage locations: the second tab is the next step once you have created the menu, as this is where you choose where the menu you have created will be placed (in the header, footer, sidebar, etc…)

So, back to the tab “Edit Menus” we will create a new menu with the name we want, in our case we will call it “silocreativo.” Once created, you can start to fill the content menu. As you have seen, WordPress makes it easy: on the left you have some boxes with the content you have posted, i.e. your articles or post, pages, categories…

Now you just need to click the “Add to Menu” button to add your selection(s) to the menu that you created. These items are automatically organized. Perfect, you have created your WordPress menu, with your name and the content you want.

3. How to add sub-level menus in WordPress

Now you have to organize your menu and create sub-menus and sub-levels in order to have drop-down items. As you can see, articles and pages you have added and now appear as a bar are draggable. Just click on one of them, and without releasing the mouse button, move them up or down to sort them into your menu.

Similarly you have moved up and down menus, you can move them slightly to the right, to leave a blank space in front of the bar. What we are doing is setting the menus and sub-menus. You can create as many sub-levels as you please, but do not abuse them or your users will not see the contents of your blog or website properly.

Likewise, you can change the text that will appear in the menu, because although your article or page calls “Home,” you can change the name, affecting only what is shown in the menu.

An important question is that submenus are only displayed when you go over the parent item with the mouse. But, have you thought about what happens on mobile devices and tablets? Indeed, these devices have no mouse and can only click, so you will never see the drop-down menu.

The solution to this is “responsive design” (learn more here) a web design technique that allows your website to automatically adapt to the device used without having to generate more content or create any navigation menu.
As you can see, our Meadow WordPress theme , used for this tutorial, is responsive, so it adapts automatically if the visitor is a Smartphone or tablets user, making navigation easier and simpler without losing content. So now you know, if your WordPress is not adapted, install some of our WordPress themes with “responsive design.”

After making these changes, it is time to save them.

Advice: Sometimes we are interested in creating a sub-menu with all the categories (such as the example,) and as a main item or container we want to place an item called “Categories” that although we used it to group all categories, it is not a page or an article itself as it has no content. What happens if a user clicks on it? Where it would take you?

One way to solve this is to add a “custom link.” You can do it from one of the boxes on the left. In fields that you can fill, it is important to add a number sign “#” in the “url.” With this you ensure that the item has entity, the menu runs correctly, and that clicking on it, WordPress does not lead you to any pages.

4. How to locate the menu in the header or footer

Perfect, if you have reached this point, you already have practically created your menu. You just need to locate it on your website. Therefore, you must use the next tab “Manage Locations.”

Here WordPress will show you the possible locations that your menu can have. This mainly depends on the WordPress theme or template you have installed. If the template is two columns, with a sidebar on the left and content on the right, the menu will be located in the sidebar. If, however, the WordPress template that you are working with has a “header,” surely this is the point location.

In our case, we place the menu in the header, as it is the first space a visitor displays, and therefore the first thing that a visitor will use to navigate.
Once you have selected the menu to be shown, in our case “silocreativo,” it is time to store and display the result. To do this, click on the top bar “visit site” and observe how your WordPress menu is shown.

Advice: What happens if I change the theme or template having already created a menu? It is a very common question. Do not worry, the menu is saved in the tab “Edit Menus,” however, the menu will be decoupled from location. You just need to repeat this last step, locate the menu from your location, and save it to see again your navigation menu running on your new WordPress template.

Did you find this tutorial helpful? You can get more “step by step tutorials” and resources on this topic. Leave us your email address and we will send you new useful content. In addition, we would like you to share this tutorial on your social networks to help and reach more people like you. Thank you!

If you are interested in this content and want to be informed with more resources like this, I recommend that you create an account at SiloCreativo so we can notify you when we publish more articles like these:

Get all our content and tutorials for free and without spam