How to Add a Custom Testimonials Section in WordPress with ACF + GeneratePress

by

Want a stylish testimonials section without building a custom page template? Using ACF repeater fields and GeneratePress hooks, you can add a randomized, masonry-style testimonial layout that’s fully customizable.

Step 1: Set up ACF

  • Field Group: Testimonials
  • Repeater Field: Testimonials
  • Subfields:
  • Testimonial Heading – testimonial_heading (text)
  • Testimonial Content – testimonial_content (textarea)
  • Testimonial Name – testimonial_name (text)
  • Testimonial Company – testimonial_company (text)
  • Location: Page = Testimonials

Tip: You can add extra subfields like Photo, Rating, or Date if you want to show more info per testimonial.

Step 2: Create a GeneratePress Hook Element

  • Hook: generate_after_content
  • Execute PHP: Yes
  • Display Rules: Page = Testimonials

This allows the testimonial section to appear on your chosen page without touching theme templates.

Step 3: Add PHP code

This code loops through the testimonials, randomizes their order, and adds an inline SVG quote:

<section class="testimonials">

<?php $testimonials = get_field('testimonials'); // get repeater as array

if( $testimonials ):

    shuffle($testimonials); // randomize array order

    foreach( $testimonials as $testimonial ): ?>
        <article class="testimonial">
            <h3 class="testimonial-heading">
                <!-- Inline SVG quote icon -->
                <svg class="quote-icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                    <g>
                        <path fill="none" d="M0 0h24v24H0z"/>
                        <path d="M4.583 17.321C3.553 16.227 3 15 3 13.011c0-3.5 2.457-6.637 6.03-8.188l.893 1.378c-3.335 1.804-3.987 4.145-4.247 5.621.537-.278 1.24-.375 1.929-.311 1.804.167 3.226 1.648 3.226 3.489a3.5 3.5 0 0 1-3.5 3.5c-1.073 0-2.099-.49-2.748-1.179zm10 0C13.553 16.227 13 15 13 13.011c0-3.5 2.457-6.637 6.03-8.188l.893 1.378c-3.335 1.804-3.987 4.145-4.247 5.621.537-.278 1.24-.375 1.929-.311 1.804.167 3.226 1.648 3.226 3.489a3.5 3.5 0 0 1-3.5 3.5c-1.073 0-2.099-.49-2.748-1.179z"/>
                    </g>
                </svg>
                <?php echo esc_html($testimonial['testimonial_heading']); ?>
            </h3>
            <p class="testimonial-content"><?php echo esc_html($testimonial['testimonial_content']); ?></p>
            <footer class="testimonial-meta">
                <span class="testimonial-name"><?php echo esc_html($testimonial['testimonial_name']); ?></span>
                <span class="testimonial-company"><?php echo esc_html($testimonial['testimonial_company']); ?></span>
            </footer>
        </article>
    <?php endforeach; ?>
<?php endif; ?>

</section>

Customization ideas:

  • Change shuffle($testimonials) to remove randomization if you want a fixed order.
  • Add additional <span> or <img> tags in the loop for photos or star ratings.
  • Wrap the SVG in a <span> and adjust its fill color dynamically using CSS classes.

Step 4: Add CSS

.testimonials {
  display: block;
}
.testimonial {
  margin-bottom: 2rem;
  padding: 2rem;
  border: 1px solid #217590;
  break-inside: avoid; 
}
.testimonial-heading {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
  font-size: 1.5rem;
}
.testimonial-heading .quote-icon {
  width: 2.5rem;
  height: 2.5rem;
  fill: #ff5c67;
  opacity: 0.3; 
  flex-shrink: 0;
}
.testimonial-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  margin-top: 1rem;
}
.testimonial-name {
  font-weight: 600;
}
.testimonial-company {
  font-size: 0.9rem;
  opacity: 0.7;
  color: #217590;
}

/* Masonry 2-column layout on desktop */
@media (min-width: 768px) {
  .testimonials {
      column-count: 2;
      column-gap: 2rem;
  }
}

Customization ideas:

  • Adjust column-count for more or fewer columns.
  • Change .quote-icon width/height for bigger or smaller quotes.
  • Use flex-direction: row in .testimonial-meta to align name/company horizontally.
  • Swap border for box-shadow to create a card effect.

Step 5: Final Notes

  • Mobile-first design: stacks on small screens, two-column masonry on desktop.
  • Fully PHP-driven, so no extra plugins or JavaScript required.
  • Easy to expand: add photos, ratings, or extra fields in ACF and loop them in the template.

Tip: You can play with colors, spacing, and font sizes in the CSS to match your brand style.

See It in Action

Want to see this testimonial section running live? Check out an example on my Testimonials page.

Need Help Customizing Your WordPress Site?

If you need help adding a similar section or customizing parts of your WordPress site, feel free to get in touch with me. I’d be happy to help you out.