WP-PostRatings Integration

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:

	
Comments
	
Featured
	
Tags

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. (: