Gold Penguin Logo with Text

Create Dynamic Testimonials in Breakdance (with CPT)

Learn how to easily add dynamic testimonials to Breakdance with this quick guide. Boost your site's trust factor and attract more visitors in just a few steps.
Updated August 31, 2023

Creating a dynamic testimonials section in your website can boost your credibility and win over potential customers. 

Think about it: showcasing client experiences for a product e-store, displaying student feedback for an online course, or sharing client stories for a consultancy. Each provides a proof of your output as a business or professional. But you don't want to copy and paste a section over and over again. The proper way is to create these testimonials dynamically.

In this guide, I'll walk you through integrating dynamic testimonials in Breakdance with a couple of plugins. I promise, it should only take you a few minutes to set up. 

testimonial page

So, let’s get started!

How to Create Dynamic Testimonials in Breakdance 

In this guide, let’s try to build a custom post type to display testimonials on a page. Follow the steps below:

1) Install CPT and ACF

First off, we’ll need additional plugins to quickly create custom post types. 

CPT or Custom Post Type UI is a WordPress plugin that allows you to create and manage custom post types and taxonomies for your website.

ACF or Advanced Custom Fields is another type of WordPress plugin that allows you to add custom fields for your post types. This plugin will help you later on in displaying custom field values in your Breakdance template.

So, let’s install and activate these two plugins. Navigate to Plugins > Add New and search for CPTUI and Advanced Custom Fields.

CPTUI installation
ACF installtion

2) Create a New Post Type

Once the plugins are activated, go ahead and add a new post type.

Go to CPT UI on the left side of your dashboard. Enter your post type slug, plural label, singular label. Then, click ‘Add Post type.’

In our example, we’ll name our new post type ‘testimonial.’ 

CPT add new post type

Once you’re done, a ‘testimonials’ post type should appear on the left-hand side of your dashboard.

testimonials post type

3) Create New Fields

Next, we need to add custom fields for our testimonial post type. These custom fields will contain the attributes of our post type.

On the left side of your dashboard, head over to ACF. Click ‘Add New.’

Enter a field group title, field type, field label, and field name. To add another field group, hit ‘+ Add Field.’ Adjust the order by dragging.

ACF edit field group

For our testimonial page, I wanted to display the user’s photo, name, company position, testimony title, testimony details, star rating, and date. So, let’s create a field for each. Make sure to choose the appropriate field type for each user data. 

ACF table field group

For the user photo, use an image field type. For the star rating, use ‘Number.’ For the date, use ‘Date Picker.’ Don’t forget to set the date’s display and return format. 

ACF field date picker

The rest of the fields can have a text type.

Once you’re done adding new fields, make sure to set the rules within the Settings section. Post type should be equal to 'testimonial,' as shown. 

ACF set rules

Then, click ‘Save Changes.’

4) Add a New Testimonial

Let’s now add new testimonials for our site. On the left side of your dashboard, click the testimonials > Add New. This should open a blank page on your editor. 

Go ahead and enter the title of the page. Here, we can use the user’s name as the title. Keep in mind that you don’t need to edit this on Breakdance.

Breakdance page title

Then, below the editor, you’ll see all the custom fields you’ve previously created. Let’s upload the user’s photo and enter some dummy data, as shown.

Breakdance enter testimonial details

Once you’re satisfied, click ‘Publish.’

Follow the same process to add more user testimonies.

5) Create a Testimonial Template in Breakdance

Navigate to Breakdance > Templates. Click ‘Add Template’ and choose ‘Add Custom Template.’

Then, enter the template title ‘Testimonials’ and set the location to Single/ testimonials. Click ‘Add Template.’

add Breakdance template

Edit your new testimonial template in Breakdance. Style it as you want.

Here, I created a column to display the user’s photo, name, and title. I also edited the font size, image size, and spacing. To style the element, simply click it and adjust its attributes shown on the left side of the editor.

Here, we want to display the user info dynamically. Click the element and tap the little icon beside the label, as shown.

Breakdance dynamic icon

Within the ACF section, choose a ‘Testimonial detail’ you want to display. In this case, we want to dynamically fetch the user’s photo.

Breakdance dynamic image

Then, I changed the user’s photo to circle by setting the radius to 50%.

Breakdance edit photo

Now, do the same for the rest of the user’s info.

Breakdance insert dynamic data

You can add more elements and dynamically fetch the rest of the user’s details. Add texts, icons, star rating, and date. Search them up on the left side menu and click to add. Adjust the size, layout, and color as desired.

You should achieve a similar output like this:

Breakdance testimonial section

Once you’re satisfied, click ‘Save.’

6) Create a Testimonial Global Block

The purpose of a global block is to replicate a content and use them anywhere on our site. In our case, we’ll create a testimonial global block so we can repeatedly use them anywhere on our page. So, let’s go ahead and create one.

Navigate to Breakdance > Global Blocks. Then, tap ‘Add Global Block’ and enter a block title. Let’s name it ‘Individual-Testimony.’

Edit your global block in Breakdance. Here, you can create a custom layout or just copy the Breakdance template you’ve previously created. Save the changes.

You should now have a global block that looks similar below.

Breakdance global block

7) Display Your Testimonials on Breakdance Page

Now you have the global block for your testimonials, you can add it anywhere on your existing page.

For this example, let’s try to create a new Breakdance page to display all our testimonials. Here, I added a new section and heading ‘What our clients say about us.’ But feel free to add any title you want.

Then, on the left-hand side, search for the ‘Post Loop Builder’ element. From the ‘Global Block’ dropdown menu, choose the global block you’ve just created. In this guide, our global block is ‘Individual-Testimony.’

Breakdance post loop builder

On the side menu, go to Query > Custom > Edit Query. Set your ‘Source’ to ‘Post Types’ and ‘Include’ to the name of your custom post type. 

Breakdance edit post query

In this example, we picked ‘testimonials.’Edit the other fields as desired. Then, finish with ‘Apply Query.’

8) Edit the Style and Layout

Finally, tweak the appearance of your testimonials section by adjusting the layout or adding a background color as you like. Once you’re satisfied, click ‘Save.’

Breakdance edit testimonial layout

Here’s what our testimonials page looks like on our front-end:

Breakdance testimonial view

What’s Next?

That’s a wrap! 

Now that you’ve learned how to add testimonials in Breakdance, go ahead and explore other plugins to enhance your site’s user experience.

If you’re a business, try adding a Google map into your page. Or use extensions like Elements Hive to add some cool animations on your page. Keep tweaking while you learn the other powerful features of Breakdance.

Got any questions? Leave your comments below, and I'll try my best to answer you as thoroughly as I can.

Want To Learn Even More?
If you enjoyed this article, subscribe to our free monthly newsletter
where we share tips & tricks on how to use tech & AI to grow and optimize your business, career, and life.
Written by Christy Cañete
Christy Cañete is a software engineer who's passionate about front-end web design. Not only can she code, but she writes too! She loves breaking down technical topics into super easy tutorials. If you're looking to learn without the jargon, she's your go-to.
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
Join Our Newsletter!
If you enjoyed this article, subscribe to our free monthly newsletter where we share tips & tricks on how to use tech & AI to grow and optimize your business, career, and life.
magnifiercross