(Not sure something similar was posted here before, a quick search didn’t bring up anything. Also, I know it is coming soon but I needed it now )
Let’s say you have a review_stars
field associated to a custom post type review
. Now you want to loop over the reviews
and display the correct number of stars. This is how I did it:
- Preparation:
- Create the custom post type you want to use (in this example,
review
). - Create a field group of type number (in this example,
review_stars
). - Associate the field group to the post type. (Not strictly necessary because bricks shows all custom fields and not only the ones related to the post type. However, this will hopefully change in the future.)
- Create a number of
reviews
so that we can query something in the next step. Use different ratings on each review to be able to see if things work when we get to the next step.
- Create the custom post type you want to use (in this example,
- In the page or template on which you want to show the ratings, create a container (or section, or block - it doesn’t matter) and add a single star icon inside the container. Now, add the query loop to the container and set it to query post type
review
. - Next, click the star icon inside the container and open the conditions. (Top left.)
- Select “dynamic data”
- Select
review_stars
- Select “>=”
- Type “1”
Now we have a container with a star inside of it that is only shown when the star rating is one or higher. The only thing left to do is clone the first star four more times and, on each star, increase the condition by one, so the second star will only be shown when the rating is 2 or higher etc.
Cheers!
P.S.: I tried this with ACF Pro but approach should be similar with WordPress native custom post types or other CPT plugins.
First star:
Fifth star: