Eric’s Photo Blog

This page contains download information and install documentation for the Ajax rating bar for Wordpress.

The Unobtrusive AJAX Star Rating Bar was created by Ryan Masuga of masugadesign.com. This rating bar offers a similar feature to the star ratings found on Amazon.com and other websites. 

Here are samples of the different size rating bars available with this script:

 
How to install:

1. Download and unzip the file from www.masugadesign.com

2. Download, install, and activate Exec-PHP to enable php to be executed in posts

This plugin is crucial. It allows you to enter the php code for the rating script so that the star rating appears in the post. Without it the rating bar won’t appear.

3. Included within your Ajax folder you downloaded is a readme file that outlines the necessary steps to properly install this script. The first step involves creating a table in your SQL database.

1. Access your SQL database and open an SQL query window
2. Enter the following in to the query window and press ‘Go’ to generate the table:

CREATE TABLE ‘ratings’ (
‘id’ varchar(11) NOT NULL,
‘total_votes’ int(11) NOT NULL default ‘0′,
‘total_value’ int(11) NOT NULL default ‘0′,
‘used_ips’ longtext,
PRIMARY KEY (’id’)
) TYPE=MyISAM AUTO_INCREMENT=3 ;

If you get an Error after entering the above query then re-enter the information without the quotes as follows:

CREATE TABLE ratings (
id varchar(11) NOT NULL,
total_votes int(11) NOT NULL default ‘0′,
total_value int(11) NOT NULL default ‘0′,
used_ips longtext,
PRIMARY KEY (id)
) TYPE=MyISAM AUTO_INCREMENT=3 ;

4. Continuing with the information in the readme file insert raters into your ratings table by again opening a SQL query window and entering the following information:

INSERT INTO ‘ratings’ VALUES (1, 0, 0, ”);

Remember if you get an error then remove the quotes around the word ratings and re-enter the information.

INSERT INTO ratings VALUES (1, 0, 0, ”);

5. Edit the _config-rating file that is in your Ajax folder to include your specific information.

$dbhost = ‘localhost’;
$dbuser = ‘###’;
$dbpass = ‘###’;
$dbname = ‘###’;
$tableName = ‘ratings’;

$unitwidth = 30;

This information should be identical to the information that you added to your wp-config.php file when you first installed wordpress.

6. Copy and paste the following files and folders into the root directory of your website:

Folders: css, images, js
Files: _drawing.php, _configrating.php, db.php, rpc.php

7. Go to your wordpress theme editor and place the following line at the top of the php page that will contain your rating bar:

<?php require(’_drawrating.php’); ?>

For most Wordpress themes this line will go at the top of your index.php page (Main Index Template) and also your single.php (Single Post) page if one exists.

8. Copy and paste the following script at the bottom of the pages mentioned in the previous step:

<script type=”text/javascript” language=”javascript” src=”js/behavior.js”></script>
<script type=”text/javascript” language=”javascript” src=”js/rating.js”></script>
<link rel=”stylesheet” type=”text/css” href=”css/rating.css” />

9. Once the above is complete you should be able to add the rating bar into your posts by pasting one of the following directly into your post window where you want it to appear:

<?php rating_bar(’1′,5); ?>

‘1′ refers to the id number of the rating bar. Each rating bar needs its own unique id. So make sure to change the id number each time you paste the script into your post window. The number 5 refers to the number of stars that will appear.

<?php rating_bar(’1′,7); ?>

This is a seven star script.

<?php rating_bar(’1′); ?>

Ten stars is the default for the rating bar. In the above script only the id number needs to be entered.

Customizing your script

Listed below are various ways of customizing your rating bar as provided in the comment section of masugadesign.com:

To remove the line from the bottom of the rating bar edit the ratings.css file in your css folder:

.ratingblock {
width: 50%;
display:block;
border-bottom:1px solid #999;
padding-bottom:8px;
margin-bottom:8px;
}

remove the following line:
border-bottom:1px solid #999;

To center the rating bar modify the rating.ccs file in your css folder to this:

.ratingblock {
width: 50%;
display:block;
padding-bottom:8px;
margin-bottom:8px;
margin-left: auto;
margin-right: auto;
}

And replace “absolute” with “center” in the position for:

.unit-rating li.current-rating {
background: url(’../images/starrating.gif’) left bottom;
position: center;
height: 30px;
display: block;
text-indent: -9000px;
z-index: 1;
}

Remove raters id from the output:

To go from:
1. Rating: 5.0/5 (1 vote cast)

To:
Rating: 5.0/5 (1 vote cast)

Do the following:
In _drawrating.php remove <?php echo $id ?>. from the line:
<p<?php if($voted){?> class=”voted”<?php } ?> ><?php echo $id ?>. Rating:

This line is near the bottom of the file.