Dynamic Testimonials with GenerateBlocks and ACF

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!