07967 325669 info@mootpoint.org

Advanced Custom Fields provides very powerful tools to extend a WordPress site using custom fields. The ACF UI integrates tightly with the standard WordPress admin making for a robust and seamless experience.

It is a common need to output a responsive grid from an ACF repeater field, but it can be tricky to output the results in rows and columns. An elegant solution is to break the repeater field value array into chunks using the array_chunk function:

$items = get_field('items');
$cols_in_row = 4;
if ( $items ) {
	$rows = array_chunk( $items, ceil( count($items) / $cols_in_row ) );
	foreach ( $rows as $row ) {
		echo '<div class="row">';
		foreach ( $row as $item ) {
	        echo '<div class="col-<?php echo intdiv(12, $cols_in_row); ?>">';
	        	echo '<a href="' . $item['link'] . '" target="_blank" rel="noopener noreferrer">';
	            echo wp_get_attachment_image( $item['image']['ID'], 'medium' );
	            echo '</a>';
	        echo '</div>';
    	}
    	echo '</div>';
    }
}

This approach avoids having to use counters for row and column and output termination markup on the beginning or end of rows.

This example uses a simple repeater field with 2 sub-fields: Image and Link. Download the json here to import into ACF. Unzip it before importing. Note that you need an ACF Pro license to use repeater fields.