In today’s tutorial I will cover WordPress navigation bar and you will learn how to design a truly functional bar for easy sailing through your WordPress blog. You will learn how to create primary and secondary navigation bars and how to create navigation menu with a dropdown option for your blog’s topics and subtopics.
This is an exciting lesson because when you apply what you’ll learn, you will vastly improve the way your visitors will be able to walk through and explore different sections of your WordPress blog.
What Is A WordPress Navigation Bar
WordPress navigation bar is the part of your blog just below the header. (There are some WordPress themes that have the navigation bar in the sidebar, but it is not common or recommended.) Navigation bar contains the tabs of all the different sections and subsections of your WordPress blog. It is a very important element of your site.
Well designed navigation bar and tabs ease the movement through your blog and significantly improve visitors’ and search engines’ experience. And, this is hugely important!
Image 1. An Example Of WordPress Navigation Bar
Each navigation bar contains a set of primary tabs which relate to the main topics of your WordPress blog. The subtopics are housed in the secondary tabs. The secondary tabs are contained within a dropdown box.
Image 2. Example of Navigation Bar Drop Down Box
As you can see, WordPress 101 tab on my site expands into a set of sub-topics in a dropdown box. The dropdown box is also known as sub-menu.
How To Create WordPress Navigation Menu
Before you can create a powerful navigation bar you have to have a strategy to display the topics of your WordPress blog in some easy to follow fashion. You need to have a list, in other words a menu, of the main topics your site revolves around.
To design a menu you can use Categories, Pages, and independent Links. To follow today’s WordPress tutorial, it is important that you understand the topic of post categories. If you are not completely clear about this subject it would be helpful to you to go through the WordPress categories lesson.
Throughout this WordPress navigation tutorial I will use categories examples from the demo blog DitaHelp.me. They are fitness categories and they are the same ones as describe in the WordPress Categories tutorial.
To begin the process of creating a navigation bar, access Menus Option from your WordPress Dashboard.
Image 3. Access To Menus Dashboard
In your Home Dashboard select “Appearance” to expand it and then click on “Menus”. You will arrive at a dashboard where you will be able to set up both, primary and secondary menus.
Image 4. WordPress Menus Dashboard Page
A newly installed WordPress blog, by default, will show no menu. You can start creating one by either adding a name in the name field or by clicking on “create new menu” in the top left corner. I named mine “Primary”.
Creating Primary WordPress Navigation Bar And Tabs
Let’s first create the primary menu. It will be placed on the navigation bar, right underneath the header (or just above the header in some WordPress themes).
After you enter the “Primary” name and click SAVE on the bottom of the page, WordPress will immediately create a new dashboard as shown bellow.
Image 4a. Newly Created Primary Dashboard
Step 1. Configure the settings.
On the picture above, notice the section “Menu Settings”. There you have 3 options:
- Auto add pages – leave the box blank. You do not want your pages added automatically after you publish them. It would just cause a lot of mess. You want to be able to add pages to your manually, and only the ones you deem important.
- Theme Location – Select the box labeled “Primary”.
- Social Links Menu – leave the box blank. This is a new WordPress option. Depending on the theme you are using, you may or may not see this option.
After you select the Theme Location, save the settings!
Step 2. Adding items to your primary navigation bar.
On most newly installed WordPress blogs, there is no navigation bar (see below). In order for it to appear on your blog, you have to add your chosen topics to the menu. They will become tabs or sub-tabs on your nav bar.
Image 5. Newly Installed WordPress Blog – No Nav bar
Tabs can be generated from titles of Categories, Pages, Links. You can also create special Title tabs that are independent of the list of categories and pages. They stand on their own. There is a little trick to create a stand-alone Title and I’ll share this trick later.
The first item you want to add is the Home tab. This will the home (front page) of your WordPress blog and the destination where people arrive at when they click your domain name. For example, this blog’s home page is: http://bloggingspree.com and the demo blog’s home page is: http://ditahelp.me
Creating Home Tab Using The Link Method
Note: Sometimes Home tab is generated by default when a WordPress blog is installed . If it appears by default, it reflects the “Front Page display” selected by default in the Reading Settings in your main Dashboard. If your installation shows Home, then leave it. Home tab is one what you want. You can always change the page Home links to at a later date.
Image 6. Adding Home To Nav Bar – Link Method
- Expand the “Links” window.
- Add URL of your home page.
- Add Link Text – Home
- Click Add to Menu
Image 7. “Home” Added To The Structure
As soon you as you click the “Add”button, the item will show on the list of items, on the right hand side. After you click “Save” the WordPress system will create a new tab on the navigation bar and the Home tab will show there.
Image 8. Navigation Bar With Home Tab On Your New Site
Generating Tabs Items Using Pages
Your default WordPress blog comes with one page called “Sample Page. For an example, I’ll use this page to create a Page tab.
Image 8. Adding Pages To The Menu
Tick off the page you want and click “Add To” box. The page will be added to the list. Save your changes!
Note: The “Pages” list is a list of Titles of your pages. Some titles may be too long and they would take too much space on your navigation bar, plus they would look ugly and unprofessional. Toward the end of this tutorial I will show you how to change the long Page names on the list of items to short names.
Image 9. Example Of A Page Tab On The Navigation Bar
After you saved the changes you just made a Page tab (in this case “Sample Page) appears on the navigation bar.
Creating Tabs From Categories
Using categories is the most popular way to create navigation tabs on your WordPress blog. For the rest of this tutorial I will use the demo site ditahelp.me, and the categories and sub-categories I use there. I will be using them to develop main and sub-level tabs in this tutorial.
Image 10. Adding Categories To Blog’s Menu
- Click on Categories drop down prompt (right hand corner) and expand the Categories window
- Click “View All” tab
- Tick off all the categories you want to include in the list. If you want all of them, click “Select All”
- Click Add to Menu
- Save the settings!
Image 11. Your Newly Created Menu List
Let’s see how it looks on the blog.
Image 13. Newly Created Tabs On The Demo Blog
As you can see, all the tabs are displayed on the home page. But there are too many tabs and instead of a single line, we have a double line, which does not look good on a website. It looks too crowded and too unprofessional!
Customizing Navigation Menu Items
To make the navigation bar more acceptable, we have to customize the list and create a dropdown list.
Creating Dropdown Box And Changing The Order Of Topics
First, let’s reorganize the order of the tab topics
Changing the order in which the items appear is very simple. All you have to do is drag the list item and drop it in the position where you want it.
Image 14. Changing the List Order
Creating a Dropdown Menu
To create sub or a dropdown menu also requires that you drag and drop your list items.
Instead of dropping it in line with the rest of the items, the sub-item needs to be dropped slightly to the right. In the same vein you can also create sub-sub-tabs (and a sub-sub-dropdown box).
Save your changes!
Image 15. Creating a Drop Down Sub-Menu
Let’s have a look at how the dropdown looks on the demo site. When I hovered over the Fitness Workouts on the home page of the demo site, there is a dropdown box.
Image 16. Drop Down Menu On The Home Page Of The Demo Site
Deleting Unwanted Items
We really don’t want the Sample page in the navigation. Over time it may happen that you too may add a tab and then change your mind. You will have to delete the tab. It is also simple to do.
- On your Menu list, click “Page” prompt to expand the window
- Click “Remove” to delete the item
Image 17. Delete Unwanted Items
Creating Stand-Alone Tab Titles
These tabs will appear on your navigation bar, but they will not be linked to pages or categories.Then you can create a list of subtopics and place the list underneath the title of the tab. The list will show as a dropdown when you hover or click on the Title tab.
This is useful when you want to place different categories or pages under one heading. For example, on Blogging Spree, I have a heading “The Chat”, which is a general heading. Underneath the title are several categories of varied and general nature. They can be seen when you hover over The Chat tab or click on it.
Image 18. Example Of Stand-Alone Heading
I created stand-alone “The Chat” title also on the demo site. To create it takes a little trick.
- First create a menu item using the link method (Image 6.) In other words: A a name you want the tab show. In the link box add a link. It can be any link, because you will delete it in the next few steps.
- Add the linked item to your list
- On the Menu list (right hand side) expand the new tab’s “Custom” window
- Delete URL
- Save the changes!
Image 19. Creating a Stand-Alone Item
Changing The Names Of The Tabs
We will do one more improvement. We will change the names of the tabs but we will retain the title attribute. What that means is that we can change the titles of the tabs to different names, but search engines will recognize the new names as the original category names we selected. (I know that it sounds convoluted but it is necessary to do and it is also very simple to do.)
The reason you want to do this is that the names on the menu may be pretty long and it won’t leave us much room to add additional items such pages, for example, Contact and About Us, without going into the second row. And, unfortunately, the default WordPress themes and even some premium WordPress themes do not offer us the option of creating additional menus, like the top one you can see on bloggingspree.com.
To change the title name:
- In the menu list expand the window of the item you are working on. In this example I am going to change the category name “Fitness Workouts” to “Workouts”
- Add the original category name (in this case “Fitness Workouts”) to Title Attribute field
- Change the Navigation Label to another word (I changed it to “Workouts”)
- Save changes!
Image 20. Changing Names Of Menu Items
Finally, the navigation bar on our newly installed WordPress blog is complete. Let’s have a look how the new customization looks on the demo site.
Image 21. Completed Navigation Bar
It looks pretty cool, doesn’t it? What is nice, is that there is still room to add a few more tabs. Since, at this time, the demo blog uses a WordPress default theme (Twenty Twelve), there is no option to add another menu bar, like it is on Blogging Spree, which uses a different WordPress theme.
Even though Twenty Twelve Theme does not have the option to create an other menu bar, I am not going to leave you hanging. I am going to show you how to add a top menu, in case your theme does have an option to do so.
Creating Secondary Navigation Bar (Top)
On Blogging Spree I have a secondary navigation bar above the header. I primarily use it for important, but secondary information. This allows me to have more space on my primary bar for the main and important topics.
Not all themes allow it, so if you are going to change a theme from the default WordPress theme, make sure this option is available on the new theme you choose (and particularly if you are going to buy a premium theme for which you have to pay).
Creating the secondary menu is just as simple as creating a primary one.
Step 1. In your Dashboard Click “Create New Menu”
Image 22. Creating a Secondary Bar
Step 2. Give it a name
Image 23. Creating a New Menu
In the “Menu Name” add the name of your secondary navigation bar. Make sure to save your new addition.
Step 3. Select your new menu to edit. Select the one called “Top”.
Image 24. Select The New Menu To Work On
When you make the selection a dashboard will open up.
Make sure that the “Top” is ticked off. From the list of items on the left (Categories, Pages or Links) add the ones you want to show on the secondary (in this case “Top”) menu list.
Image 25. Creating Top Menu List
Follow exactly the same steps as we went through above to create the primary navigation bar. Likely, you will only be adding pages to it, similar to what I have on my blog (Blogging Spree). If that is the case, go back to Image 8. and repeat the process. The only difference will be that you will be in the “Top” and not “Primary” dasboard.
Thanks for lasting through this long WordPress Navigation Bar tutorial. I hope this tutorial will help you create a navigation bar with tabs and sub-tabs that will be awesome and very useful to the visitors and search engines of your newly installed WordPress blog.