Opens in a new tab
1st Jun '22
/
2 comments

Testimonials Slider in Bricks

Testimonials Slider in Bricks

This Pro tutorial provides the steps to set up a dynamic testimonial slider in Bricks that pulls the data from a Custom Post Type's post fields and custom fields.

Main text → CPT item post content

Image → CPT item featured image

Name → CPT item post title

Position → CPT item's testifier_position custom field value

Star rating → based on CPT item's rating custom field value. If 5 is selected in the select field's dropdown, 5 stars will be output. If 4 is selected, 4 stars will be output and so on..

Step 1

Create a testimonial CPT using a plugin like CPT UI.

Step 2

Install and activate ACF.

If you would like to import the field group from our demo site, here's the json file.

Create a new field group.

Add a new field of type Text whose Field Name is testifier_position.

Add another field of type Select whose Field Name is rating.

Set the Choices to:

1 2 3 4 5

Set the Default Value to

5

Under Location, associate the field group with your Testimonial CPT.

click to enlarge

Step 3

Add Testimonials.

Enter/set the title, content, position, rating and featured image for each.

Step 4

Let us define a custom function that returns the HTML for stars output based on the passed-in rating argument.

In your child theme's functions.php or a snippets plugin like WPCodeBox, add:

This is a BricksLabs Pro tutorial.

For full access login below or create your BricksLabs Pro account

Get access to all 633 Bricks code tutorials with BricksLabs Pro

Related Tutorials..

Pro
Conditionally Hiding Bricks Filters based on Select Filter Value

Conditionally Hiding Bricks Filters based on Select Filter Value

How show or hide Bricks' filter based on the selection made by another filter.
Categories:
Tags:
Pro
Meta Box/ACF Images Staggered Grid Gallery in Bricks

Meta Box/ACF Images Staggered Grid Gallery in Bricks

Showing images from two Gallery-type of ACF or Image Advanced-type of Meta Box fields in a staggered grid layout.
Pro
Limit Bricks Users Query to Current Post’s User-type ACF Field Value

Limit Bricks Users Query to Current Post’s User-type ACF Field Value

Consider this scenario with ACF: "John Briley" user: "Gandhi" movie: The requirement is to show John Briley as the author when Gandhi movie item is…
Categories:
Pro
Events grouped by Event Date custom field in Bricks

Events grouped by Event Date custom field in Bricks

This Pro tutorial for Bricks users provides the steps to output posts of an event custom post type dynamically grouped by the value of their…
Categories:
How to import custom posts with featured images and custom fields by fetching an API using a single AJAX call

How to import custom posts with featured images and custom fields by fetching an API using a single AJAX call

In this tutorial, we will import a list of movies - including images and custom fields - inside a custom post type by fetching a…
Categories:
Tags:
How to Create a Grid Slider in Bricks

How to Create a Grid Slider in Bricks

In this tutorial, we'll learn how to create multiple rows and columns inside the default nested slider of Bricks. Introduction A user recently asked in…
Categories:
Pro
Merging ACF Gallery Images with Featured Image in Bricks

Merging ACF Gallery Images with Featured Image in Bricks

Updated on 12 Mar 2025 In the Bricks Facebook group a user asks: Merging images from different fields into a single gallery Hi, I have…
Categories: