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!

Note: The built-in ACF Number field can also be used instead of the ACF Star Rating Field.

References

https://stackoverflow.com/a/33065846

https://fontawesome.com/icons/star?style=solid

https://fontawesome.com/icons/star-half-alt?style=solid

https://fontawesome.com/icons/star?style=regular

https://jakearchibald.github.io/svgomg/

Need help implementing a tutorial in your site or want to hire me for custom work?

HIRE ME

Find the article helpful and wish to donate?

DONATE

Comments

You need to be logged in to view and post comments.
Not a member yet? Join here.
magnifiercross
>
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram
%d bloggers like this: