How to Create a WordPress Rating Plugin for Your Content – Part 2

In this second tutorial we will create the styles and scripts for our WordPress Rating Plugin. It requires those to function and display properly on each page, post or any content type for which we have decided to get ratings.

In the previous tutorial on creating the WordPress Rating Plugin, we have created our dashboard pages. Now, before we begin I want you to go there and select which content type you want to rate. If we leave that empty, we won’t see our pop-up anywhere.

Displaying the WordPress Rating Plugin

The logic behind the displaying of our plugin is pretty simple. We will check the cookies and see if the current content ID is there. If it is not there, it will mean that our visitor has not rated that content.

We will need to use the action template_redirect to check if we are on a single content page and if the ID has been set. The first instinct was to use the action init but this action starts before we even know on which page are we and thus we can’t know if we are on a single content page.

Add this code to our plugin file rating-plugin.php:

In this function we are getting our content types that we want to rate with the get_option function. If we are on a single content page and that content type is saved inside our rating content, we will need to show the rating pop-up.

Before we decide to show it, we will check the $_COOKIE. If that cookie is set and it has the ID of our current content, we will not show it. Otherwise, we will call two other actions that will add our style and script (wp_enqueue_scripts) and place the pop-up HTML in the footer (wp_footer).

Adding the Styles and Scripts

WordPress API provides us with the functions wp_enqueue_style and wp_enqueue_scripts that we can use add our styles and scripts. Add this code now:

Before we enqueue our script, we will also use the function wp_localize_script. With that function we will have a global JavaScript object rc_object. This object will contain the url to perform AJAX calls, WordPress nonce and also some translatable text to use inside our script.

Plugin Style

The style will be defined inside another file rating.css. Create that file inside our plugin folder and then add this:

Plugin Script

The script is also defined in another file rating.js. Create that one also and then add this:

In this script we have registered two functions. The first one will trigger when we click on the element #toggleRating to show and hide the pop-up. The second one will trigger when we click on the submit button #submitRating.

When someone tries to submit the rating, we will get the checked rating value. If there is a value, we will get the current content’s ID and then perform an AJAX call. In this AJAX call we are creating a POST request with the action submit_rating, content ID, nonce and the rating value.

If the AJAX return a successful response, we will hide the rating buttons and show a “Thank You” message. Otherwise, we will just show the error before the rating buttons.

Processing the AJAX Request

We need to hook a function that will process the rating value and add it to our content. WordPress will create a dynamic hook with our provided action submit_rating. We will allow logged in users and regular visitors to rate the content. This requires us to use two action hooks. Add this code now:

You can now see those two hooks at the beginning. In our function, we are checking for the WordPress nonce. If that nonce is invalid, it will automatically stop processing and return -1.

We are getting the value from our $_COOKIE and also the content ID. After that, if the content ID is not inside the array of our $_COOKIE, we will save that rating inside our cookie and add it to our content.

The rating value is added to our content using the add_post_meta with the key rc_rating. This is also what we use for creating our table of Ratings inside the administration.

We are adding the content ID inside our $_COOKIE. All the values that we are storing inside are encoded in base64 since the array can’t be stored inside the cookie and only serializing it won’t make the difference.

Rendering the WordPress Rating Plugin Pop-up

The last part is the function that we have hooked to the action wp_footer. This function will create the required HTML for our pop-up to work. Add this code:

You can change the value of the variable $ratingValues to get more or less rating options. Since we want our pop-up to be opened at first load, we applying the class active to both #toggleRating and #entryRating.

The content ID is being added as an attribute data-rate to #submitRating as required by our script.

Conclusion

In this tutorial we have completed our custom WordPress Rating Plugin that is pretty simple to use and to get data on your content. You can freely use it on your own site if you want. Before using it, you might consider minifying both the style and script.

We have learned a bit more on managing cookies and also handling DOM with JavaScript (AJAX).

Do you intend to use this plugin or do you have one you are using already? Please share it below in the comments.

Become a Sponsor