How to Change the Navigation Bar Items

UPDATE: 4th REVISION SEPTEMBER 2019

Changing your navigation bar items in WordPress is easier than you think – once you know where to look! In this article I’ll show you how to get exactly the pages and links you’d like – into that navigation bar. You can also find some tips for changing the titles or links only and best practices on naming your pages, menus and links. First – let’s look at creating a new menu.

Blog Navigation for WordPress

In WordPress, the navigation is completely separate from the pages and posts. Did you get that? Just because your page is called “My Story to Blogging Fame” doesn’t mean your menu has to use the same name. Instead, I would highly recommend “About”. Simple = better!

As long as you keep in mind that you’re not limited by page or post titles, you’ll have the freedom to create the navigation that serves your readers.

How to Change Items in the Navigation: Creating a new menu

Here’s a video walk through of exactly the same steps that are outlined below in text and images.

1. Go to Appearance – > Menus tab

2. Click on Manage Locations. If there are places built into your theme you will see them here.

3. Go to Edit Menus.

4. Create a new Menu.

5. Give it a name, and then drag Pages, Posts, etc into the Menu Structure Box. Re-order as needed. Save.

6. Go back to Manage Locations and assign your newly named Menu to a location.

Changing the Title of a Navigation Item

On this site, we have a page called “What they say”… that isn’t terribly clear that it is a page of testimonials. So in the navigation it is referred to as ‘testimonials’. Here is how we accomplished that:

1. Add the page “What they say…” to the menu.
2. Using the drop-down change the Title Attribute to “Testimonials”
3. Save.

Changing the Link of a Navigation Item

Let’s say you have a great title: “Shop” but your shop is on another site! This is how you would add that Shop link to your WordPress navigation:

1. Under “Custom Links”, copy and paste your shop link into the URL place. Paste the entire link to your shop, including https://www.yourshop.com
2. Change the Link Text to “Shop”.
3. Save.

Best Practices for WordPress (or any) Navigation

Any website has only a few seconds to make a first impression. The first principle of navigation is ease of use: it must be easy to find and use. The second principle for navigation bars is predictability.

[socialpug_tweet tweet=”The first principle of navigation is ease of use: it must be easy to find and use.” display_tweet=”The first principle of navigation is ease of use: it must be easy to find and use.”]

Ease of use

To make your navigation easy to use, use simple titles. Although you may have cute creative names for your pages, it is best to use clear concise words.

The navigation bar should always be top of the site and/or bottom of the page. It needs to be on every page. On mobile it can be represented by 3 small horizontal bars, otherwise known as a ‘hamburger’ menu. Or you can use a simple word “menu” with a downwards facing arrow.

TIP: always remember to design your mobile experience for ‘big man fingers’. The buttons and links need to be far enough apart for the biggest of fingers. Google loves a well designed navigation experience!

Predictable

[socialpug_tweet tweet=”You may have a cute ‘About’ page title, but in the navigation it should always say ‘About’ #blogging” display_tweet=”You may have a cute ‘About’ page title, but in the navigation it should always say ‘About’ #blogging”]

Just like the ease of use principle, this means you need to use clear concise language. You may have a cute “About” page title, but in the navigation it should always say “About”. Other items that should always be in your navigation bar:

• Home
• About
• Contact
• Blog or Services or Shop – depending on your purpose

Less is more at this point!! Have you heard of the paradox of choice? When presented with too many choices most people will make no choice at all. Give them a reasonable number of choices: 4-6 max.

Here’s a client’s take on her hesitancy to remove options:

I just wanted to say thank you… I was skeptical but followed your advice – and have made several conversions!!! ~ Suzy (Emptynestblessed.com)

Troubleshooting

1. How do I get a new menu location?
   Locations are created by your theme developer. If you want to try a bit of theme editing you can find a tutorial here.
2. My theme docs refer to adding a “Class”, but I don’t see that anywhere!
   Some items are hidden by default. Use the “screen options” tab in the top right to select any additional items you’d like displayed.
3. I can’t see any WooCommerce categories to add to my navigation – where are they?
   Some items are hidden by default. Use the “screen options” tab in the top right to select any additional items you’d like displayed.
4. How do I change the styles or colours?
   The customizer sometimes has a few options for colours. Other than that, you’ll need to get your toes into CSS tutorials.