August 15, 2023

Dynamic Testimonials with GenerateBlocks and ACF

Play Video

Dynamic testimonials are a fantastic way to engage with audiences on websites. In this tutorial, we’ll explore together with The Admin Bar how to create WordPress dynamic testimonials using GenerateBlocks and ACF.

Introduction to Dynamic Testimonials

Dynamic testimonials are all about flexibility and ease of use. Imagine being able to add, edit, or remove testimonials right from the backend of your website, and having them automatically update on the frontend. No more hard-coding each testimonial or struggling with rigid layouts. With dynamic testimonials, you can manage all your testimonials in one place, and they will display beautifully on your site, adapting to the design and layout. Let’s dive into how you can create these user-friendly testimonials using WordPress, GenerateBlocks, and ACF.

Implementing WordPress Dynamic Testimonial Content

Creating a Custom Post Type with ACF

Before we design, we’ll create the structure for our testimonials using ACF. Here’s a step-by-step guide:

  1. Install ACF Plugin
    If you haven’t already, install and activate the Advanced Custom Fields plugin in WordPress.
  2. Create a Custom Post Type
    Go to Custom Fields > Add New. Name it “Testimonials.”
  3. Add Fields
    Click on Add Field and create the following fields:Image Field
    Label it “Person’s Photo” and choose the field type as ‘Image.’
    Text Area
    Label it “Testimonial Text” and choose the field type as ‘Text Area.’
    Text Fields
    Create two text fields, one for the person’s name and another for the company name.
  4. Publish
    Click on Publish to save your custom post type.

Designing the Layout for Dynamic Testimonials

Planning the Layout

  1. Choose a Background
    Select a background color or pattern that complements your site’s design.
  2. Grid Layout
    Decide on the grid layout, such as a three-column grid for the testimonials.
  3. Text Alignment
    Align the text for visual appeal, considering the overall design of your site.

Creating Testimonial Cards

  1. Background
    Create a white background with a Border radius for each testimonial card.
  2. Image
    Add an image element. Enable Dynamic data > Post meta > Paste the field name for the image (from ACF).
  3. Text
    Add a text element for the testimonial. Enable Dynamic data > Post meta > Paste the field name for the text (from ACF).
  4. Name
    Add a text element for the person’s name. Content source > Title.
  5. Company Name
    Add a text element for the company name. Enable Dynamic data > Post meta > Paste the field name for the company name (from ACF).
  6. Visual Cue
    Add an SVG icon (like a quote mark) to signify that it’s a testimonial.

Making It Responsive

  1. Tablet Mode
    Adjust the columns to 33% and 66% to fit the tablet view.
  2. Mobile Mode
    Adjust the design for mobile, ensuring that everything takes up 100% of the width.

Advanced Filtering with Taxonomies

  1. Contextual Filtering
    Use tags like “SEO” or “price” to filter testimonials.
  2. Combining Filters
    Combine different filters to show specific testimonials, depending on your needs.

Creating dynamic testimonials with GenerateBlocks and ACF opens up a world of possibilities for personalizing your website. By following this guide, you’ll be able to create WordPress dynamic testimonials that not only look great but also offer a seamless management experience. Happy designing!

Dynamic Testimonials with GenerateBlocks and ACF
Welcome back!
Enter your Helwp credentials to sign in.

No Account yet? Sign Up

My Account
Give Feedback
Describe your feedback *
Rate Helwp
Problem *
Describe the problem
Want us to reply?
Your E-Mail
Affiliate Disclosure

At Helwp, we’re committed to transparency and honesty. Therefore, we want to inform you that some of the links on our website are affiliate links. This means that, at no additional cost to you, we may earn a small commission if you click through and make a purchase.

We only promote products or services that we genuinely believe in. These affiliate commissions help us to maintain the website and continue to provide you with free, high-quality WordPress content.

If you are interested in how you can support us even further, check out our support page.