
This is a basic version of a ‘testimonials’ field group and template I use constantly. On some sites a custom post type is fitting for testimonials, but quite often the client only has a handful of testimonials and just wants to display them on one page. This is the perfect use case for a repeater field.
Field Groups
Download the field group file(s), then import them in your Dashboard.
Import via Custom Fields > Tools > Import Field Groups
Code Snippets
php
This is the basic repeater loop to display testimonials. My add_action uses the Genesis Framework, but the inner ACF code is the important part. Use it as you wish.
/** * Output ACF testimonials * * @author Mike Hemberger * @uses Advanced Custom Fields Pro * * @return void */ add_action( 'genesis_entry_content', 'parisi_do_franchise_testimonials' ); function parisi_do_franchise_testimonials() { $testimonials = get_field( 'testimonials' ); // Bail if no testimonials if ( ! $testimonials ) { return; } echo ''; foreach ( $testimonials as $testimonial ) { echo ''; }'; if ( $testimonial['testimonial'] ) { echo ''; } echo ''; if ( $testimonial['image'] ) { echo ''; } if ( $testimonial['byline'] ) { echo ' '; } echo ''; echo wp_get_attachment_image( $testimonial['image'], 'thumbnail' ); echo ''; } echo wp_kses_post(trim($testimonial['testimonial'])); echo '
css
This is the basic styling I used on the Parisi Speed School website. It should help get you started.
.testimonial { position: relative; background: #fff; font-size: 17px; font-weight: 300; padding: 20px 20px 20px 60px; margin-bottom: 30px; border: 1px solid rgba(0,0,0,0.1); } .testimonial::before { content: "“"; position: absolute; color: #CA2A3B; top: -26px; left: 6px; font-style: italic; font-size: 90px; } .entry-content .testimonial p { margin-bottom: 16px; } .testimonial-image img { border-radius: 50%; } .testimonial-byline { font-weight: 700; }
Leave a Reply