Custom Category Icons

I mentioned in my new template post that I might add back the Category images to the posts. Well, I thought I would give it a try, but the first step was to see if something existed in the WordPress Plugin world.  There were a few options, but they either only posted the images on the Category template page or only did one image per post.  And all methods required modifying the template files. So, no go on that, time to re-add my original hack.

I had previously created a way to pull up the Category description and image in my old template. This script was old, as was my template, so I had to make sure that it worked with the new template.  Also, I attempted to see if I could put it into the new template without altering the template files.  The new template has a space to enter script before and after the header.  Unfortunately, that didn’t work.  It would have been a better way to do a customization like this, instead of modifying the template files.

My hack only adds an image to the Single.php template, which is where I needed it.  You could always add it to the multi-post page or other places, but I am only going to go over this one hack.  In the Single post template, I added the code before the side bar include. Depending on your template, you can put it almost anywhere on the page, since I use jQuery to make the change, but it needs to be after the “entry-title” HTML is loaded.

<?php get_sidebar(); ?>

The first thing you need to do is create images for each of your categories and put them in a directory that won’t change. You can use the theme directory or just upload them to the media library, as long as you have the same base URL for each image. They also all need to be the same file type and preferably the same dimensions. My images are 41×41, but I set the displayed image to 20×20. You will need to name them using the slug value for each Category, which you can find on the Categories page.  I also added a prefix of “category-“. For example: The general category image would be category-general.png

To get started with the code, you need to get the Post ID, because this will allow you to get the category for the post.

$postid = get_the_ID();

Once you have the Post ID, you can get the Category array for that Post.

$post_categories = wp_get_post_categories( $postid );

In my old script, the output string started different for single Category posts compared to multiple Category posts. In this version, I start both types the same, which shortened the code and made things a little less complicated.

// create starting string
$catImage = '<div style="float:left; padding-right:4pt;">';

With the string started, I loop through each Category and insert a image and the URL from get_category_link to the Category page. This will allow the user to click on the Category icon and see the other posts in that Category. The Category name is used as the image alternative and the title for the link.

foreach($post_categories as $c) {
	// get current category
	$cat = get_category( $c );
	// add category info to create image string
	$catImage .= '<a href="' . get_category_link($cat->cat_ID) . '" title="' . $cat->name
		. '"><img src="' . get_bloginfo('url')
		. '/cat-icons/category-' . $cat->slug
		. '.png" alt="' . $cat->name
		. '" width="20" height="20" /></a>';
}

After the loop is done, then I close the string with a end div tag.

$catImage .= '</div>';

Finally, the last step is to find the Post title and add the created HTML string to display the images. Using jQuery, not $(), because of how WordPress handles jQuery, I simply look for the “entry-title” class and append the string. Because I put a style in the div to float:left, I don’t need to prepend the code.

jQuery('.entry-title').append('<?php echo $catImage ?>');

Your template should also have “entry-title“, but you can place the image anywhere, just get the class or ID of the tag where you want to insert the HTML string.

Here is the full code.

<?php
	// get categories for current post id
	$postid = get_the_ID();
	$post_categories = wp_get_post_categories( $postid );
	// create starting string
	$catImage = '<div style="float:left; padding-right:4pt;">';
	foreach($post_categories as $c) {
		// get current category
		$cat = get_category( $c );
		// add category info to create image string
		$catImage .= '<a href="' . get_category_link($cat->cat_ID) . '" title="' . $cat->name
			. '"><img src="' . get_bloginfo('url')
			. '/cat-icons/category-' . $cat->slug
			. '.png" alt="' . $cat->name
			. '" width="20" height="20" /></a>';
	}

	// add div close
	$catImage .= '</div>';
?>
<script>
	jQuery('.entry-title').append('<?php echo $catImage ?>');
</script>

BONUS

I said I wouldn’t show how to add the icon to the Category page, but I had a little time and it only took a little time and a quick search to get what I needed. So, here is a bonus for the people who didn’t read this post when I first posted it. Lucky you!

This little update goes on the Category.php page and as with the Single post page, you need to put it near the end of the existing code page, but not at the end.  The first trick is to get the current page Category, since the URL might not give you the right Category if you tried to break it out.  For example: The WordPress Category is under Code, so the URL displays as /category/code/wp, but the slug for the WordPress Category is only wp.  Another example is the Scripts Category, which is at a parent level, so the URL is /category/scripts with the slug being scripts.  If I were ever to move the scripts Category under the Code category, then the image would still work, even though the URL was changed, because I used the slug instead.

To get the current Category you have to do a little round about query call.

$category = get_category( get_query_var( 'cat' ) );

Once you are there, just plug in the slug and name as was done before, but you don’t need to do it in a loop.

$catpageImage = '<div style="float:left; padding-right: 10px;"><img src="' 
		. get_bloginfo('url') 
		. '/AppIcons/cat-icons/category-' . $category->slug  
		. '.png" alt="' . $category->name  
		. '" title="' . $category->name  
		. '" width="41" height="41" /></div>';

Finally, use the jQuery to take the HTML string and insert it into the page. For my template, I used category-archive-meta, which is the Category description display. The description is actually in a <p> tag and required that I do a prepend to get the image to float the way I wanted it to.

jQuery('.category-archive-meta').find('p').prepend('<?php echo $catpageImage ?>');

Don’t forget to use echo or your php code will do nothing.

Here is the full code

<?php
	$category = get_category( get_query_var( 'cat' ) );
	$catpageImage = '<div style="float:left; padding-right: 10px;"><img src="' 
		. get_bloginfo('url') 
		. '/AppIcons/cat-icons/category-' . $category->slug  
		. '.png" alt="' . $category->name  
		. '" title="' . $category->name  
		. '" width="41" height="41" /></div>';
?>
<script>
	jQuery('.category-archive-meta').find('p').prepend('<?php echo $catpageImage ?>');
</script>