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
Post/Page-Specific Background Slideshow in Bricks using Backstretch

Post/Page-Specific Background Slideshow in Bricks using Backstretch

This Pro tutorial provides the steps to load and initialize Backstretch on the images uploaded to a post (of any post type like Pages or…
Categories:
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:
How to add a custom SwiperJS slider in Bricks

How to add a custom SwiperJS slider in Bricks

In this tutorial, we'll show you how to integrate a custom slider in Bricks using the SwiperJS library and how to add custom parameters using…
Categories:
Tags: