Published on Mar 29, 2020

ACF Star Rating in WordPress

This tutorial provides the steps to set up a star rating custom field using the ACF Star Rating Field plugin for Advanced Custom Fields and displaying the stars (filled, half and empty) using Font Awesome svg icons depending on the number of stars selected in the backend.

Backend:

Frontend:

Step 1

Install and activate ACF (free or pro) and ACF Star Rating Field plugins.

To download the ACF Star Rating Field plugin from GitHub, click on “Clone or download” button, download the zip and upload it at Plugins > Add New.

Create a field group having the Star Rating type of field and set it to where you want it to appear. In this example, I have set the location to Project Custom Post Type.

Tick Allow Half Rating if you want to be able to set decimal rating like 3.5 out of 5 stars.

Step 2

Edit your entries and set your desired star rating.

Clicking once on a star will set it to half and clicking it again will set it to full.

Step 3

If you are using Oxygen, use a Code Block component.

PHP & HTML

<?php
	$rating = get_field( 'rating' );

	if ( $rating ) {
		$average_stars = round( $rating * 2 ) / 2;
	
		$drawn = 5;

		echo '<div class="star-rating">';
		
		// full stars.
		for ( $i = 0; $i < floor( $average_stars ); $i++ ) {
			$drawn--;
			echo '<svg aria-hidden="true" data-prefix="fas" data-icon="star" class="svg-inline--fa fa-star fa-w-18" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="currentColor" d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"/></svg>';
		}

		// half stars.
		if ( $rating - floor( $average_stars ) === 0.5 ) {
			$drawn--;
			echo '<svg aria-hidden="true" data-prefix="fas" data-icon="star-half-alt" class="svg-inline--fa fa-star-half-alt fa-w-17" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 536 512"><path fill="currentColor" d="M508.55 171.51L362.18 150.2 296.77 17.81C290.89 5.98 279.42 0 267.95 0c-11.4 0-22.79 5.9-28.69 17.81l-65.43 132.38-146.38 21.29c-26.25 3.8-36.77 36.09-17.74 54.59l105.89 103-25.06 145.48C86.98 495.33 103.57 512 122.15 512c4.93 0 10-1.17 14.87-3.75l130.95-68.68 130.94 68.7c4.86 2.55 9.92 3.71 14.83 3.71 18.6 0 35.22-16.61 31.66-37.4l-25.03-145.49 105.91-102.98c19.04-18.5 8.52-50.8-17.73-54.6zm-121.74 123.2l-18.12 17.62 4.28 24.88 19.52 113.45-102.13-53.59-22.38-11.74.03-317.19 51.03 103.29 11.18 22.63 25.01 3.64 114.23 16.63-82.65 80.38z"/></svg>';
		}

		// empty stars.
		for ( $i = 0; $i < $drawn; $i++ ) {
			echo '<svg aria-hidden="true" data-prefix="far" data-icon="star" class="svg-inline--fa fa-star fa-w-18" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="currentColor" d="M528.1 171.5L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6zM388.6 312.3l23.7 138.4L288 385.4l-124.3 65.3 23.7-138.4-100.6-98 139-20.2 62.2-126 62.2 126 139 20.2-100.6 98z"/></svg>';
		}

		echo '</div>';
	}
?>

Set the value of $drawn variable in the above code to whatever is set as Maximum Rating for the custom field. It is 5 by default.

You can easily show any other icon or image like say, chillies for spice level if you are using this for a restaurant menu instead of stars by replacing the svg code with img elements.

Ex.:

<?php
	$rating = get_field( 'rating' );

	if ( $rating ) {
		$average_stars = round( $rating * 2 ) / 2;
	
		$drawn = 5;

		echo '<div class="star-rating">';
		
		// full chillies.
		for ( $i = 0; $i < floor( $average_stars ); $i++ ) {
			$drawn--;
			echo '<img src="/path/to/chilli-full.png">';
		}

		// half chillies.
		if ( $rating - floor( $average_stars ) === 0.5 ) {
			$drawn--;
			echo '<img src="/path/to/chilli-half.png">';
		}

		// empty chillies.
		for ( $i = 0; $i < $drawn; $i++ ) {
			echo '<img src="/path/to/chilli-empty.png">';
		}

		echo '</div>';
	}
?>

CSS

.star-rating {
  display: flex;
}

.star-rating svg {
  width: 18px;
  height: 18px;
  color: #ff9900;
}

.star-rating svg:not(:last-child) {
  margin-right: 3px;
}

That’s it!