Rating System Added

I just developed a rating system to go along with my blog entries. Currently I’ve just included it with video game review, but it can apply for any type of posting. I used the Word Press Custom Field to store the rating. I created a custom field called Review and input a value of 0-5 as the rating via the post admin. That stores the rating with the post.

The following PHP code checks if a post contains a rating and if so, displays it:

if (get_post_meta($post->ID, "Review", true)) {
<div class="star-rating">
<p class="current-rating" style="width: echo (get_post_meta($post->ID, "Review", true) * 20); %;">Currently echo get_post_meta($post->ID, "Review", true); /5 Stars.</p>
</div>
}

Here’s more info about the get_post_meta function().

So it ends up outputting:

<div class="star-rating">
<p class="current-rating" style="width:80%;">Currently 4/5 Stars.</p>
</div>

Here is the CSS that styles it, right now I’m just using some standard stars I found elsewhere, but will probably change it to something else.

#yui-main .post .star-rating ul {
margin: 0;
padding: 0;
}
#yui-main .post .star-rating ul li {
list-style: none;
}

.star-rating,
.star-rating .current-rating {
background: url(/images/star.gif) left -1000px repeat-x;
}
.star-rating {
position:relative;
width:125px;
height:25px;
overflow:hidden;
list-style:none;
margin:0;
padding:0;
background-position: left top;
}
#yui-main .post .star-rating p {
display: inline;
margin: 0;
padding: 0;
text-indent: -9999px;
}
.star-rating .current-rating {
z-index:1;
position:absolute;
top:0;
left:0;
text-indent:-1000em;
height:25px;
line-height:25px;
outline:none;
overflow:hidden;
border: none;
background-position: left center;
}

And that’s it, a simple rating system by using the built in Custom Fields and a little PHP scripting and some CSS.