Star ratings are a quick and simple way to get feedback from your users, that’s why it has become so popular all around the web. Today we’ll extend WordPress comments by adding our own star rating system.
The main plugin file
Let’s create the main file that will contain most of our plugin’s code. Using an FTP client navigate to /wp-content/plugins/ in your WordPress installation and create a folder called ci-comment-rating (or anything else you prefer). Next enter the folder and create a file called ci-comment-rating.php (again, naming is up to you).
Edit the file and paste in a header similar to the one below:
Creating the rating interface.
First we will need to create the interface which the visitor uses to rate our post. To do that paste the code below in the plugin’s file.
The code above will take care of placing the rating system in the comment form, for both logged in and logged out users. This is what you it will look like after you add the code:
Not very pretty, right? Let’s fix that.
Adding some styling
We will need some stars, after all it’s a star rating system, so we will need to enqueue dashicons on the frontend as well. Along with that we will need to create an assets folder in the plugin’s main folder and inside it create a style.css file. Edit the style.css file and paste in the code below.
Next go back to the ci-comment-rating.php file and paste this in:
We start by registering the style.css file we created earlier, then we enqueue both the dashicons and the stylesheet. Now let’s save and refresh the page.
Ah, much better!
Saving the user’s input
We have successfully created the interface the user can use to rate our post, next we need to make sure the rating is stored in our database. To do that we will use add_comment_meta to create a custom field in the comments which will store our rating data. Paste the code below in the plugin’s main file.
In the code above we hook into comment_post which fires exactly after a comment is submitted. We check to see if the user added a rating, sanitize it, and store it in the database.
Making the rating required (optional)
If you want to have the users always submit a rating along with their comments you can paste this in the plugin’s main file.
Here we check if there is a rating in the submitted comment’s data, and if not we output an error prompting the user to go back and resubmit along with a rating. This is of course optional.
TIP: if you don’t want to make the rating required consider removing the
bit from the rating interface above. This will remove the visual cue that rating is required.
Display the rating on a submitted comment
Once a user has rated our post we should display that rating along with their comment. To do that paste the code below in the plugin’s main file.
What we do here, is hook into comment_text, check if there is an actual rating on the post, if there is we generate some markup that will display it and return it along the comment’s text. If there is no rating we just return the comment’s text.
That’s pretty much it, we have created a simple plugin that will add a star rating system on WordPress comments.
Extending the plugin
Now that you have the data, you can utilize it in any way you wish by extending the plugin a bit. For example let’s get a post’s average rating and display it above the content.
In the plugin’s main file paste this in.
This function will get the ID of a post, run through all of the approved comments, sum up the existing ratings and return the average rounded up to the first decimal. If there are no ratings on the tested post it will return false.
To display the average comment rating above the post’s content we can use this code:
The code above will try to get the average rating using the function we created on the previous step, if it doesn’t get anything it will just return the content, otherwise it will place a paragraph, just above the post’s content, displaying the average post rating.
That’s all for this tutorial, we hope you found it useful and if you come up with interesting ideas of extending the plugin and using the gathered data, please let us know in the comments below!
The complete plugin file
Below you will find the entire ci-comment-rating.php file which you can copy/paste into your plugin folder.