When re-designing the Narfstuff site, I thought it might be a good time-saving function to have Wordpress automatically assign a category based image tag, whenever a post was published. You can see this effect when viewing posts on my main page - categories such as ‘Wordpress Development’ are accompanied with a little graphical tag situated at the top-left of the post. It helps to add a bit more variety to the text area, and looks pretty neato too.

Using template tags, we have a really easy way of automating the process for our blog.

Using the tag ‘in_category()’,we can tell wordpress to execute code if a post is found to reside within a specific category.

Each category in Wordpress is given a unique ID number (you can see them on your Manage > Categories page), and those are the pieces of information we’ll need to make a note of in order to deploy context sensitive images.

My ‘General’ category has the id number of 1 - in this example, I’ll be using that as the basis for the code. Essentially we want our PHP function to carry out the following logical operation:

“If this post is within the ‘General’ category (Which has an ID# of 1), place the associated image tag within the page.”

The following code would do just that once positioned within my index.php at the point that I want the image to show up:

<?php if ( in_category('1')) { ?>
<img class="cat_tag" src="<?php bloginfo('template_directory');?>
/images/category_tags/general_image.jpg" />
<?php } ?>

You may notice that I’ve used another Wordpress template tag within the code above - bloginfo(’template_directory’). This quite simply, will output the address of the current theme’s template directory into the finished HTML, saving us the task of writing it out. Working on from the tag’s output, I then complete the path to the image tag file, which resides in my theme directory, within the images>category_tags folder.

If we had several categories that we wanted to deploy images for, we would simply have to extend the code a little, so that it took into account not one category ID#, but several. In the following code, I’ll deploy an image for the ‘General’ category, and one for the ‘Wordpress Development’ category:

<?php if ( in_category('1')) { ?>
<img class="cat_tag" src="<?php bloginfo('template_directory');?>
/images/category_tags/general_image.jpg" />
<?php } else if ( in_category('2')) { ?>
<img class="cat_tag" src="<?php bloginfo('template_directory');?>
/images/category_tags/wordpress_dev_image.jpg" />
<?php } ?>

My code also adds a CSS class reference to my image - this is so that I can style the outputted images using my website’s stylesheet. If I wanted to float the images to the top left area of the post, therefore not interrupting the text, I’d simply place the following within my style.css file:

.cat_tag {float:left;}

That’s about it! I figure this could all be done using a nice little plugin, but that’s something I’m still trying to learn. If anybody has any real desire for a plugin that would handle all of this, drop me a comment and I’ll see what I can do : )

Optional Code:

Tom pointed out in the comments that if multiple categories were assigned, multiple images would be output for a post - that might not be ideal! This code will check to see if an image has already been output and act accordingly, skipping further images if necessary:

<?php $image_set = 0;
if ( in_category('1') && $image_set ==0) { ?>
<img class="cat_tag" src="<?php bloginfo('template_directory');?>
/images/category_tags/general_image.jpg" />
<?php $image_set = 1;
} else if ( in_category('2') && $image_set ==0) { ?>
<img class="cat_tag" src="<?php bloginfo('template_directory');?>
/images/category_tags/wordpress_dev_image.jpg" />
<?php $image_set = 1;
} ?>

This simply adds the variable $image_set to the code block, set initially to 0; if an image is output for a category, this will be switched to 1, and no further images will be printed.

Tags: Graphics, PHP, Template Tags, Tutorial, Wordpress

This entry was posted on Monday, January 21st, 2008 at 10:18 pm and is filed under Wordpress Development. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.