Review Ratings plugin for WordPress [Updated August 2013]

If you review books and movies, you’ll want to provide a rating. Usual movie ratings consist of 1-5 or 1-6 stars, zero stars reserved mainly for Uwe Boll movies.

This plugin let’s you do just that. Simply write

[rating=5]

and you’ll get this:

There’s an options page which allows you to configure the rating symbol (another popular one is the ★), the symbol color, the empty symbol color and lastly how many stars you can give away at the most.

Download

Download Review Ratings

Other Notes

Questions have been asked why the default option outputs 6-star ratings. First of all, this is an option you can change if you prefer 5 star ratings (or even 3 or 20 star ratings). The reason for 6 being default is that this requires the reviewer to decide whether a movie is mediocre-good (4 stars) or mediocre-bad (3 stars). This is more useful than a 3/5 rating, because that’s the exact middle.

Replacing The Symbols With Images

Ratings Short-tags already supports using images instead of unicode symbols to show ratings. You just need to use a little CSS to get it going. Here’s an example:

.rating span { /* both full and empty symbols */
	display: block;
	width: 20px;
	height: 20px;
	float: left;
	text-indent: -9999px;
	background: url('url/to/fullstar.gif') no-repeat left top;
}
.rating span.empty { /* overwrite empty symbols image value */
	background: url('url/to/emptystar.gif') no-repeat left top;
}
.rating:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
	zoom: 1;     /* triggers hasLayout */
}

Changelog

  • November 2010: Small changes. Plugin is now called “Review Ratings (shortcodes & buttons)” to better reflect what the plugin does. Lots of little things have been fixed, and related ratings should now work better.
  • February 2011: 3.1 compatability
  • August 2013: Update to be MP6 friendly. I also removed “Related Ratings” because I never got the performance to be sensible, and it wasn’t very useful anyway.

