Code Star Rating In WordPress

The download folder in this tutorial contains code which enables you to add a star rating system to your WordPress theme without the need to install more plugins.

The system adds the star rating in the entry header on single posts in the reviews category and also dynamically calculates the average rating based on total number of ratings.

The graph dynamically displays colored bars for each rating level multiplied by 100 and divided by the total number of reviews for all ratings. This generates a horizontal bar graph as seen in the above screenshot and following demo video.

Demo Video

Shows how to add star ratings to single posts in the reviews category and shows the number of ratings and average updating as ratings are added, changed and removed.

Tested using the Twenty Twenty default theme for WordPress however will work in any WordPress theme.

Installation Steps

The code comes pre-installed in a Twenty Twenty child theme.

There’s 4 steps where the code has been added :

  1. # Added between lines 52 -54 in category-reviews.php
  2.  

  3. # Added to the functions.php file.
  4.  

  5. # Added to the style.css file.
  6.  

  7. # Added in the template-parts > entry-header.php file between lines 45 – 47
  8.  

Download Folder

Once you’ve installed the child theme or code, you can start adding ratings to new posts in the reviews category using the custom field named rating_value with value between 1 – 5.

ACF Plugin

You can also import the acf-107973.json file and use the free or premium version of Advanced Custom Fields.

Add Reviewer Name

You can also use a template tag to add a custom reviewer name anywhere in the template-parts > entry-header.php file.

Uses reviewer_name as the custom field key on your Edit Post screen.

Related Tutorials

Join 5000+ Followers

Get The Latest Free & Premium Tutorials Delivered The Second They’re Published.