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.
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.
Add the ACF Loop Code
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?php | |
| /** | |
| * Bootstrap ACF While Loop Modals | |
| */ | |
| // *Repeater | |
| // modal_repeater | |
| // *Sub-Fields | |
| // modal_header | |
| // modal_body | |
| // modal_footer | |
| // check if the repeater field has rows of data | |
| if( have_rows('modal_repeater') ): | |
| $i = 1; // Set the increment variable | |
| // loop through the rows of data | |
| while ( have_rows('modal_repeater') ) : the_row(); | |
| $modal_header = get_sub_field('modal_header'); | |
| $modal_body = get_sub_field('modal_body'); | |
| $modal_footer = get_sub_field('modal_footer'); | |
| ?> | |
| <!-- Button to Open the Modal --> | |
| <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal-<?php echo $i;?>"> | |
| Open modal <?php echo $i;?> | |
| </button> | |
| <!-- The Modal --> | |
| <div class="modal" id="myModal-<?php echo $i;?>"> | |
| <div class="modal-dialog"> | |
| <div class="modal-content"> | |
| <!-- Modal Header --> | |
| <div class="modal-header"> | |
| <h4 class="modal-title"><?php echo $modal_header;?></h4> | |
| <button type="button" class="close" data-dismiss="modal">×</button> | |
| </div> | |
| <!-- Modal body --> | |
| <div class="modal-body"> | |
| <?php echo $modal_body; ?> | |
| </div> | |
| <!-- Modal footer --> | |
| <div class="modal-footer"> | |
| <button type="button" class="btn btn-danger" data-dismiss="modal"><?php echo $modal_footer; ?></button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <?php $i++; // Increment the increment variable | |
| endwhile; //End the loop | |
| else : | |
| // no rows found | |
| endif; |
Modal 1 is so cool
The body can go here
2nd Modal is poor
Anybody can go here
Numero 3 Modality
Somebody help me here
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.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?php // <- remove and add code in functions.php | |
| add_shortcode( 'wpb_while_modals_acf', 'wpb_while_modals_acf' ); | |
| /** | |
| * Bootstrap ACF While Loop Modals | |
| */ | |
| function wpb_while_modals_acf() { | |
| ob_start(); | |
| // *Repeater | |
| // modal_repeater | |
| // *Sub-Fields | |
| // modal_header | |
| // modal_body | |
| // modal_footer | |
| // check if the repeater field has rows of data | |
| if( have_rows('modal_repeater') ): | |
| $i = 1; // Set the increment variable | |
| // loop through the rows of data | |
| while ( have_rows('modal_repeater') ) : the_row(); | |
| $modal_header = get_sub_field('modal_header'); | |
| $modal_body = get_sub_field('modal_body'); | |
| $modal_footer = get_sub_field('modal_footer'); | |
| ?> | |
| <!-- Button to Open the Modal --> | |
| <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal-<?php echo $i;?>"> | |
| Open modal <?php echo $i;?> | |
| </button> | |
| <!-- The Modal --> | |
| <div class="modal" id="myModal-<?php echo $i;?>"> | |
| <div class="modal-dialog"> | |
| <div class="modal-content"> | |
| <!-- Modal Header --> | |
| <div class="modal-header"> | |
| <h4 class="modal-title"><?php echo $modal_header;?></h4> | |
| <button type="button" class="close" data-dismiss="modal">×</button> | |
| </div> | |
| <!-- Modal body --> | |
| <div class="modal-body"> | |
| <?php echo $modal_body; ?> | |
| </div> | |
| <!-- Modal footer --> | |
| <div class="modal-footer"> | |
| <button type="button" class="btn btn-danger" data-dismiss="modal"><?php echo $modal_footer; ?></button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <?php $i++; // Increment the increment variable | |
| endwhile; //End the loop | |
| else : | |
| // no rows found | |
| endif; | |
| return ob_get_clean(); | |
| } |
Related Posts:
