How to create Custom 5 Stars Rating System in WordPress?

How to create Custom 5 Stars Rating System in WordPress?

Screenshot_3

In this article I’ll show that how to create custom 5 stars Rating system in wordpress.

I’ll create WordPress Short Code to place rating anywhere in any post.

Steps:

1- Create Directory “az_rating” in the root folder of your active theme.

2- Create rating.php in az_rating/ folder. In this file we will write all code for the forntend of the rating system. and add this image in az_rating/ folder:

star   Download this image in required folder.

3- Open functions.php file from the root folder of your active theme. Or create functions.php file if it does not exist.

Database Table:

Screenshot_1

4- Create a table az_rating in your current wordpress database. Run following SQL to create the table:

5- rating.php:

CSS code for rating styles:

jQuery Code:

HTML Section:

functions.php:

In this file we will create three functions for our reviews system:

  • az_rating()
    This function will create short code “[az_rating]”
  • submit_rating_callback()
    This function will submit review to the database and will update User Interface accodingly.
  • get_latest_rating_callback()
    This function will get the latest rating by given post id.

Put following functions at the end of this file.

6- Creating shortcode:

First of all we’ll create a wordpress shortcode function.

az_rating() function will create complete functionality for short code. We named our short code as az_rating.

7- Function to submit rating in the databse:

submit_rating_callback():

This function will receive data from the review form through ajax.

We created custom action for ajax handling and called above function with that action call:

8- Geting latest stars-rating to update in user interface:

get_latest_rating_callback():

This function will be called to get latest stars-rating through get_latest_rating action.

Ok now our Reviews system is ready to use.

To use this add this shorcode [az_rating] anywhere inshide the while loop of your post.

If you directly want to use shortcode inside the php code then paste this code in your php script to show review content:

<?php echo do_shortcode(‘[az_rating]’); ?>

Share this post