How To Create A Star Rating System In WordPress With CSS and ACF

I recently had a request from a WordPress client for a star rating widget of sorts, so I believed I’d share the answer I got here up with using Advanced Custom Fields (ACF) and CSS. There are not any images involved – just pure CSS plus Unicode stars and a handy range slider on the back end so the client can easily enter a rating anywhere from 0 to five in steps of 0.1. Due to a pleasant example I discovered on CodePen (seen below), the front end elements were easy and straightforward, utilizing CSS custom properties and variables in a compact code. Connecting this to ACF so the client could easily edit their rankings brought all of it together in a fast solution that I even have not seen elsewhere, thus the concept to make it available here in case anyone else is searching for something similar. Able to dig in?

UNLIMITED DOWNLOADS: 500,000+ WordPress & Design Assets

Enroll for Envato Elements and get unlimited downloads starting at only $16.50 per thirty days!



Coding The Stars

See the Pen
Tiny but accessible 5 star rating
by Fred Genkin (@FredGenkin)
on CodePen.0

 

As you possibly can see from the above CodePen, there isn’t much involved, yet it’s a cleverly coded idea. That is taken from a terrific tutorial over on CSS Tricks, called “Five Methods for Five-Star Ratings”. The HTML below utilizes a custom CSS property (--rating) and makes no calls to the server while maintaining accessibility.

The property is definitely a conversion from a worth to a percentage that’s handled in CSS using the calc() function:

--percent: calc(var(--rating) / 5 * 100%);

Then the filling of the celebrities based on the rating/percentage is finished using a linear-gradient background that creates hard color stops at the proportion points which can be designated.

background: linear-gradient(90deg,
  var(--star-background) var(--percent), 
  var(--star-color) var(--percent)
);

Within the CodePen example, the creator uses CSS variables for the star size, color, and background. You may go this route if you ought to have the ability to alter those elements easily, or you possibly can just code them in yourself if you have got no plans to alter them down the road.

background: linear-gradient(90deg,
  #fc0 var(--percent), 
  #fff var(--percent)
);

Once the celebrities code is finished, we are able to now make it work with the ACF range slider.

ACF Range Field

I’m assuming you’re already conversant in Advanced Custom Fields, because you arrived at this text with it within the title. If not, you possibly can learn more concerning the plugin here.

For our use case, we would like to create a Range field so the client can select a spread from 0 to five in steps of 0.1, enabling them to set the star rating at 4.7, for instance.

Within the WordPress backend, navigate to Custom Fields > Add Recent to create a recent field group, then give it a title and click on the button labeled Add Field to create the brand new field. Add the Field Label (we’re using “Stars” in our example), select the Range field type, set the Maximum Value to 5, and the Step Size to 0.1. You may make every other edits you see fit, but these are the minimum to get this working the best way we would like it to work.

Star Rating field

After saving your changes, you possibly can now edit whatever page, post, or template PHP file during which you ought to show the star rating by entering the next code:

'; ?>

This code replaces the HTML we were originally using, and now it would show the rating that is ready on the backend when the Range field is updated. Pretty easy, right?

Star Rating Range Slider

For reference, here’s the entire CSS that may make the magic occur (derived from the SCSS within the CodePen).

.stars {
    --percent: calc(var(--rating) / 5 * 100%);  
    display: inline-block;
    font-size: 60px;
    font-family: Times; 
    line-height: 1;
}
.stars::before {
    content: '★★★★★';
    letter-spacing: 2px;
    background: -webkit-gradient(linear, left top, right top, from(#fc0), to(#fff));
    background: linear-gradient(90deg, #fc0 var(--percent), #fff var(--percent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

 

This post may contain affiliate links. See our disclosure about affiliate links here.

Leave a Reply

Your email address will not be published. Required fields are marked *