Tokyo Train Navigation Menus
© atsunori kohsaki, Tokyo Colorful Navigation, via Flickr

It’s important to make it easy for your blog’s visitors to know where they are supposed to go.

Therefore your blog’s navigation area, wherever it is placed, should be informational, enticing and easy to understand.

And if you’re confined for space, using the right kind of words and how they are presented could make a difference whether your visitors click or not.

Take control of your navigation

My last post was about how to order your blog’s navigation tabs, and the post before that was about how a homepage provides a home tab on your navigation bar.

This post is all about navigation menus. This is when you can create navigation tabs that link to your pages without necessarily containing the page titles in full.

This can be very useful, especially if your pages have long, descriptive headlines, but you don’t want these to show in your navigation bar.

For example, look at my navigation area:

Navigation bar

You can see the tabs consist if single words. The ‘Learn’ tab goes to a page with a longer title:

Learn about blogging page showing a longer title

Which if it was in full in the navigation bar, it would take up too much room.

Not every theme allows an extensive navigation area, and sometimes it can look unprofessional if your navigation goes over onto another line because of lengthy tabs.

Let me introduce you to navigation menus

Creating navigation menus can be done in both and in self-hosted blogs.

They are found in the ‘Appearance’ area. First go to your Dashboard via ‘My Sites’ and then select ‘WP Admin’:

My Sites drop down menu

or if you’ve got a blog, via the drop down menu from your blog’s name:

Getting to the Dashboard

And in the Dashboard left sidebar, find ‘Appearance’ and then select ‘Menus’ from the drop down menu:

FInding Appearance and selecting Menus

You will now see the ‘Edit Menus’ page with no navigation menus in it yet:

Edit Menu page with no menus

The first thing to do is to create a new navigation menu by giving it a name:

Naming your first menu

Something simple like ‘Main Menu’ is very suitable. This will become the main navigation bar you will see at the top of your blog.

Once you’ve clicked on the ‘Create Menu’ button, your Menu Structure will be activated and ready to receive its page links:

Main menu ready to receive pages

And the Pages area has become activated too:

Pages menu activated

Here you can see all your pages listed. If not, click on the ‘View All’ tab to see a complete list.

Select the pages you want to include in your main navigation bar:

Select the pages wanted in the navigation bar

And once you’ve clicked the ‘Add to Menu’ button, they will show up in the Menu Structure area:

Allocated pages showing in menu structure

Note the ‘Home’ tag has taken second place.

Obviously this should be at the top. So take your mouse and simply drag the ‘Home’ tab to the top of the list:

Moving the home tab to the top

When you do this, you’ll see a dashed area appear where the ‘Home’ tab will be dropped into.

Make sure these dashed lines are aligned as far left as they can go. This will maintain the tab’s priority over the others, and keep it as a ‘parent’ link.

I will explain more about ‘parent’ and ‘child’ links in just a second.

Meanwhile, rearrange the rest of the tabs in the order you prefer, making sure they are all aligned fully left:

Tab alignment complete

Important: tick the ‘Primary Menu’ option in Theme locations (this confirms that this menu is for the main navigation bar at the top of your blog), and then click the ‘Save Menu’ button.

You will see when everything is completed through the confirmation at the top of the page:

Confirm Main Menu updated

Now what about this ‘parent’ tab?

I have already discussed the relationship of parent, children and grandchildren links earlier in my post about categories, and the same concept can be applied to your navigation menus.

If you mouse over my ‘Blog’ link in the navigation bar of this blog, a drop down menu appears showing my categories:

Showing child tabs in a drop down menu

These categories are ‘child’ tabs leading from the ‘Blog’ tab which is their parent.

This is how they are created. Let’s take the ‘Hire Me’ page and make it a child tab of the ‘About Alice’ page.

In the Pages section, select the ‘Hire Me’ page:

Select the Hire Me page

Once you’ve clicked the ‘Add to Menu’ button, it is automatically placed at the bottom of the list in the Menu Structure area:

Hire Me page at the bottom of the list

Now you need to drag this tab into its correct place.

Since this is a ‘child’ tab, it needs to be indented underneath the ‘parent’ tab. Note where the dashed lines appear and place the tab just a bit to the right before you let go of the mouse:

Drag tab into child position

And then you will see that the ‘Hire Me’ tab is classified as a sub item:

Shows Hire Me as a sub item

Don’t forget to click the ‘Save Menu’ button when you’re happy with your ‘child’ tab’s position.

Check out your new navigation bar with is child tab. Go to ‘My Sites’ and select ‘View Site’ from the drop down menu:

View Site link in dashboard sidebar

And for blogs go to your blog’s name and select ‘View Site’ from the drop down menu:

View Site on a self-hosted blog

And view your ‘child’ tab by mousing over the ‘parent’ tab:

Viewing the new child tab

But you used categories for your child tabs on this blog

Yes, I did, well spotted.

If you look at the bottom of the Pages section, you will see options for Links and Categories (and Format, but you needn’t worry about that one):

Locating Links and Categories tabs

Let’s look at Categories first.

If you click on that section, it will open up to reveal the categories you have chosen for your posts (see my categories how-to post to find out more about these):

Showing categories tab options

And the principle is the same. Select the category you wish to appear under the ‘Blog’ tab:

Select a category tab

And position it as a ‘child’ tab:

Position category as a child of blog tab

You can see that it is shown as a Category tab.

The Link section allows you to create a navigation tab that directs your reader to an external website. Click on it to open it:

Showing external link tab option

In the ‘URL’ field enter in the external website or blog’s URL or web-address, and the ‘Link Text’ field contains that tab’s name or description:

Filling in the external link tab

And after you’ve clicked the ‘Add to Menu’ button, it will appear at the bottom of the Menu Structure list:

Showing custom tab in Main Menu

And you can see it is termed as a Custom tab.

But how do the tabs only have a single word?

You saw in the Link tab option that I could name it before it was inserted into the Main Menu.

You can name the other tabs as well.

Click on the ‘About Alice’ tab to open it up:

Open the About Alice tab

In the ‘Navigation Label’ field, you can rename the tab to whatever you want:

Renaming the navigation tab

(And you can also see how you can ‘Remove’ the tab if you don’t want it in the Main Menu any more.)

Click on the little triangle by ‘Page’ at the top right of the tab to close it:

Triangle to close tab

And your newly named tab will be revealed:

See newly named tab

Now finish renaming and rearranging all the other tabs to whatever you want:

Perfected Main Menu

Click the ‘Save Menu’ button to stop you losing what you’ve just done, and then go and inspect your new navigation tabs:

View new menu in place

I hope you approve!

The next How-To post in this series shows you how to create another version of navigation menus for your blog’s sidebar.

About the Author

Alice Elliott

Alice Elliott writes the Beginner Bloggers blog for beginner and post-beginner bloggers to “explain things really simply” about blogging and WordPress. She specialises in simple, easy to understand, highly visual courses and tutorials using ordinary, everyday words. Why not also visit her award winning Fairy Blog Mother blog to learn some more.

  • {"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}