Ultimate Guide To WordPress Menus Complete (With Pictures)

Last updated on August 1st, 2018 at 06:26 pm

Working with WordPress menus can be confusing, especially if you’re new to WordPress. That’s why I decided to write the ultimate guide to WordPress menus. My goal is to help you understand how to setup the navigation on your WordPress blog.

Your WordPress navigation is one of the most important elements on your blog. It helps your visitors find the content they’re looking for quickly.

The great thing is that WordPress makes it easy to create, change or style your navigation menu. I’m going to show you everything you need to know about using the WordPress menus feature.

So grab a cup of coffee and follow along with me.

I’ve created jump tags so feel free to jump to the section you need help with.

Here’s What You Are Going to Be Learning

Creating, Adding Links, Pages & Categories
Arranging Editing, Removing And Deleting Items
Renaming, Adding Multiple Menus And Managing Menus
Accessing Hidden Features

By the time you finish reading this post, you are going to be creating navigational menus that rock.

This is going to be a long tutorial as there is a lot to cover.

Let’s get started

Ultimate Guide To WordPress Menus

Accessing Your WordPress Menus

Log into your WordPress blog menus and scroll to Appearance >> Menus.

This will take you to your menus page. Now it’s time to start creating the navigation for your WordPress blog.

Creating, Adding Links, Pages, Posts & Categories

Creating Your First WordPress Menu

Click on the “Create a New Menu” link and you will be taken to a page where you can give your menu page a name.

You can call your menu anything you want to (no one will see the name). I usually call my main navigational menu Main or Primary.

Be sure to assign it a name that helps you remember which pages and posts are linked to it.

Adding Custom Links to WordPress Menus

At times you may want to add an external custom link to your navigational menus. It’s very easy to do and in order to do this you just add your link here.

Type in the full URL of the website. In the text link assign it a name, this name will be visible on your navigational bar.

Click on “Add to Menu” and it will add it to your menu. Don’t forget to save your changes.

Adding Categories

If you want one of your navigational menus to link to your categories, you can easily do that by scrolling to the categories tab.

Check the categories you want to add to your menu. Once it’s been added to your menu, you will have the option of naming it to whatever you choose. The name you choose will be visible on your navbar.

Adding Pages to Your Menu

So you’ve created a ton of valuable pages on your blog and now you want to add them to your navigational bar. It’s very easy to add your pages to your menu.

You will see all the pages that have been created on your blog. Choose the pages that you want added to your navigational menu.

Once you click on “Add to Menu” WordPress automatically adds them to your menu structure.

What if you don’t like the way that they are placed into your menu? I’ll show you later on in this post how to rearrange your menu. However, if you need to know how to do that now, click here.

Adding Posts To Your Menu

This works just like adding pages. However, this shows you all your published posts on your blog.

Select the post you want added to your menu by checking the box, then click “Add to menu.”

Arranging Editing, Removing And Deleting Items

You can choose which content you want to show your readers first by re-arranging the menu tabs. If you want people to stay on your blog longer, place your popular content first.

Arranging Items In The Menu

To rearrange your menus, click on the menu tab you want to move and drag and drop it where you want it to show.

Once you’ve placed them and have them looking the way you want, don’t forget to click on Save Menu at the bottom.

Creating Drop Down Menus

At times you are going to want to create a drop down menu, also known as nested menus. You may have seen sites that have posts that are related to their parent menu.

The navigational menus are created below the parent tab. Also known as a sub-menu.

If your blog is new, you won’t have to worry about this. However, as your blog continues to grow, you may need to create sub-menus to help you organize your content.

In order to do this you will just drag the menu you want to create as a drop down and drag it to underneath the parent menu.

Instead of placing it directly under, move it to the left a little. WordPress lets you know that it is a drop down because it says “sub item” on the tab.

Removing An Item From The Navigation

If you’ve changed your mind and no long want a specific item to display on your menu, you can remove it. Open up the menu tab of the item you want to remove.

Click remove to remove it form the menu structure.

Deleting A Menu

As your blog continues to grow you may realize that you no longer need a specific menu because you created a new one. This process will walk you through on how to delete a menu from your menu structure.

Deleting the menu does NOT delete your pages or categories from your blog. It only deletes the menu from your menu structure.

Open up the menu you want to delete and you will see the option of “delete menu.” This will permanently delete your menu.

Renaming, Adding Multiple Menus And Managing Menus

Creating Multiple Menus

WordPress allows you to have more than one menu. You could have a main menu, sidebar menu, footer menu or any other menu you want.

To add a new menu, you would just create a new menu like I showed you above. Take a look at all the menus I have on my local site.

As you can see you can have as many as you want. None of the menus will be live on your blog until you actually place them on your blog.

Managing Menus

