WordPress Post Category Icons

When I started my blog last month I had planned to fairly quickly add three custom graphic elements. Category avatars were at the top of my list.

Category avatars are a nice way to automatically add visual interest to a blog that is mostly text. Author avatars help, but are not practical for a single-author blog where you’d see the same image over and over again.

These are from the graphics part last month’s wish list:

  • A nice feed icon
  • An avatar for each WordPress category
  • Think about holiday graphics

Looking back over my list, it occurred to me that I could do a quick temporary fix for all three with one operation. I can add code that associates an image with each category, and use holiday themed RSS feed icons for my images. The code part will be finished, and in a week or two I can make images to use long-term. All I need are some holiday themed feed icons that are large enough to work in an avatar-like space.

In my wanderings I found 12 free Christmas RSS feed icons that go with the dark red that I like. At about 100px square they’re the perfect size.

Adding the Category Icons

Because the_category_ID is depreciated, I don’t want to follow the same plan as in my post about adding WordPress post author avatars, where I used the author ID to select an image name.

According to WordPress, the_category_ID was replaced when posts gained the capacity for multiple categories.

Their example of how to replace the_category_ID will return the ID number of whichever category applies to the post you are viewing. If the post is in two categories, two ID numbers will be returned.

 
<?php
foreach((get_the_category()) as $category) {

    echo $category->cat_ID . ' ';
} ?>
 

Getting a list of categories associated with a post is not hard. What I wanted was one image associated with the specific category of the post. With the help of the WordPress Codex, these are the two solutions I came up with.

Category Images Using get_the_category

This one uses get_the_category and cat_name to show one image for posts that are associated with more than one category.

 
<?php $cat = get_the_category(); $cat = $cat[0];
 { echo '<img src="http://domain.com/wp-content/cat-img/' . $cat->cat_ID . '.png"
alt="' . $cat->cat_name . '" />'; } ?>

 

How does WordPress decide which category to use for the image, when there is more than one category associated with a post? In this case, the choice depends on what category name comes first in the alphabet. Check the list of category names in your WordPress post edit window and you’ll see that they are in alphabetical order, too.

This can be a little confusing, because permalinks don’t use the same method to name the directory associated with a category. When faced with a choice of more than one category, permalinks use the slug of the category with the lowest cat_ID number.

I want the image to match the directory.

Category Images Using elseif and in_category

Using in_category() and specifying which category goes with which image will give more control. Here I am manually choosing which image to display for the first two categories. In all other cases the image “3.png” will be used.

WordPress uses the category ID with the lowest number for both the category’s permalink directory and the image selected to associate with the post.

 

<?php if ( in_category(1) ) {
echo '<img src="http://domain.com/wp-content/cat-img/1.png" />';

} elseif ( in_category(2) ) {
echo '<img src="http://domain.com/wp-content/cat-img/2.png" />';

} else {
echo '<img src="http://domain.com/wp-content/cat-img/3.png" />';
}
?>
 

There may be a more elegant way. I am at the beginning of my journey into php. If anyone would like to offer feedback, please comment. Note — actual php is not allowed by the comment form.

Next Steps

Because a feed icon feels like it should be a clickable path to a feed, the images should be linked to my RSS feed. I chose to wrap each image tag in a link to http://ablereach.com/feed/ instead of an individual category feed, because there may be significant gaps between posts in any given category: this is a single person blog.

Next, I edited my style sheet to add some styling to float my images to the left, add a little space around them and eliminates any border.

 
.icons {display:inline;
        float: left;
        border: none;
        margin: 5px 10px 5px 0px;}

 

Then, all that remained was to add an alt to the images, a title to the anchors and paste the finished code into my theme. Happy, festive and finished.

Soooo, would anyone like to lay bets on my chances of finishing new category avatars before the jolly holly theme is hopelessly out of date?
;-)

One step at a time!

This entry was posted in Tools and Tutorials, WordPress. Bookmark the permalink.

2 Responses to WordPress Post Category Icons

  1. Timbo says:

    Thank, this works for me!

  2. Mike Kieffer says:

    I found this very helpful. Thanks for sharing.