ACF Repeater in Oxygen

The upcoming version of Oxygen, v3 is going to include a visual loop builder using which we can loop through the rows of a repeater-type custom field created via ACF and configure the output visually.

Until then, we will have to do it manually.

This tutorial provides the steps to display rows of a Advanced Custom Fields‘ Repeater field using a Code Block component in Oxygen.

Scenario:

Custom Post Type: dogfood

ACF Field group name: Dog Food Ingredients

Field name: ingredients

Sub field name: ingredient

ACF export (mirror)

With a list of ingredients entered for a Dog Food entry,

the objective is to show these on the front end as a simple unordered list:

Step 1

Edit the Template that applies to all single entries of dogfood CPT with Oxygen.

Add a Section.

Add a Heading inside that reads say, “Ingredients”.

Add a Code Block.

PHP & HTML:

<?php
// check if the repeater field has rows of data
if ( have_rows( 'ingredients' ) ) {
	echo '<ul class="ingredients">';
	// loop through the rows of data
	while ( have_rows( 'ingredients' ) ) : the_row();
		printf( '<li class="ingredient">%s</li>', get_sub_field( 'ingredient' ) );
	endwhile;
	echo '</ul>';
} else {
	// no rows found
}
?>

Step 2

If every Dog Food entry is to have at least one ingredient entered, the ingredients repeater field should be made mandatory. In this case, this step is not needed.

Let’s make it such that the Section is only output if at least 1 ingredient has been entered.

Follow https://wpdevdesign.com/condition-acf-field-not-empty/.