1. Code
  2. Theme Development

How to Create a Simple Post Rating System With WordPress and jQuery

Scroll to top
Read Time: 7 min

There already are many post rating system plugins out there. Surprisingly, no one fits my needs, they either are too complicated or with too many built-in options. So, in this tutorial, you'll learn how to build your own simple post rating functionality, directly within your theme files. There's no need for plugin!

Step 1 Introduction

Post ratings are a good way to get feedback on what your readers really focus on. While I was searching for a simple yet efficient plugin, I realized they all come with too many options and aren't customizable enough. That was my first issue. My second issue was that using too many plugins will slow WordPress down.

So I decided to share with you a way to build your custom post ratings system. We'll use:

  • simple HTML markup and CSS3 so it's easy to customize
  • jQuery to deal with Ajax calls
  • PHP and hooks to handle data

Step 2 HTML Markup

We are going to display a heart-shaped button in the footer section of an article. To do so, we'll add markup in the content-single.php file (within the Twenty Eleven theme).

Note that we use HTML5 custom meta attributes to store our data so it's really easy to handle with jQuery. Then, this will be generated by PHP, as we'll see in a next step.

Step 3 CSS3

We'll use CSS3 animations to add some visual interactivity and CSS sprites to reduce the number of external images.

At this point, it should looks like this

Post RatingPost RatingPost Rating

Step 4 jQuery

We'll use built-in jQuery to handle the ajax requests. On click, jQuery will pass some parameters to our php handler and handle the response to display suitable information.

So let's create a new file called post-like.js and add it to the js folder. Then open it and add this code:


First, let's retrieve the post ID with jQuery's data method and then pass it to our PHP handler. The ajax_var variable is created dynamically with PHP (we'll cover this in the next section).

The best way to use ajax within WordPress is to make calls to admin-ajax.php. It is located in the wp-admin folder and you can bind your callback functions with hooks. Let's see how it works.

Step 5 PHP and Hooks

How are we going to proceed? We are going to bind some functions to WordPress hooks and then enqueue our script and add some PHP-generated JavaScript variables to be used by jQuery.


Let's open the functions.php file and get started adding our functions.

First things first, we need to bind functions to WordPress hooks. So add these two lines in your file:

The first hook is fired when a user is logged in and the other when they are not. See more information about how to implement ajax the right way here: 5 tips for using ajax in WordPress.

You can see the "post-like" part of the hook, which is the action parameter we used in the previous step with jQuery.

Now we'll enqueue our script and declare our variables:

Here, we define two important parameters:

  • url: the complete URI to admin-ajax.php location
  • nonce: a security hash to prevent attacks and mistakes

You can use those parameters with jQuery this way: ajax_var.url and ajax_var.nonce.

"Using WordPress hooks and admin-ajax.php is the safer way to deal with Ajax."


Let's add the post_like function. It will:

  • Check nonce
  • Retrieve post ID, user's IP and custom post metas
  • Check if the user has already voted or not
  • Save data (IP + votes count) for the current post
  • Return the count value to jQuery

We are saving the user's IP and current time into one post_meta and votes count into another one. Time will help us to check if user can revote again after a certain elapsed time.

You could ask what happens when no vote has been recorded for the current post yet? Well, WordPress helps us one more time here, because update_post_meta checks if meta exists and creates it if not (see more information about this function on WordPress codex).

We'll define how long a user has to wait before voting again (in minutes).

This variable could be stored in theme admin panel for instance, so it's easily editable.

Now add this code to check if the user has already voted:

"You should always ask yourself if it's worth using a plugin and slowing down WordPress rather than adding some simple code within your theme." Wherever possible, functionality should be included via plugins, not in the theme's functions.php directly.

Nothing too complicated here, we are just checking if the user has already voted (i.e. his IP address is among votes IP's list) and if he is allowed to vote again (i.e. elapsed time since he's voted is greater than $timebeforerevote).

Step 6 Create a Function to Generate the HTML Markup

To get more control over how votes are displayed and make it easy to update if it's used in different files, we'll make a function that generates the markup. If the user has already voted, we don't display the heart as a link to avoid useless ajax calls.

You can replace code inserted in Step 2 with this function:

Step 7 Go Further

Now users can vote on posts, you might like to get feedback. For instance, you could display a top 10 of best rated posts.

To do so, you can use query_post with these options:

Step 7 Conclusion

That's it! You should now be able to track your posts according to users' votes and customize both the markup and the CSS to your convenience. This is just one way to create a post rating system, among others, so don't hesitate to comment on this tutorial and give your feedback. Thank you for reading!

Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.