How to Link a Menu Bar Link to a Label or Category

November 5, 2017

For our tutorial today we are going to explain how to link a menu link in your navigation bar to a specific label (Blogger) or category (WordPress) on your blog. We have posted several tutorials in the past about how to set up pages/a navigation menu on your blog (see Adding Pages to your Blog & Adding a navigation menu to Genesis Theme) but in them we do not cover how to go about linking the menu links to labels/categories rather than to pages.

Linking your menu links to labels/categories is helpful if you want to showcase all of the posts for a specific label/category when that link is clicked on from the menu bar. For example, you might have a link in your menu bar for “Parties” that when clicked on, you want to show a list of all of the posts you’ve added the “parties” label/category to. This tutorial will explain how to achieve that in both WordPress and Blogger.

In WordPress

Step 1. Go to your WordPress dashboard and scroll down to “Appearance”. From there, click on the “Menus” link.

Step 2. Scroll down to “Categories” and click the arrow to expand. Put a check mark next to all the categories you’d like to add to your navigation (note: categories must be in place prior to this step), and then click on “add to menu”.

Step 3. This step is optional, but if you’d like to change the name of your category just in the navigation, you can do this by changing the text under “Navigation Label”.

Step 4. Last, just pick where you want your menu to show up (primary or secondary navigation) and click “Save Menu” and you’ll have categories linked in your navigation menu bar.

In Blogger

First you need to make sure you have your labels in place. View this tutorial for instructions on how to add labels. Once you have your labels in place, you can follow these steps:

Step 1. Temporarily add the labels gadget to your sidebar by going to “Layout” > “Add a Gadget” and finding the “Labels” gadget.

Step 2. View your blog and find the new “Labels” section at the top of your sidebar. Click on the label you want to appear in your menu bar. This will create a direct link for that label in the address bar. Then copy the url in the address bar.

Step 3.  Go back to your dashboard and go to “Layout” > “Pages” > “Edit.”  Note: if you don’t already have the pages gadget added, follow this tutorial to add it. Then return to this step.

Step 4. Click “+Add external link.”  Title the new link and then paste in the url that you just copied for that label. Then click “Save Link.”

Step 5. Click and drag your new link to reposition where it falls on the menu bar. Then click “Save.”

Do this for each menu link you want linked to a label. Then you can go back to “Layout” > “Labels” > “Edit” and remove the labels gadget from your sidebar if you don’t wish to keep it there.

Removing “Showing post with label…show all posts”

You may notice a “Showing posts with labels…show all posts” box when you click on the new link as shown below.

It’s kind of an eye sore, so to remove it, follow these steps:

Step 1. Go to “Dashboard” > “Template > “Edit HTML.”

Step 2. Click anywhere inside the template code box and then open a search box by typing CTRL + F. The search box will appear in the top right corner of the code box. Copy and paste in this code:

<b:includable id='status-message'>

After you’ve found that code in the html, click the arrow next to it to expand the rest of the code.

Step 3. Remove this portion of the code:

<b:includable id='status-message'>
<b:if cond='data:navMessage'>
<div class='status-msg-wrap'>
<div class='status-msg-body'>
<data:navMessage/>
</div>
<div class='status-msg-border'>
<div class='status-msg-bg'>
<div class='status-msg-hidden'><data:navMessage/></div>
</div>
</div>
</div>
<div style='clear: both;'/>
</b:if>
</b:includable>

Step 4. Replace it with this one:

<b:includable id='status-message'>
<b:if cond='data:navMessage'>
<div>
</div>
<div style='clear: both;'/>
</b:if>
</b:includable>

 

Save the template and the box will be removed.

If you have any questions, please feel free to leave them in the comments section and we will answer them as soon as possible.