PHP - How can I Create Dynamic Bootstrap Rows & Columns in WordPress based on how many sub arrays an array has?

Question

I am using the Advanced Custom Fields plugin in WordPress to display rows of different employees. Basically, a User can input data in the Admin section, and it creates an array that can be used to display the data.

Currently, The array is storing 5 values(subarrays):

array (
    0 => 
        array (
            'profile_pic' => 'http://ocdd.vztechsolutions.com/wp-content/uploads/2017/11/jaime.jpg',
            'profile_name' => 'Jaime Daignault',
            'profile_job' => 'Executive Director',
            'profile_email' => '[email protected]',
        ),
    1 => 
        array (
            'profile_pic' => 'http://ocdd.vztechsolutions.com/wp-content/uploads/2017/11/beth.jpg',
            'profile_name' => 'Beth Kessler',
            'profile_job' => 'Family Engagement Coordinator',
            'profile_email' => '[email protected]',
        ),
    2 => 
        array (
            'profile_pic' => 'http://ocdd.vztechsolutions.com/wp-content/uploads/2017/11/carrie.jpg',
            'profile_name' => 'Carrie Salehiamin',
            'profile_job' => 'Operations Manager',
            'profile_email' => '[email protected]',
        ),
    3 => 
        array (
            'profile_pic' => 'http://ocdd.vztechsolutions.com/wp-content/uploads/2017/11/leslie.jpg',
            'profile_name' => 'Leslie Sutton',
            'profile_job' => 'Policy Director',
            'profile_email' => '[email protected]',
        ),
    4 => 
        array (
            'profile_pic' => 'http://ocdd.vztechsolutions.com/wp-content/uploads/2017/11/ryley.jpg',
            'profile_name' => 'Ryley Newport',
            'profile_job' => 'Communications Director',
            'profile_email' => '[email protected]',
        ),
)

I want to be able to create one Bootstrap row with 3 columns, if it has 3 subarrays. Otherwise, I want to create 2 rows, with 3 columns each, if there is more than 3 subarrays. So far this is what I created:

// Store Name of custom field(array) from Admin Section
<?php $repeater = get_field('staff'); ?>

<?php if(count($repeater) <= 3): ?>
    <?php while(have_rows('staff')) : the_row(); ?>
        <div class="row">
            <div class="col-md-4 col-sm-6 col-xs-12 staffBlock">
                <img src="<?php the_sub_field('profile_pic'); ?>" alt="Profile Pic">
                <h4 class="staffTitle"><?php the_sub_field('profile_name'); ?></h4>
                <p class="staffSubTitle"><?php the_sub_field('profile_job'); ?></p>
                <a class="staffEmail" href="mailto:<?php the_sub_field('profile_email'); ?>"><?php the_sub_field('profile_email'); ?></a>
            </div>
        </div>
    <?php endwhile; ?>

<?php elseif(count($repeater) > 3 && count(repeater) <= 6): ?>
    <?php while(have_rows('staff')) : the_row(); ?>
        // Display first row and 3 columns
        // Display second row and remaining columns
    <?php endwhile; ?>
<?php endif; ?>

It works great if the Array has 3 subarrays, but I can't seem to wrap my head around how to create two different rows if it has more subarrays.

Shibi · Accepted Answer · 2017-11-16 20:59:05Z

You just need to assign variables that increase in every instance of the loop and reset or check them see this I wrote some comments in the code to help you understand.

BTW its not limited to 6 items its could be for unlimited items. every 3 items its wrap with row

<?php
$x = 1;
$z = 1;
// Total items in the repeater field
$total_items = count($repeater);
?>
<?php
foreach($repeater as $item):
    // Check if $x is bigger than 3 then we set it back to 1
    $x = ($x > 3) ? 1 : $x;
    // if $x = 1 then we start a new row
    echo ($x == 1) ? '<div class="row">' : '';
        ?>
        <div class="col-md-4 col-sm-6 col-xs-12 staffBlock">
            <img src="<?php echo $item['profile_pic']; ?>" alt="Profile Pic">
            <h4 class="staffTitle"><?php echo $item['profile_name']; ?></h4>
            <p class="staffSubTitle"><?php echo $item['profile_job']; ?></p>
            <a class="staffEmail" href="mailto:<?php echo $item['profile_email']; ?>"><?php echo $item['profile_email']; ?></a>
        </div>
    <?php
    // Check if $x is equal to 3 or if $z equal to the total of the items in the repeater
    // then its true we close the row
    echo ($x == 3) || ($z == $total_items) ? '</div>' : '';
    $x++;
    $z++;
endforeach;
?>

miknik · Accepted Answer · 2017-11-16 21:07:24Z

A <div class="row"> creates a new row, while a <div class="col-md-4 col-sm-6 col-xs-12"> creates a column with the specified widths for each breakpoint. In your example then you will only get three columns per row on medium size screens and above.

I'm not familiar with ACF, but my basic concept code to insert a new row after every 3 columns would be something along the lines of:

<?php $i=0; ?>
<div class="row">
    <?php while(have_rows('staff')) : the_row();
if (($i > 0) && ($i % 3 === 0)) { ?>
</div>
<div class="row">
    <?php }
$i++; ?>
    <div class="col-md-4 col-sm-6 col-xs-12 staffBlock">
        <img src="<?php the_sub_field('profile_pic'); ?>" alt="Profile Pic">
        <h4 class="staffTitle">
            <?php the_sub_field('profile_name'); ?></h4>
        <p class="staffSubTitle">
            <?php the_sub_field('profile_job'); ?></p>
        <a class="staffEmail" href="mailto:<?php the_sub_field('profile_email'); ?>"><?php the_sub_field('profile_email'); ?></a>
    </div>
    <?php endwhile; ?>
</div>

Collectives™ on Stack Overflow

PHP - How can I Create Dynamic Bootstrap Rows & Columns in WordPress based on how many sub arrays an array has?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related