Weekend Project: Display Content On A Specific Category Page

April 22, 2011

When using categories to organize your posts, you may feel like a specific category requires a little something more. What we have in mind for you today is adding a note to your sidebar, only on the pages for one specific category, to tell your readers what that category is about.

In the screenshot below, a paragraph beginning with "Books are awesome!" has been added to the "Books" category of a blog. Only when the Books category is being read will that paragraph appear.

Before we begin, note that the tip we're sharing with you uses Javascript, so you'll need to make sure your browser has it enabled, otherwise you may not see the tip work as expected.

So, how do we get the default sidebar to look like the one in the above screenshot?

To get started, you'll need to take note of the URL for the category you want to add a blurb to. It should be formatted similar to http://example.typepad.com/blog/category_name/. If you use your own domain name with TypePad, mapped to your specific blog, you'll probably see something closer to http://www.example.com/category_name/.

Next, you'll need to use the Embed Your Own HTML module to house the code that needs to be added. Once you've clicked to add the module on the Design > Content screen, you'll be prompted to add a title to the module to remind you what it is, then add the code provided below.

In our example above, we used the following code:

<div id="booksCategoryDiv" style="display:none; background-color: #fff; padding:5px 15px;">
   <p>
      <b>Books are awesome!</b> They frequently teach us things, take us out of our everyday, and they smell good. Yes, books smell good. In these pages you'll be able to read about the books I've picked up, put down, and what I thought of them.
   </p>
</div>

<script language="javascript">
var pathis = window.location.pathname;
new_array = pathis.split('/');
subdirectory = new_array[2];

var CategoryDiv = document.getElementById("booksCategoryDiv");
    if ( subdirectory == "books" )
    {
        CategoryDiv.style.display="block";
    } else {
        CategoryDiv.style.display="none";
}
</script>

To use this for your blog, you'll need to change the reference to "books" in this line:

if ( subdirectory == "books" )

to the category name, as it appears in the URL for that category. If your category URL is http://example.typepad.com/blog/knitting/ then you would replace "books" with "knitting".

In our above knitting example, the next step would be to replace references to "booksCategoryDiv" with "knittingCategoryDiv". Make sure the first letter of that reference is lowercase (e.g. "knittingCategoryDiv" NOT "KnittingCategoryDiv").

Note: If you use Domain Mapping with your blog, and it's mapped directly to your blog instead of your account, your categories will be one sub-folder deep instead of two. If that's case, you may need to change:

subdirectory = new_array[2];

to:

subdirectory = new_array[1];

Once you've made the above changes, you'll need to edit the content that's going to display on the category page. In our code above, we used:

For your purpose, though, you'll want to edit the text between the <p> and </p> tags so that the content is custom to your blog and category. So long as the opening <div> and closing </div> tags are in place, you could even go so far as to remove the <p> and </p> tags. It's possible to even add an image in there, like:

<div id="knittingCategoryDiv" style="display:none; background-color: #fff; padding:5px 15px;">
<img src="https://example.typepad.com/image.jpg" style="clear:right;padding-top:5px;" />
<p style="padding:0px 5px;">
Browse my knit projects and posts about the yarn I fell in love with!
</p>
</div>

Which will look like this when it's added:

Once you have the edits in place, click OK to close the Embed Your Own HTML module, then click the Save button on your Content screen to save the changes to your blog. The final step will be to view your blog, then click the category link the content is associated with and verify that the new module displays on that page!

And that's that! You'll have officially turned your general sidebar into a content-specific sidebar for a category of your choice. With a small code tweak you'll get big impact!