Wordpress loop with different bootstrap columns

Question

i need to create a wordpress loop where the first post will be col-md-12 and the next 4 posts will be col-md-6

<div class= "col-md-12">
</div>
<div class= "col-md-6">
</div>
<div class= "col-md-6">
</div>
<div class= "col-md-6">
</div>
<div class= "col-md-6">
</div>

and then

<div class= "col-md-12">
</div>
<div class= "col-md-6">
</div>
<div class= "col-md-6">
</div>
<div class= "col-md-6">
</div>
<div class= "col-md-6">
</div>

no i want it to repeat itself every time starts with md-12 and the next 4 posts md-6 — Joeadib
– Joeadib, Commented Feb 7, 2019 at 8:17
the html you add , you have to create one column with 12 and 2 lines with 6 (4 columns of 6 ) is that right — Yassine CHABLI
– Yassine CHABLI, Commented Feb 7, 2019 at 8:18

Yassine CHABLI · Accepted Answer · 2019-02-07 11:51:40Z

0

may be this can help :

<?php 
if ( have_posts() ) {
     $counter = 0;
    while ( have_posts() ) {

    if(($counter%5) == 0 ){?>
        <div class= "col-md-12"> call the loop tags of the curent post to show data that you want </div>
<?php
}
    else{?>

     <div class= "col-md-6"> call the loop tags of the curent post to show data that you want </div>

    <?php }

    $counter++;
    } // end while
} // end if
?>

In case to limit post to 10 post only:

   <?php 
    $wp =  new WP_Query(array('posts_per_page'=>10));
    if ( $wp->have_posts() ) {
         $counter = 0;
        while ( $wp->have_posts() ) {

        if(($counter%5) == 0 ){?>
            <div class= "col-md-12"> call the loop tags of the curent post to show data that you want </div>
    <?php
    }
        else{?>

         <div class= "col-md-6"> call the loop tags of the curent post to show data that you want </div>

        <?php }

        $counter++;
        } // end while
    } // end if
    ?>

you have to call all the tags like : the_title(), the_content() preceded by $wp , but not obligation

edited Feb 7, 2019 at 11:51

answered Feb 7, 2019 at 8:25

Yassine CHABLI

3,7822 gold badges28 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

17 Comments

Joeadib Over a year ago

it keeps getting the posts with col-md-12

Yassine CHABLI Over a year ago

sorry i have to initial counter before while

Joeadib Over a year ago

perfect it works but the loop never stops it keeps getting posts from the database i need to get only 10 posts

Yassine CHABLI Over a year ago

break the loop if the counter reach 10

markmoxx Over a year ago

But then you're still grabbing unneccessary data from the database, better to limit the number of posts in the query with the posts_per_page argument

|

markmoxx · Accepted Answer · 2019-02-07 08:57:48Z

0

Try a ternary operator:

<?php 
if ( have_posts() ) {
    $counter = 0;
    while ( have_posts() ) {    
        $colClass = ($counter%5) == 0 ) ? "col-md-12" : "col-md-6";
        echo '<div class= "' . $colClass . '">';
        // Post data
        echo '</div>';   
        $counter++;
    } // end while
} // end if
?>

answered Feb 7, 2019 at 8:57

markmoxx

1,5521 gold badge11 silver badges23 bronze badges

Collectives™ on Stack Overflow

Wordpress loop with different bootstrap columns

2 Answers 2

17 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

17 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related