WP-PostRatings Integration

Written by Magnus Jepson on February 23, 2009 Uncategorized.

This tutorial was written by one our awesome Woo Ninjas – Jordan Hatch.

Another useful plugin you may want to install on your site is WP-PostRatings. You can get your visitors to rate your posts on a scale of one to five. It provides a wealth of functions you can use to display the stats around your site.

This tutorial is written for the Gotham News theme, however the main part of the tutorial can be completed in most of our other themes too. In this tutorial, we are going to install the plugin and add it to our single post template, and we’re also going to add a section to our sidebar tabs to show the highest rated posts.

Installing the Plugin

You can grab the plugin from is the WordPress.org plugins repository, but if you have 2.7, search for the plugin name in your admin panel and you can install it from there too. When you’ve installed the plugin, head over to the new “Ratings” section of your WordPress admin panel. Click on “Ratings Options”.

Here you can choose what images you want to use for the ratings, and who can rate the posts. Choose an image you like (or stick with the default), and head over to your template folder. Let’s add it to our posts:

Adding the code

Open up single.php in your theme directory. This is the template used to display a single post on your site. We want to add the ratings below the post content, but above the comments.

Let’s find where the content is in the template file, and add the post ratings function after it. Find:


Now after it, add:


Load up any single post on your site and you’ll see that the post ratings form is displayed below it. However, it looks rather out of place with the rest of our content. It would be nice to align it to the right, and to add some padding to the top. As with the WP-PageNavi plugin, you can add a special CSS file to your theme directory, and it will style the plugin. It will stop it from being overwritten when plugin is upgraded.

Lets create a file called postratings-css.css in our theme directory. The entire post ratings section is enclosed in a ‘div’ with the class name ‘post-ratings’. This means we can add the following CSS to the file we just created, and it will style every occurrance of the post ratings section on the site:

.post-ratings {
	text-align: right;
	padding-top: 10px;
}

.post-ratings-loading {
	display: none;
	text-align: right;
}

The first portion of the CSS file, ‘.post-ratings’, is styling the main section of the post ratings which includes the stars and the statistics. The second portion of the CSS file, ‘.post-ratings-loading’, is simply the “Loading…” indicator which only appears when a rating is submitted.

Save the file and upload it to your website. You will find that the ratings are now on the right hand side of the page. There’s a lot more you could do to the ratings beyond the scope of this tutorial. However, we’re going to look at adding a “Rated Posts” tab to our sidebar now:

Adding a tab

It’s simple and easy to add a new tab to the tabs in the sidebar. Open sidebar.php and take a look at this section:


Each item in the unordered list is a separate link for the tab. The URLs that the links are pointing to are the sections which each tab shows or hides. We are going to add a new list item to the section, for our Rated Posts tab. So after this:

  • Tags
  • add the code for our section:

  • Rated
  • If you upload sidebar.php now, you will see there is another tab to our list. However, clicking on it does nothing, as we haven’t added our list yet.

    The plugin includes a useful function which will show us the highest rated posts on the site, and we can easily add them to our sidebar. Find this line in the sidebar.php file:

    This is the code for the “Tags” section. Below it, add the following:

    This code adds a new section which corresponds to the tab we added earlier. The function get_highest_rated is one which the plugin includes, and we can specify whether we want to show posts or pages, only to show a post after X number of votes, and also the number of posts to show in the tab – for now it’s set at 5 posts, but you can change that if you like.

    Upload sidebar.php and check out your site. If you’ve done everything correctly, there will now be an extra tab called “Rated” which shows the highest rated posts along with a link to each of them.

    As we’ve demonstrated, it’s easy to add new tabs to your sidebar, and there are tons of useful plugins out there which can add things such as post ratings, pagination and breadcrumbs.

    Feedback is appreciated in the comments, along with suggestions for future tutorials. (:

    cta-banner-10-product-page-v2_2x

    3 Responses

    1. Olivia Bell
      February 24, 2009 at 3:13 pm #

      Brilliant, brilliant!! I’ve been wanting to do something like this for a while.

    2. Dean McCall
      March 18, 2009 at 11:56 pm #

      I’m still having trouble with this on my Busy Bee theme. How should I log people’s data when they rate? by Cookie? or by IP? Right now everytime I refresh I can vote on the same post several times and I only what any user to vote once per post that the ratings is on. Also, I’m getting auto logged out for some reason I’m not sure. Can anyone help?

    3. Jeff Kemp
      May 21, 2009 at 3:04 pm #

      Try the plugin “GD Star Rating”. It allows you to limit votes to only one by each IP, and gives you a lot of control in other ways.

    WooCommerce - the most customizable eCommerce platform for building your online business.

    • 30 day money back guarantee
    • Support teams across the world
    • Safe & Secure online payment
    %d bloggers like this: