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.
Gallery
Field Groups
Download the field group file(s), then import them in your Dashboard.
Import via Custom Fields > Tools > Import Field Groups
Download Field Groupacf-export-2016-09-09-1.json
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 '';
if ( $testimonial['image'] ) {
echo '';
echo wp_get_attachment_image( $testimonial['image'], 'thumbnail' );
echo '';
}
echo wp_kses_post(trim($testimonial['testimonial']));
echo '';
}
if ( $testimonial['byline'] ) {
echo '';
}
echo '';
}
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