isotropic-2022
Share
Blog
Search
Menu

How To Make A Testimonial Page Using ACF Pro and Oxygen Builder

By James LePage
 on March 22, 2021
Last modified on January 7th, 2022

How To Make A Testimonial Page Using ACF Pro and Oxygen Builder

By James LePage
 on March 22, 2021
Last modified on January 7th, 2022

In this quick article, we're going to show you how to make a testimonial page using ACF Pro and Oxygen Builder. The goal of this isn't to act as a tutorial (per say), but as a reference that you can use to understand the power of these two plugins working together.

First, let's conceptualize the data structure of our testimonial. We want to show a name, quote and video. To do that, we'll use three individual fields: 1) Name, 2) Quote and 3) a video testimonial, hosted on a 3rd party service. We'll also use the ACF Pro Repeater field type, which will allow our clients to add and remove as many testimonials as they'd like. This is a great use case for this powerful field - repeating content that you don't want to / need to make a complete custom post type for. It also natively integrates with the Oxygen Builder repeater field.

Here we can see that the field is a single repeater, with three sub fields: Name, Quote, Testimonial.

On the clients side of things, it's easy to use and shows up in the testimonials page - easy to remember how to add and remove on their end. Here's what they see:

Once the data is populated, it shows on the frontend like so. Clients can easily edit, add, remove, and reorder this content.

On the Oxygen Backend, we're using the repeater. It's a simple structure. The name and quote are populated by using Oxygen's built in dynamic data feature.

General structure on the back end.
Using the dynamic data feature for the text.

The complicated part of this process was adding in the video, which is populated as an embed iFrame. Also, this site hasn't gone live yet, so we may rework the way videos are added to the page, if there's a major performance implication. Currently, we're using the PHP section of a code block to call the subfield into the individual section of the repeater. Here's how that works:

And that's how we made a client-editable testimonial section using ACF Pro and Oxygen Builder. This should show you a use case as well as the power behind this plugin pair.

Subscribe & Share
If you liked this content, subscribe for our monthly roundup of WordPress news, website inspiration, exclusive deals and interesting articles.
Unsubscribe at any time. We do not spam and will never sell or share your email.
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
Article By
James LePage
Contributors/Editors
notloggedin
James LePage is the founder of Isotropic Design, a digital agency that builds WordPress websites. I read, write and design constantly!
We're looking for new authors. Explore Isotropic Jobs.
Close
🇺🇸 English
Save posts, access exclusive content, join members-only communities and more.
Dark Mode Toggle
Love web dev? Join the Isotropic weekly newsletter.
cross
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram
0

Your Cart is Empty