Skip to content

Create an ACF Repeater Loop of Bootstrap Modals in WordPress

Create a while loop of Bootstrap Modals with an ACF Repeater field in WordPress.

Create the ACF Repeater fields.

Acf Repeater Modal

 

You can create as many fields as needed, this example uses 3 basic fields, assign the field group to a post or page and populate the repeater rows.

Acf Repeater Modal Rows

Add the ACF Loop Code

 

 

So the ACF repeater is checked to see if any rows are present, if so, the counter increment is set $i and a while loop is starts. The counter increment after each loop iteration is increased by 1, that counter variable is used in the button and modal ID to link the correct modals together.

Inside the loop in the Modal code, the 3 ACF subfields are used in various locations.

Shortcode Version

You can also do it as a shortcode and insert the loop.

Leave a Comment





Scroll To Top