WP SITES

2948 Tutorials & 189 Plugins

Dynamic Rating System With Stars & Bar Graph

This WordPress code enables you to add your own hand coded star rating system to your child theme without relying on any plugins.

The system dynamically generates :

  • Star rating for each post in the a specific category. This outputs on the single post and archive pages.
  • Average rating with stars based on total number of ratings updated dynamically whenever a user adds or changes a rating on single posts.
  • A dynamic horizontal colored bar graph displayed on the category archive page showing a bar for each star rating and the number of ratings for each star value.

Note : The code works with WordPress custom fields or ACF ( .json import file included for quick & easy setup ).

Demo Video

Shows you how to publish reviews and add a star rating using both WordPress and ACF custom fields which determines the average number based on rating and number of reviews as well as the length of each bar graph for each rating level as a total percentage of all ratings.

Tested using the Genesis Sample child theme by StudioPress however will work in any Genesis child theme or any WordPress theme of you change the hooks.

Installation Steps

There’s 4 steps :

  1. # Copy & paste the PHP code ( without the opening PHP tag ) from the functions.php file to the end of your child themes functions file.
  2.  

  3. # Upload the category-reviews.php and single-post-reviews.php files to your child theme folder like this :
  4.  

  5. # Copy & paste the CSS from the style.css file to the end of your child themes style sheet and clear caching.
  6.  

  7. # Optional : If you want to use the ACF plugin to add ratings, import the acf-107954.json file to Custom Fields > Tools Import Files.
  8.  

Once you’ve installed the code, you can then add your rating on the Edit Post screen of any post in the Reviews category using the custom field key rating_value with any value from 1 – 5 like this :

You can also add the reviewer name in the post info entry header otherwise the post author will be displayed.

Download Folder

The horizontal bar graph is based on the user rating scorecard by W3 Schools extended with hand coded PHP to add and dynamically change the values for the bars, stars and numbers.

Related Tutorials

Was This Tutorial Helpful?