This past Wednesday I read this article about using icons to enhance your WordPress blog and I’ve also wanted to do so for quite a while. What I did first was search for small and good looking icons for my blog and they had to be small so that I could place them on the same line as the title and I was able to find this site which has a lot of icons hat are free and can be used non-commercially.

I looked through the icons and found the ones that I wanted and that also would fit with the categories that I use on my blog and came down to a list of 12 icons which will be used.

The next thing that I would need to do was to make it so the site would load the corresponding icons when a category in a post is used and I looked for possibilities of doing so. It turns out that there is a WordPress plug in that will basically do this so you’ll just need to manage the icon list from the dashboard so I gave this a try but it wasn’t exactly what I wanted and it didn’t seem to want to work with my blog and it even caused 503 errors because it was making too many connections.

Basically what I want is to have a theme that has all the possible features built in so that I can distribute it in the future with all of those features and using a plug in just doesn’t help with that idea. So I had to definitely hard code it into the index.php file of my blog so that it would automatically include them.

The code I used is:

<?php   foreach((get_the_category()) as $cat) { ?>
<a href="<?php bloginfo('siteurl'); ?>/category/<?php echo "$cat->category_nicename" ?>"
title="See all posts filed under <?php echo "$cat->cat_name" ?>">
<img src="<?php bloginfo('template_url'); ?>/categoryicons/<?php echo "$cat->category_nicename" ?>.png">
</a>
<?php } ?>

Now to break down the code.

First we need to create a loop, because WordPress allows for posts to have more than one category, which will go through each of the categories assigned to a post and run the commands inside the loop, in this case get the image for each of the categories.

<?php   foreach((get_the_category()) as $cat) { ?>

We call the WordPress function “get_the_category()” to obtain a list of all the categories that a post uses and store the value on a variable named “cat” and we’ll use the variable’s value to obtain the slug of each of the categories.

Next step is to add a link to the image we are loading so that when visitors clicks on the link they will be taken to another page which only shows posts within that category. Since the idea is to have the theme work on different WordPress blogs I used functions from WordPress that would give me the site’s URL so that we didn’t run into hard coding the URL and having to change the theme every time it’s used on a blog that’s located in another web address.

<a href="<?php bloginfo('siteurl'); ?>/category/<?php echo "$cat->category_nicename" ?>"
title="See all posts filed under <?php echo "$cat->cat_name" ?>">

We called the “bloginfo(‘siteurl’)” function to request the URL for the site, then add “/category/” to the URL and finally add the Category name in it’s URL friendly way. When the user clicks on the icon the URL will look like:

http://www.codebeta.net/category/photography

This is optional really but it’s rather recommended as users might want to click on an icon and expect to see only posts under that category.

We then need to load the image depending to which category is being used. There are several ways to do this but the easiest, in my opinion, is to name the image files with the slug of the category so that they are URL friendly and are easier to load. This is the option I went with thus naming my image files like:

comments.png
general.png
howto.png
life.png
new-project.png
news.png
photography.png
project-conclusion.png
project-update.png
project.png
side-note.png
trips.png
uncategorized.png

This way I can load the image with the following HTML and PHP code:

<img src="<?php bloginfo('template_url'); ?>/categoryicons/<?php echo "$cat->category_nicename" ?>.png">

The code above will form the URL of the image according to the Category Nice Name or slug and the resulting URL will look like:

http://www.codebeta.net/wp-content/themes/lmphoto/categoryicons/life.png

And that will load the image, in the example above, for the life category. Again keeping in mind that the URL of the site might change.

-LM