To see all your menus you’ve created, click on the manage menus tab. This will bring up all the menus you have created on your WordPress blog.

Choose the menu you want to change, delete, rename or assign to your blog.

Managing Menus Via Live Preview

With the release of WordPress 4.7 you now have the ability to manage your menus via live preview. If you’ve ever worked with a live editor drag and drop builder you will love the fact that you can now see all your changes live right before your eyes.

To start using the live editor function with your menus, click on the “Manage With Live Editor” link at the top of the menus page.

Your front page will open up.

You can now setup your navigational menus and see how it’s going to look before you hit publish.

Live Preview Menus Options:

• Choose Your Primary Navigation
• Edit Menu: make changes to your menu.
• Reorder the Items: Click the arrows to choose down, up or create a sub-menu.
• Delete Menu: Quickly delete the menu.
• Display Options: Choose where you want your menu to show up.
• Menu Options: Automatically add your pages to your menu
• Create sub-menus quickly and easily

If you haven’t played around with this feature, I highly recommend cloning your live site to a local host or setting up a brand new WordPress installation to play around with them.

Managing WordPress Menus Via The Customizer

Accessing your menus from the customizer is easy. Go to Appearance >> Customize.

This is just another way to customize your menus via the live editor. It just takes a little longer to get to your menus from the customize tab.

So use the shortcut and click on “Mange with Live Editor.”

Accessing Hidden Features

Many people who are new to WordPress may not realize that there are some hidden features to managing or styling your menus.

You can choose what options you want to see while working with your menus.

Choosing What You Want To Display

You might be thinking that your menu options are totally different than mine. Maybe that is because you don’t know about the screen options page.

Inside of screen options, you can decide what options you want visible in your menu page.

For instance, if you don’t want your categories to display, you would just uncheck it.

Your choices may be different than mine because I am currently using the Thrive Architect. If you’re not using that plugin, you won’t see the ThriveBoxes Menu Trigger.

The standard options you can choose from are:

• Pages
• Posts
• Custom Links
• Categories
• Tags

If you no longer want to have the option to choose categories from your menu options, just uncheck the box.

This will remove the categories from your menu box options. Simply check it again if you want to add it back.

Styling & Customizing Your Menus

You even have the option of styling and customizing your navigational menus.

Inside of the screen options page, you will notice the advanced menu options.

Let’s run through what each one does so you get a better understanding.

Link Target: This opens the menu link in a new tab.

Title Attribute: Add a title attribute to your navigational menu tab.

CSS Classes: Give your menu a class name so you can style it later using CSS.

Link Relationship XFN: XHTML Friends network which is a simple way to represent human relationships. You can read more about it here. Personally, I’ve never used this before.

Description: Add a description for your menu tab.

Placing Your Menus On Your Blog

Now that you’ve created your navigational menus, it’s time to place them on your blog so people can navigate your site.

Let’s get your brand new menus on your blog.

Via the Menu Settings

You can automatically add menus from inside of your menus page. When you’re done setting up your menu structure, you can quickly make your primary navigation live.

pic via menu settings

This will place your primary navigation menu on your site. If you want to add all the pages you create from this point forward to your menu, check the “automatically add new top-level pages to this menu.”

I always leave this unchecked. I like to decide which pages I want on my navigation menu.

Via Manage Locations

Click manage locations tab and assign the menu you want to add as your primary navigation.

If you have more than one menu, click the drop down to see all your available menus.

Don’t forget to save your changes, otherwise your menu won’t show up.

Via the Live Preview

Open up the live preview and choose which menu you want to assign as your primary menu.

Adding Custom Menus

The custom menus widgets makes it easy to add menus to your sidebar and footer.

Let’s say you want to add your pages to your footer. You can easily do that by going to Appearance >> Widgets

Adding Custom Menus To Footer

If you created a menu that you want to show on your footer, you can do so like this.

This will place all your pages on your footer. If you want to make any changes to the menu, you would do that from inside the menu structure page.

Adding Custom Menus To Sidebar

The process is the same as adding a menu to the footer. However, this time you will just place it inside of the Primary Sidebar layout option.

The options of where you can place your menus will differ from theme to theme. This tutorial was based off of the Genesis Theme.

Final Take Away

I hope that this WordPress menus for beginners tutorial helped you get a better understanding of creating and styling your navigational menus.

As you can see, it’s extremely easy to create a navigational bar. My main goal with this post was to help you understand the process of creating, adding, styling and working with your navigation.

Your WordPress navigation is an important part of your blog. You’re creating epic content and it’s up to you to make it easy for your readers to find it.

It’s important to learn how to navigate your WordPress blog. If you can’t navigate it, how do you expect your visitors to navigate it?

If you missed my in-depth WordPress dashboard tutorial you can read it here.

If you need help or have any questions regarding your navigation menu ask them below. I love hearing from my readers.