As you develop your Postach.io blog you may want to expand the range of topics that you cover. When this happens it can be really useful to split your blog into different categories so that readers can easily find the content that interests them.

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.

For the purposes of this tutorial I've put together a simple Postach.io blog with the following categories: Design, Web, iOS, and Android. You can view this demo here.

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 Source Editor tool in the Postach.io dashboard.

- Log in at http://postach.io

- Click the Edit icon for the site you wish to add categories to.

- Select the Source Editor tab.

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. Check out the demo to see this in action.

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.