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

how to clean up your sidebar

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.

step1menu

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”.

step2categories

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”.

step3name

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.

step4save

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.

1

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.

2

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.

3

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.”

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

5Do 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.

6

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

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

7

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'>

11

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

8

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>

9

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>

 

10

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.

 
Blog Templates - Designer Blogs

Posted by: Erin


Comments

  1. Hi there Designer blogs,

    Thank you for all your great tips. Was wondering if you have any tutorial for the following:
    I have a blogger blob with a custom designed layout. How can I get posts that are labeled “Product Reviews” to automatically show on my “Product Review” page?

    Any help is much appreciated.

    Maria

  2. Katelyn says:

    I am trying to remove the portion Showing posts with label show all posts (Blogger). However I am getting this code: Error parsing XML, line 1510, column 14: Open quote is expected for attribute “{1}” associated with an element type “cond”.

    I am not sure what else to do, because when I go to save the template I get this and it does not save and take out that show all posts label.

    Please let me know what I am doing wrong.

    Katelyn

    • Are you sure you are replacing it with ALL of the second code?

      Try the tutorial again and just double check you aren’t leaving any parts of the coding out. If it still doesn’t work, please let us know.

  3. Thank you so much!! Also, do you know if Blogger allows you to add text to an external link you’ve added in the Pages app? For example, I added all of my labels under ‘Beauty’ to an external link for my navigation bar. I want to text my reader know more details about the posts that come up labeled ‘Beauty’. thanks! Carrie http://www.carriescreations.net

  4. this tutorial is more helpful to new bloggers like me Thank you…

  5. Rebecca Victor says:

    Hi,

    Thanks so much, your blog was easy to follow and get the labels linked. I need help with linking submenus to the label. Could you help?

    Rebecca

  6. Dionne says:

    Hi! I recently purchased the Charlotte Premade theme. I think I have set up a sub-menu (with categories) on my back-end but for some reason, they aren’t showing up on my menu on my page. Is it possible I have missed a step here?

  7. Thank you very much I’m looking for many days for this post. Finally ı found 😀

Speak Your Mind

*