Troidus

I have a feature in this blog that I’ve never used. It’s a special “Review” category. It is styled a little differently than this default post style, and in this article/tutorial, I’m gonna take you through creating this.

First of all, let’s think about reviews. Reviews require certain extra elements, not needed in normal posts. These elements, like ratings, and a cover picture are stuff that you don’t need in normal posts. So, my recommendation would be to first code your loop without any of these extra stuff. However, you should have a clue as to where these extra elements will go in, so that later, when we add the stuff, it’ll be easy to find the area and just add the snippets of code.

First off, you’ll need a plugin to get this to work. Go and download the plugin “Get custom Field values” from Scott Reilly’s coffeecode site, a really great resource for great WP plugins.

After installing the plugin, it’s time to implement it.

Before that, you should know where the picture uploader uploads its pictures in WordPress, cause we’re going to use it to upload the album covers or what-nots.

Make sure that you upload a single file type only. Otherwise, it won’t pick them up. I’m using gifs.
After uploading the album cover of any size, it’s time to play with custom fields. Write a new custom field with the key ‘postimage’ and the value as the name of the image file, without the extension. For example, if you uploaded james_blunt.gif, the value would be just ‘james_blunt’, albeit without the quotes.

Now, insert this piece of code where you want the album cover to be displayed.

1. <div class="postimg"><?php echo c2c_get_custom('postimage', '<img alt="Album cover" class="post-image" src="wp-content/images/', '.gif" />', 'blank'); ?></div>
2. Download this code: /code/60ca.txt

And you’ll see the album cover image displayed. Easy as butter!

Now, for ratings. Here, I had already uploaded the madatory star graphics required for ratings. I made 10 graphics, although there is no restriction to how many you can use. Hell, use a 100 star system!! Ok, so, I named the files 1.gif, 1.5.gif, 2.gif, and so on and so forth. Easy to remember, easy to use.

To add the stars, create another custom value with the key ‘rate’ and value as the file name. Again, the value will be 1, 1.5, 2, and so on and so forth. Finally, at the right spot, add the following code:

1. <div class="rate"><?php echo c2c_get_custom('rate', '<img alt="Rating" class="rate-image" src="wp-content/images/', '.gif" />', 'blank'); ?></div>
2. Download this code: /code/60cb.txt

And there you go. Your own review system, with no hassles!!
Now, as you most certainly won’t want other non-review posts to display the empty img tags, here’s how you remove them.

Say you have a Review category with id 9, where all your reviews are stored. Cleaning up the tags when not using them is easy enough. Just use the following code, and you’re all set:

1. <?php if ( in_category('9') ) { ?>
2. <div class="rate"><?php echo c2c_get_custom('rate', '<img alt="Rating" class="rate-image" src="wp-content/images/', '.gif" />', 'blank'); ?></div>
3. <?php } else { ?>
4. Doing some normal post thing, or nothing at all.... something not at all starry!
5. <?php } ?>
6. Download this code: /code/60cc.txt

This uses a simple if statement to check whether a particular post is in the given category (in our case, 9) or not. Then, it serves up the corresponding code.

That’s it for this simple tutorial. I hope this is useful to you.

And before I go, I have taken this screenshot of how a review looks at Troidus.