Category: Tools and Tutorials

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!

One of the neat things about WordPress is that a non-programmer can add personalized tweaks fairly easily, with a basic understanding of nesting. The trick is to find what something is called and simplify goals. Simplification is often a matter of not requiring special treatment for specific situations, unless that is something you already know how to do. Of course, once you know a thing it becomes infinitely simpler to accomplish.

In this case, I wanted avatar images to appear automatically at the top left of a multi-authored Kubrick-based theme. I wanted the “Pages” content to be associated with the site as a whole, not with any individual writer. Guest blog authors have their own WordPress user accounts. Some posts are attributed to site staff and can be represented by a logo. Already, that gives me a few places to start.

WHAT: an image

<img src="filename.jpg" />

When doodling about how to accomplish something, I like to start on familiar territory, as simply as possible.

To make it easier to keep track of my images, I created a folder called avatars, and placed it in the wp-content folder. Using <?php echo get_option('home');?> to define the root domain of the blog makes this bit of code reusable, should I want to use it for another site. The result is an as-yet undefined file name with a URL that looks like this:

<?php echo get_option('home');?>
/wp-content/avatars/filename.jpg

WHO: post authors

Next I decided how to tell WordPress to display a specific image for each author. Because all authors have a user ID, which image to display can be taken care of by associating the image with the user ID of the current post’s author. I looked in the file “/wp-includes/author-template.php” to see how WordPress defines things author. This is also how I found the code I used to define my alt descriptions.

The result is a file name that looks like this:

<?php the_author_ID(); ?>.jpg

For this to work, the avatars folder I made in the last step needs to contain an image for each author ID that is named to correspond to that ID. The file name “1.jpg” would be inserted by WordPress when the person with ID number “1” is the author. You can find author ID numbers listed by user names, under the Users tab.

ALT: describe the image

Following the same logic, I chose to use the following to automatically create my alt descriptions:

<?php the_author(display_name); ?>

Easy peasy.

HOW: control image styling

Add a class to your stylesheet that will control and enhance image styling.

I like to float author avatars to the left and give them a little padding and a border. Below is the css I used for the image at left.

 
.avatar {display: inline;
         float: left;
         padding: 4px;
         border: 4px solid #efefe7;
         margin: 5px 10px 7px 0px;}

 

WHERE: choose placement in template files

The following will work in Kubrick-based themes, as well as many others. Your own theme may have design elements that require a little tinkering, or even have different template files.

To place an author avatar only in blog posts, add the code below into index.php. Do the same in page.php if you also want avatars on static Pages.

Add these lines just before <?php the_content.

<img src="<?php echo get_option('home'); ?>
/wp-content/avatars/<?php the_author_ID(); ?>.jpg"

class="avatar" alt="<?php the_author(display_name); ?>" />

And that’s it.

Hat tip to CodeHighlighter plugin by Wongoo Lee.