Tutorials

WordPress Menus

A navigation menu is one of the most important parts of any website. It’s placement and content are key to ensuring that your visitors can access the information they need easily without searching far and wide. Luckily, WordPress menus are super easy to access, edit and customise. Once you know how, it’s pretty simple.

Complete Guide To WordPress Menus | PIXEL BOUTIQUE | WordPress Tips and Tutorials

In this tutorial post, I’m going to cover everything from how to access your menus, adding, editing and deleting menus, and even how to create a multi level drop down menu for your website. So continue reading if you are in need of an easy to follow guide on WordPress Menus.

Accessing my WordPress menus

There are two ways that you can access your WordPress menus and both are equally effective and easy to use.

You can either use the WordPress Customiser: Dashboard > Customise > Menus or you can use the main Menus page, which I personally prefer: Dashboard > Appearance > Menus

Both have a pretty similar set up, but today I am going to cover the Appearance > Menus admin.

Creating a new menu

Your WordPress menu’s admin should look similar to the below. Click the Create New Menu link towards the top of the screen and you will be presented with a blank canvas to start creating your new menu.

Complete Guide To WordPress Menus | PIXEL BOUTIQUE | WordPress Tips and Tutorials

First you need to give your new menu a name. Just type the name you want to refer to this menu as, for example, “Top Menu” or “Main Menu”, into the text field. I’ll be creating a menu to display at the top of my website as my main menu, so i’m going to call mine “Main Menu”.

Click the blue button that reads Create Menu.

Now we can add some items to our menu and set it’s location on our website:

Complete Guide To WordPress Menus | PIXEL BOUTIQUE | WordPress Tips and Tutorials

On the left hand side you have all the dropdown lists full of items that you can add to your menu. Everything from pages, categories, and even custom links.

Click on one of the dropdown panels to reveal the items within that section.

Select which items you would like to be included in your menu, by ticking the checkboxes, and the be sure to click the Add to Menu button.

You should now see them on the right hand side. This is your menu.

Reordering Menu Items

The order in which your items are listed here, is the order they will be on your website, so be sure to reorder them if they don’t quite look right. It’s easy to reorder, simply click and drag the item you want to move, and move it up or down to it’s rightful place.

Menu Locations

Every WordPress theme should come with at least one menu location. This should be appropriately named to match the location it will appear on your website.

For example, I have three location names:

  • Primary: This is my main site navigation and will be placed at the top of my site. Sometimes this can be called ‘Main Menu’, or ‘Top’.
  • Footer: This is a menu area within my footer, at the bottom of my site.
  • Info: This is a custom location that I made myself, located also in my footer.

You may see menu locations named ‘Secondary’, ‘Bottom’, ‘Below Header’… etc. Each theme names locations differently, but they should be pretty self explanatory.

So, let’s go ahead and pick a location. As my menu is my “Main Menu” for my site, I Want it to appear in the top primary location, so I will go ahead and tick the Primary check box.

Complete Guide To WordPress Menus | PIXEL BOUTIQUE | WordPress Tips and Tutorials

Sub Menus

As we can see from the items in my menu above, it looks like a rather large menu, so let’s tidy this up a little bit and make it more manageable for our viewers by creating some sub menus.

Your WordPress theme should be styled so that sub menus automatically turn into beautiful dropdown menus – if this isn’t the case, get in touch with the developer to see if it’s something that they can help with or are looking to update in the future.

So, to create a sub menu, we simply need to drag our list items into place. 

For example, I have a page link called Portfolio, and page link called Dave March Audio. I want to make Dave March Audio a sub menu of my portfolio. I simply click and drag the Dave March Audio panel slightly to the right to indent it:

Complete Guide To WordPress Menus | PIXEL BOUTIQUE | WordPress Tips and Tutorials

I’m going to do the same with some more of my items that I want to sub (below). Notice how I moved the Troubleshooting link even further to the right. This means that Troubleshooting is now a sub menu of Theme Guides:

Complete Guide To WordPress Menus | PIXEL BOUTIQUE | WordPress Tips and Tutorials

Lets’ Save Menu and see what it looks like on our site:

Complete Guide To WordPress Menus | PIXEL BOUTIQUE | WordPress Tips and Tutorials

Ta da! We have 2 dropdown menus, which in my theme are represented with a + next to the parent item.

Renaming Menu Items

Ok, let’s go back to our Menus admin screen to Main Menu. We can easily edit the down arrow in the page items panel. This will reveal a drop box. You will see a text box with the links name in. Remove the current name and type in it’s new name.

Complete Guide To WordPress Menus | PIXEL BOUTIQUE | WordPress Tips and Tutorials

From here, you will also see some links to move the item up or down, or even out from underneath a parent item if this is a sub item that you are editing. Just another way of reordering, which I find long winded as you have to enter each item to move them, which is nowhere near as easy or fun as a good old click and drag.

Oh, and you can also remove an item from the menu by clicking the red remove link.

Don’t forget to Save Menu before exiting.

The end

And that’s pretty much it really. Not as hard as you thought? Everything is simple once you know how. I hope you found this somewhat useful, and feel free to drop a comment below if you have any questions.

Share the love:

Leave a Reply