84 thoughts on “Review Ratings plugin for WordPress [Updated August 2013]”

  1. Johan says:

    Nice! I’ll definitely try it out. 🙂

  2. Augusto says:

    cool plug-in Joen!

    what about an option (tag) to list all review’s on a page?

    1. Joen says:

      Thanks.

      Personally I tag all my reviews with the reviews tag and that works fine. I think anything else would be overkill 🙂

    2. If integrated, you could list by rating.

    3. Joen says:

      Oooh, I get it, that’s very nice!

      Hmmmmmm.

      I’ll put that on the ToDoWhenIGetGoodEnough list. Unless someone else picks up this, (it’s open source, after all), and builds it in…

  3. Joen says:

    This plugin has been updated to not show “empty” stars in feed viewers. The “empty” is done using CSS, which obviously doesn’t translate to feeds, so…

    1. Janus says:

      Great plugin 🙂
      I’m afraid everything gets 6 stars in our feed (via Feedburner). We’re using version 1.5 of the plugin. Any ideas?

    2. Joen says:

      That’s odd… do you have the latest version of WordPress? I’m checking if the thing is being shown in the XML, and not outputting those “blank” stars when that happens… What’s your URL?

    3. Janus says:

      Running WordPress MU, latest version. http://horsensbibliotek.dk (I’m standing in for Morten, whom you talked to earlier, I believe)

    4. Joen says:

      I’m looking at this URL now:

      http://feeds.feedburner.com/HorsensKommunesBiblioteker

      and I do see those 6 stars being output.

      I have no idea why, but I’m going to send you a modified version now, which doesn’t output the “empty stars”. This is a hack, and only until I manage to upgrade the version once I identify the problem.

    5. Janus says:

      Awesome. Thank you very much 🙂

  4. Steve says:

    In the above paragraph you explain that there is an options page to alter the symbol. Where is said options page?

  5. Steve says:

    No, could be that I am using a newer version of WordPress?

    1. Joen says:

      No, this should work with versions 2.5 to 2.8. I’m using 2.7.1.

      Try redownloading and reactivating the plugin.

      Do the shortcodes work? Does anything appear if you write [rating stars="5"] ?

  6. Steve says:

    The shortcodes do work, I will try reactivating it.

  7. Steve says:

    Okay, I reactivated it and it’s now there, still a bit unsure as to how that allows me to change the image. I will mess with it for now, thanks a ton for the help!

    1. Joen says:

      It’s important to note that right now the plugin doesn’t support using images. It is in fact using Unicode symbols, i.e. text.

  8. Steve says:

    lol, ya I guess I should have noticed that from the start. What I mean is there a place to find a compiled list of unicodes? I am looking for (I know this sounds silly) a spoon.

    1. Joen says:

      There are a few here:

      http://en.wikipedia.org/wiki/Miscellaneous_Symbols

      What you’re looking for are the HTML counterparts, i.e. ⚲ for ⚲ (which was the closest to a spoon I found).

      It hits me that there is support for images, as long as you use CSS to do it!

      Edit: Added the CSS to the post instead.

  9. Steve says:

    Awesome!

    Thank you, you’ve been more than helpful. Very impressed with how fast you replied to all my questions and I really like this plug-in.

  10. Brian says:

    I cant seem to get the images working, after i placed the CSS code in the stylesheets do I need to make any changes to the settings of the plugin?

    1. Joen says:

      The CSS was off the top of my head. Do you have a link I can look at?

  11. Aaron Storm says:

    Is there a way to show the ratings on the post title; especially on the main page?

    1. Joen says:

      As such, the intention of the plugin so far has only been to provide the shortcodes ([rating stars="x"]). Shortcodes only work in the body of your posts.

      However, there’s been some interest in a small rewrite which would feature the ability to list, for instance, all 5 star reviews. That would mean storing the rating in the database somewhere. If I had the rating stored there, there’s no reason I couldn’t output it in the title, as an option.

      So yes, it’s possible.

      One important thing, however, this is just speculation and I’m truly and honestly too busy to work on this for the next foreseeable future. If, however, someone takes interest in this plugin and would like to take it upon themselves to build it in soon, I’d love to give SVN access (it’s all open source here).

  12. baron says:

    Works great, thank you

  13. santin says:

    Love this!! very helpful!!

    but is there any way to remove HTML code “p”?

    I mean… I only need the “span” tag, like this

    http://www.flickr.com/photos/santinaki/3500800427/

    and I use this plugin here

    http://san-tin.com/iphone/2009/05/big-diary-and-notes/

    sorry for my poor English…

    1. Joen says:

      Yes, you can remove the extra P tag. You just have to edit the plugin, and remove wpautop from line 48 in the ratings-shorttags.php file. Note, it says wpautop($something) and you should remove the wpautop( and ), but not the variable in between.

    2. santin says:

      It works.

      Thank you very much!

      _

  14. boilr says:

    thanks for this great plugin!

    is there any way to show fractions/parts of a symbol?

    i.e. If I rate a movie 4.5 stars out of 5, is there a way to do that with this plugin?

    also, is there a way to enlarge the symbol output size?

    thanks

    1. Joen says:

      boilr: is there any way to show fractions/parts of a symbol?

      i.e. If I rate a movie 4.5 stars out of 5, is there a way to do that with this plugin?

      No, I’m afraid not. But you could set the maximum stars to 10, and show 9/10 stars. But I don’t think that’s what you’re after.

      boilr: also, is there a way to enlarge the symbol output size?

      Yes, using CSS:

      .rating {
      font-size: 16pt;
      }
      
  15. boilr says:

    thanks for your prompt reply. i might just have to switch to a 10 star rating since this plugin is so useful.

    on a random note, i’m having a tough time updating my comments page (my theme is really old and has been modified piecemeal for a few WP releases now) for 2.7 nesting, etc…any chance you could share (via email or wherever) your comments code (comments.php and accompanying css)? its very clean and well done.

    thanks again

    1. Joen says:

      These days, I’m close to releasing my upcoming Pangea theme for WordPress. http://noscope.com/pangea/

      It’s basically the same code, though the CSS is a bit different. So stay tuned 🙂

  16. boilr says:

    noob question. any idea how i can get the rating symbol to align vertically with my preceding text?

    here’s an example of usage – http://www.boilr.net/2009/06/06/update-linksys-wrt54g2-router-works-like-a-champ/

    thanks again for the great plugin and prompt support

    1. boilr says:

      nevermind, i’ve decided to remove the preceding text.

  17. Nice plugin. I’m trying it out already.

    Shorttags do work fine, but unfortunately my co-bloggers are not that IT-savvy and not very much into anything that looks like just the tiniest bit of code. They could really use something wysiwyg.

    Is there any chance that you could make at button in the TinyMCE toolbar, which makes it easy to insert the rating/the shorttag?

    For example, see Vipers Video Quicktags for reference/inspiration. I know it’s a more complicated plugin but Viper007Bond managed to do something like that.

    Anyway, thanks for a nice plugin. Keep up the good work.

    1. Joen says:

      Morten Brunbjerg Bech: Is there any chance that you could make at button in the TinyMCE toolbar, which makes it easy to insert the rating/the shorttag?

      Yes, I actually could do that. I’m adding this to the list. Good suggestion.

  18. Frank says:

    The code for images should be like this

    .rating span { /* both full and empty symbols */
    	float: left;
    	display: block;
    	width: 20px;
    	height: 20px;
    	text-indent: -9999px;
    	background: url('/wp-content/stars/star.png') no-repeat left top;
    }
    .rating span.empty { /* overwrite empty symbols image value */
    	background: url('/wp-content/stars/emptystar.png') no-repeat left top;
    }
    

    you need the “float: left;” to have your stars from left to right 😉

    1. Joen says:

      Oh, right, good point. Then you probably also need a clearfix, like this:

      .rating:after {
      	content: ".";
      	display: block;
      	height: 0;
      	clear: both;
      	visibility: hidden;
      	zoom: 1;     /* triggers hasLayout */
      }
      
      
      1. z says:

        Hello joen,

        where to place the css file and where to call the css file in ratings-shorttags.php. please help me.

        t. So sta

        Oh, right, good point. Then you probably also need a clearfix, like this:
        .rating:after {
        content: “.”;
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
        zoom: 1; /* triggers hasLayout */
        }

  19. EZ says:

    Hi there! Great plugin, I love it.
    I saw you mentioned this only works in the BODY of a post, but how would I be able to get it to work using custom fields, so I could automatically insert numbers into it? Could I place it in a template tag somewhere or modify an existing template to show after a post? Please email me if this is too complicated.
    Thanks!

    1. Joen says:

      Hi,

      You need to look into “do_shortcode”:

      http://codex.wordpress.org/Function_Reference/do_shortcode

      I’m sorry I can’t be more indepth than this. But I’m sure running shortcodes on widgets is elaborated in the WordPress forum.

  20. contempt says:

    I see there hasn’t been a comment in awhile, so I’m hoping you’re still reviewing and hoping to answer this question. First, I love this, it’s exactly what I’ve been looking for. However, it doesn’t show up on my main page. Is there something that I’m missing? Please see here: http://www.currentlywatching.com

    As you can see, for each page, it’s there, but on the main page, the [rating=x] shows up in the preview post.

    1. Joen says:

      contempt,

      The problem is that your main page uses excerpts, and excerpts strips out all shortcodes.

      I believe you can google how to make shortcodes work in excerpts. Try the keywords “wordpress shortcodes in excerpts”. I know it’s possible but the method escapes me.

  21. contempt says:

    Thanks for replying back quickly and explaining what the issue is. I’ll follow your suggestion now that I know what what to search for. Thanks again.

  22. First of all thanks for the plugin.

    It worked great for me until the recent update of WordPress to v3.1. Do you plan on updating it to work with the new version?

    Cheers

    1. Joen says:

      First of all thanks for the plugin.

      It worked great for me until the recent update of WordPress to v3.1. Do you plan on updating it to work with the new version?

      Cheers

      I’ll look into it!

    2. Joen says:

      Florian Pichler,

      Hmm. How is it not working at the moment? It’s working for me.

  23. Joen says:

    I found the 3.1 problems, and I’ve pushed out a fix.

    1. Joen says:

      ddeconin,

      Hi,

      I still have an issue with version 1.5.3 and google chrome http://wordpress.org/support/topic/plugin-review-ratings-shortcodes-buttons-toolbar-dissapears-in-chrome?replies=1#post-1964762

      A couple of questions for you before I can help you:

      – Are you running WordPress 3.1 or earlier?
      – Does the problem persist if you clear your cache?
      – Does the problem persist in other browsers?

      Please report back here, thanks.

  24. ddeconin says:

    Hi,

    -wp 3.1 , only chrome , not on IE and….. clearing the cache worked now… but Im sure I tried that before … how odd…

    Thx for the quick reply

    1. Joen says:

      ddeconin,

      No problem.

      The fix involved editing a JavaScript file that was bundled with the plugin. If Chrome loaded the old version, it would fail.

  25. Anders says:

    I have wordpress version 3.1 and is using a black background theme. I want to change the awarded star ratings to colour DDF700 and the non-awarded to C0C0C0 but where do I do this, the “Options” page for this plugin seems to have gone missing?

    I tried edit directly in the WordPress Plugin Editor but it had no effect…

    1. Joen says:

      I have wordpress version 3.1 and is using a black background theme. I want to change the awarded star ratings to colour DDF700 and the non-awarded to C0C0C0 but where do I do this, the “Options” page for this plugin seems to have gone missing?

      I tried edit directly in the WordPress Plugin Editor but it had no effect…

      Anders,

      The options page should still be there, but it’s been renamed. It’s now called “Review Ratings”.

    1. Joen says:

      Justina,

      Yeah, no that only works in posts, not comments.

  26. samantha says:

    Hi is there any way i can have 1/2 star rating too? 🙂

    Thanks.

    1. Joen says:

      samantha,

      Hi is there any way i can have 1/2 star rating too?

      Well yes, but not easily.

      If you know advanced CSS, you could set the rating scale to go from 1-10. Then you could make each heart into half a star — left and right side of said star consecutively. Then a rating of 3 would be one and a half star.

  27. Marykate says:

    Thanks for the post. This is super helpful.

    Exactly what do I have to type in to get only 5 stars instead of 6. And exactly where do I type it in. Sorry I am certainly not computer savvy.

    Also, noone would know that to type in to get a picture of a wine bottle per chance?!

    Thanks, Mk

    1. Joen says:

      Exactly what do I have to type in to get only 5 stars instead of 6. And exactly where do I type it in. Sorry I am certainly not computer savvy.

      In the WordPress admin, click Settings, then Review Ratings. You can replace the 6 with a 5 in the “Total Symbols” field.

  28. darcy says:

    Sorry to ask such a noob question, but I would like use my own symbols and I understand that I need to use the CSS code you provided. Where do I put this code? In the main stylesheet for my site’s template?

  29. Albin says:

    Hi, great plugin! Where do I set the height and clear-property for Apple-style-span?

  30. craftwerks says:

    awesome quick plugin and easy to configure. thanks!

  31. Sean says:

    Hi. I see this has been asked before. But where does the .CSS go if you wish to use images instead of unicode? I put it in the main stylesheet for my theme. Did not work. I tried putting it into the …shorttags.php file and that definitely didn’t work. Thank you!

  32. Valerie says:

    Do you have any plans to add 1/2 stars to this plugin? I know you described a workaround, but it would be great if this could be built in.

    Thanks!

  33. Erika says:

    First, thanks for an awesome plugin!!
    Second, is there a way to put a little bit more space between my images? I am using the skull and cross bones html picture, and I would love them to be set a bit further apart. Thanks so much!

    Erika

    1. Joen says:

      First, thanks for an awesome plugin!!
      Second, is there a way to put a little bit more space between my images? I am using the skull and cross bones html picture, and I would love them to be set a bit further apart. Thanks so much!

      Erika

      You could insert the character for space before and after your character. The HTML entity for space is  

  34. Joen says:

    Form ate that one.

    Character for space is & followed by nbsp followed by ;

  35. Troy Kirby says:

    Love your stars plug-in, but wondering if there is a way to have a few extras with it?
    – Is there a way to add stars into the title of posts?
    – Can there be 1/2 stars in order to indicate a move with a 3 1/2 stars not 4?

  36. I’d like to build your plugin into the html code in my theme. Is there a php shortcode for that, already supplied?

  37. Sean says:

    Just my thought.. This comes from a plugin I can no longer locate anymore. Allow multiple ratings in a post. And then have a tag for “Overall Rating” that will calculate for you. So for example:
    Story – [rating:5]
    Audio – [rating:3] etcetc…
    Overall – [overall]

  38. laura says:

    what if you want a five-star base instead of six

  39. Asaka says:

    Hi there, i’m sorry to bother you!

    You wrote, some comments before, to enlarge the symbol output size:

    “Yes, using CSS:

    .rating {
    font-size: 16pt;
    }

    I would like to know where i have to put this css code…sorry, i’m a newbie about css, wordpress and so on!

    Can you help me?

    Thanks for your attention!

    1. Joen says:

      If you’re completely new to this, it’s probably going to be a bit tricky.

      Every WordPress site has a theme. You have to edit a file on your server. The structure is usually like this:

      yourserver.com/wp-content/themes/yourtheme/style.css

      You need to paste the code in that file.

      1. Asaka says:

        So I need to paste that code in the stylesheet; but which part of the stylesheet?

        Thanks for your patience, and sorry!

      2. Joen says:

        You can paste the code anywhere you like in that stylesheet. Beginning or end or middle.

  40. Asaka says:

    it works fine! Thanks a lot!

  41. Cyn says:

    Is there a way to have a half star sort review. For example for The Wolf Of Wall Street I believe deserves a 3.5 out of 5 start how can I make that happen.

  42. Rod Mitchell says:

    Hi there, how do I change the colour of my stars from black to red? Please help. Thanks

Comments are closed.