Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Bootstrap ACF Foreach & While Loop of Modals
<?php
$modals = array( 'modal1', 'modal2', 'modal3', 'modal4' );// Set the array
$i = 1; // Set the increment variable
foreach( $modals as $modal ):
?>
<!-- Button to Open the Modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal-<?php echo $i; // Displaying the increment ?>">
Open modal <?php echo $i;?>
</button>
<!-- The Modal -->
<div class="modal" id="myModal-<?php echo $i; // Displaying the increment ?>">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Modal Heading</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
I am <?php echo $modal; // Displaying the modal name ?>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<?php $i++; // Increment the increment variable
endforeach; //End the loop ?>
<?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();
}
<?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;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment