Block Pattern: Three Testimonials
Adds a testimonials pattern with three customer quotes side by side, built from core Quote blocks so it inherits your theme's quote styling.
Opens WPIDE on
Code
add_action( 'init', function () {
if ( ! function_exists( 'register_block_pattern' ) ) {
return;
}
if ( ! WP_Block_Pattern_Categories_Registry::get_instance()->is_registered( 'wpide-sections' ) ) {
register_block_pattern_category( 'wpide-sections', array( 'label' => 'Site Sections' ) );
}
$quotes = array(
array( 'They rebuilt our site in two weeks and sales went up the month after.', 'Maria L., bakery owner' ),
array( 'Clear communication, fair prices and a result our whole team loves.', 'Tom R., operations lead' ),
array( 'The best support we have had from any agency. Highly recommended.', 'Aisha K., founder' ),
);
$columns = '';
foreach ( $quotes as $quote ) {
$columns .= '<!-- wp:column --><div class="wp-block-column"><!-- wp:quote --><blockquote class="wp-block-quote"><!-- wp:paragraph --><p>' . esc_html( $quote[0] ) . '</p><!-- /wp:paragraph --><cite>' . esc_html( $quote[1] ) . '</cite></blockquote><!-- /wp:quote --></div><!-- /wp:column -->';
}
register_block_pattern( 'wpide/testimonials-three', array(
'title' => 'Testimonials: three quotes',
'description' => 'Three customer quotes in columns.',
'categories' => array( 'wpide-sections' ),
'keywords' => array( 'testimonials', 'reviews', 'quotes' ),
'viewportWidth' => 1200,
'content' => '<!-- wp:group {"layout":{"type":"constrained"}} --><div class="wp-block-group"><!-- wp:heading {"textAlign":"center"} --><h2 class="wp-block-heading has-text-align-center">What our clients say</h2><!-- /wp:heading --><!-- wp:columns --><div class="wp-block-columns">' . $columns . '</div><!-- /wp:columns --></div><!-- /wp:group -->',
) );
} );
Notes
The columns stack automatically on phones.
How to add this snippet
- Install WPIDE on your WordPress site (it is free) and open Code Snippets.
- Use snippet above adds it from the library in one click. Or copy the code into a new snippet with the same code type.
- It is added inactive: review the code and settings, then switch it on.