Add bootstrap rows in Wordpress post loop

Question

I have 4 bootstrap columns that each have unique styling. How can I insert and close <div class="row"> around these being that the query could have 1 or 3 results are well as 2 or 4. If there is only one result the row should span only around the first column, if there are 2 results, it should span around the first two columns, if there are three it should start a new row after the end of the first row, and end after the third column, and if there are 4, then the second row should span around the 3rd and fourth columns.

Here is the code I need to insert the rows into:

<?php
$args = array(
    'post_type' => 'post',
    'post_status' => 'publish',
    'posts_per_page' => 4,
);
$arr_posts = new WP_Query($args);
if ($arr_posts->have_posts()) :
    $i = 0;
    while ($arr_posts->have_posts()) :
        $arr_posts->the_post();
        if ($i == 0) :
?>
            <div class="col-lg-6 some-class">
            </div>
        <?php
        elseif ($i == 1) :
        ?>
            <div class="col-lg-6 some-class1">
            </div>
        <?php
        elseif ($i == 2) :
        ?>
            <div class="col-lg-6 some-class2">
            </div>
        <?php
        elseif ($i == 3) :
        ?>
            <div class="col-lg-6 some-class3">
            </div>
        <?php
        endif;
        $i++;
    endwhile;
endif;
?>

FluffyKitten · Accepted Answer · 2020-08-13 17:46:39Z

You don't need to use multiple rows when you have the columns, in Bootstrap they will automatically arrange into rows depending on the column size.

You just need to start the row before the cols - do it after the if so you only add it when you have results to add into the cols - and then close it at the end.

<?php
$args = array(
    'post_type' => 'post',
    'post_status' => 'publish',
    'posts_per_page' => 4,
);
$arr_posts = new WP_Query($args);
if ($arr_posts->have_posts()) :
    $i = 0;
?>
<div class="row"> <!-- start the row here - the cols will automatically arrange into rows based on their size -->
<?php
    while ($arr_posts->have_posts()) :
        $arr_posts->the_post();
        if ($i == 0) :
?>
            <div class="col-lg-6 some-class">
            </div>
        <?php
        elseif ($i == 1) :
        ?>
            <div class="col-lg-6 some-class1">
            </div>
        <?php
        elseif ($i == 2) :
        ?>
            <div class="col-lg-6 some-class2">
            </div>
        <?php
        elseif ($i == 3) :
        ?>
            <div class="col-lg-6 some-class3">
            </div>
        <?php
        endif;
        $i++;
    endwhile;
?>
</div> <!-- end the row here -->
<?php
endif;
?>

Collectives™ on Stack Overflow

Add bootstrap rows in Wordpress post loop

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related