In this step by step tutorial I will show three simple ways to display dynamic ratings for a custom post type called movie review using ACPT and Bricks Builder. With recent improvements it is much easier to show multiple fields that used to require extra coding or logic hacks. Follow along to learn how to create the custom post type, add ACPT fields for ratings, and render those ratings inside Bricks using three methods: rating element, number field, and icon-based conditional display.
Step 1: Create a custom post type for movie reviews
Start by creating a new custom post type named movie review with ACPT. Give it a name and icon, enable thumbnail support if you want, ensure the archive is enabled, and save. Once saved you will see the movie review menu appear in the WordPress admin sidebar.
Step 2: Add custom fields with ACPT
Under the ACPT Field Groups area create a new field group and add a condition so the fields only show on the movie review post type. This keeps the fields from appearing on other post types.
Open the field group and add a meta box. Inside that meta box add the fields you need for ratings and additional meta. For this tutorial I add:
- movie grade — text field (optional)
- star rating — rating field (can show halves like 1.5)
- number rating — number field (use whole numbers for condition logic)
- country — text field (just as an example, not used in the template)
Important tip: give the fields clear labels so you can easily pick them inside Bricks dynamic tags. We deliberately create both a star rating (for visual rating element) and a number rating (for logic checks when using conditional icons).
Step 3: Add demo content to test output
Create several movie review posts with different ratings. Make sure the star rating and the numerical rating match for each post so you can verify that every display method outputs consistent results.
Step 4: Build a Bricks template for the review cards
Create a new Bricks template. You can create a section or a reusable template; I use a section type here and publish it, then click edit with Bricks to open the Bricks backend.
Inside Bricks add a container (section) and then add a Block element to act as the repeating card. Inside the Block add a Heading for the title and a Rich Text element for content/excerpt.
Switch the container to a grid layout and make it three columns by setting the column template to 1fr 1fr 1fr and a gap value (I used 20). This creates a responsive grid of cards.
Enable the Query Loop on the Block and use the filter icon to limit the loop to the movie review post type. This makes the Block repeat once for each movie review post.
Add padding and a box shadow to the Block so each card stands out, and add top/bottom padding to the container so the grid is not glued to the top of the screen.
Step 5: Bind dynamic post title and excerpt
Select the Heading element, remove default text, and set its content to the Dynamic Post Title tag. For the Rich Text element set the dynamic tag to post content and limit the content length (for example 20 to 25 words) so the card stays compact.
Step 6: Method A — Use Bricks Rating element (star visual)
Add the Rating element from Bricks and set its value using the dynamic tag for the star rating field you created in ACPT. This is the simplest visual way to show star ratings and supports fractional values like 1.5 or 2.5.
Note: The Bricks rating element usually renders as a star UI, and respects decimal values so half stars are shown when your star rating has .5 values.
Step 7: Method B — Display the numeric rating
If you want to show a plain numeric rating next to or below the star visual, add a basic Text element and bind it to the number rating dynamic tag. This prints the numeric value like 3 or 4, which is handy for sorting or quick readability.
You can also use a Rich Text element and choose either number rating or star rating inside the dynamic tag dropdown. The star rating dynamic tag often formats as 1/5 style while the number rating tag prints just the number.
Step 8: Method C — Icon based stars with conditional logic
This method is useful if your page builder does not provide a rating element or you want full control over icon display. We will use icon elements and Bricks conditional rules based on the number rating.
Add an Icon element, choose a filled star from the icon list, set the color to yellow, and set the size to something like 2rem or your preferred size. Keep in mind icon size is not the same as width; adjust the size property to scale the star.
Wrap the icons inside a small Block container and duplicate the icon five times so you have five star elements. Then, for each icon, use the Condition tab to show or hide the icon based on the number rating field.
For the first icon set condition: number rating greater than or equal to 1. For the second icon: greater than or equal to 2. Repeat up to 5. This way if a review has a number rating of 3, only the first three star icons will appear. If rating is 2, the third to fifth icons will be hidden.
Important: Use the number rating field for conditions because conditions require a numeric comparison. Number rating should be stored as a whole number for this conditional method to work cleanly. The star rating field is fine to use for visual elements but might contain decimals which complicate simple greater-than conditions.
Step 9: Final checks and tweaks
- If posts are showing in decreasing order but you want ascending, change the order inside the Query Loop settings.
- Design touches such as adding prefixes or suffixes to the numeric rating, adjusting spacing, or changing star colors are straightforward but left as styling tasks.
- Always cross check your demo posts so star rating and number rating are consistent to verify all three display methods match.
Common troubleshooting tips
- If icons never appear, check that the condition is pointing to the number rating dynamic tag and that the number rating values are whole numbers.
- If star visuals show halves but your condition logic expects integers, use the number rating for logic and star rating for visuals.
- Use padding and box shadow on the Block to visually separate cards and make the grid readable on all screen sizes.
Frequently asked questions
Do I need both star rating and number rating fields?
You do not strictly need both, but it is recommended. Use the star rating field for visual star displays since it supports decimal values like 1.5. Use the number rating field for condition logic and numeric output where whole numbers are easier to compare and manipulate.
Can the icon method show half stars?
Not easily with the simple greater-or-equal conditions shown here. The icon method works best with whole number ratings. If you need half stars, use the Bricks Rating element bound to the star rating field that supports decimals.
How do I change the number of columns or gap in the grid?
In the container component set the display to grid and change the column template to values like 1fr 1fr for two columns or 1fr 1fr 1fr for three columns. Adjust the gap value to control spacing between rows and columns.
Why does star rating display as 1/5 sometimes?
Some dynamic tags format the star rating as a fraction (for example 1/5) by default. If you prefer a plain number, use the number rating field or format the output with a Rich Text element and prefix or suffix as desired.
Can I sort movie reviews by rating?
Yes. Use the Query Loop settings to order posts by the number rating meta key. Sorting works best when the number rating is stored as a numeric field.
What if my page builder does not have a rating element?
Use the icon-based method with conditional display on each star icon. That method recreates a star rating without a native rating element and relies on the numeric field for logic.
Wrap up
That is the complete walkthrough. You now have three ways to display ACPT dynamic ratings in Bricks Builder: the built-in rating element for visual stars, the number field for plain numeric output and sorting, and the icon with conditional rules for maximum control when a rating element is not available. Use the approach that matches your design and data needs.
Try each method on your movie review posts, test edge cases like half-star values and ordering, and adjust styling as required. Happy building!
