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.

2 Comments

  1. Jordan on September 18, 2020 at 10:12 am

    When adding this to multiple ACF repeater rows, it seems to duplicate the original modals contents.

    • Neil Gowran on September 18, 2020 at 9:39 pm

      This would be because the ids are the same, for multiple repeaters on the same page you would need to make the id name unique per each.

Leave a Comment