Block Pattern: Key Numbers Row
Adds a row of four big numbers with short labels (customers, years, rating, countries), a quick way to show social proof on any page.
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' ) );
}
$stats = array( '2,400+' => 'Happy customers', '12' => 'Years in business', '4.9/5' => 'Average rating', '30' => 'Countries served' );
$columns = '';
foreach ( $stats as $number => $label ) {
$columns .= '<!-- wp:column --><div class="wp-block-column"><!-- wp:heading {"textAlign":"center","level":3} --><h3 class="wp-block-heading has-text-align-center">' . esc_html( $number ) . '</h3><!-- /wp:heading --><!-- wp:paragraph {"align":"center"} --><p class="has-text-align-center">' . esc_html( $label ) . '</p><!-- /wp:paragraph --></div><!-- /wp:column -->';
}
register_block_pattern( 'wpide/stats-row', array(
'title' => 'Key numbers: four stats',
'description' => 'Four large numbers with labels.',
'categories' => array( 'wpide-sections' ),
'keywords' => array( 'stats', 'numbers', 'counter' ),
'viewportWidth' => 1200,
'content' => '<!-- wp:columns {"isStackedOnMobile":false} --><div class="wp-block-columns is-not-stacked-on-mobile">' . $columns . '</div><!-- /wp:columns -->',
) );
} );Notes
Pair it with the animated counter snippet if you want the numbers to count up.
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.