How to Add Categories to Your Postach.io Blog

In this post you're going to learn how to set up categories for your Postach.io blog. This will involve diving into your blog template and changing some code, but don't worry, I'll walk you through everything as we go.

Let's get started.

Postach.io doesn't have a native feature for assigning posts to categories, but you can assign tags to posts. It's this tags feature that you'll be taking advantage of to create the categories for your blog. You'll simply create a tag for each of the different categories you want for your blog, and then tag posts accordingly.

Before you get started, decide on what categories you would like your blog to have. You can always add or remove categories in the future should you need to.

First of all you're going to start by learning how to add category links to the header of the blog template. In order to update your blogs template you will need to access the Customize Theme tool in the Postach.io dashboard.

Now let's take a look at the code used to create a category link. Here you just use a simple HTML a element to create a hyperlink to the path of the tag page, in this case /tag/design. This page will display all of the posts with the design tag.

You may have noticed that there's some weird looking syntax within the class attribute for the link. This is a helper method provided by the templating system used by Postach.io. If the reader is viewing the /tag/design page, the set_active method will set the value of the class attribute on the link to active. This will allow you to style links for the current page differently to others.

In order to start adding the category links to the header you first need to locate the header navigation. Open the Source Editor tool in the Postach.io dashboard and look for the code that contains the navigation. This will usually be a ul element containing a series of li elements.

Once you've found the HTML code responsible for the navigation you can then start adding your category links. For each category you will need to first create a new li element. This adds a new item to the list of navigation links. Within this li element you can then add the code for you category link. This is the same as the code you examined earlier in this section, just be sure to swap out the name of the category in the href and class attributes, as well as the link anchor text.

Place the code for your category link after the first list item and repeat the process for any other categories. Make sure that you hit save before checking your blog to see the changes.

The HTML below shows the navigation section for the demo blog. Here I've added four categories after the initial list item.

In addition to adding your category links to the header of your blog you may also want to add links to the sidebar. In this section you're going to learn how to do just that.

Start by opening the Source Editor for your Postach.io blog.

Next you need to locate the HTML code that is responsible for displaying the tag links in the sidebar. This is usually towards the bottom of the blog template and will be surrounded by {% if site.tags %} and {% endif %} tags.

Now that you've located the tags section within the blog template, you can start adding your category links. First create a nav element with the class categories. This will contain the list of category links and a header.

Next create an h4 element with the text 'Categories'.

Now add your category links. First create a ul element and populate it using the same category links you used in the header (including the li elements).

The code within the {% if site.tags %} tag should now look something like the following.

I added another h4 element above the original tags list to help differentiate between the Categories and Tags sections.

You've now got links to each of the categories within the sidebar, but they don't look very appealing. We can fix this using CSS.

Go to the top of your blog template and copy the following code just before the closing head tag. This will apply some styling to the category links you just added to make them a bit more attractive.

Notice that one of the rules targets links with the active class. This styles links for the current page a little differently to the others.

In this post you've learnt how to add categories to your blog by taking advantage of the tags feature provided by Evernote and Postach.io. You've also learnt how to customise your blog template, adding custom code that displays links to each of the blog categories.

The source editor is a powerful tool that gives you the ability to customise the look and feel of your blog. I recommend that you check out the Postach.io Help Section for more information about customising your blog, including how to build your own custom themes.