php - Masonry layout within the loop

I have tried to to make a custom query, to some extend. it is working fine. But where i cannot make it work, is it to break after every 3 posts and do same thing (print div.row) and run same loop, For now, my code seem to output just 3 odd number posts, whereas i want it to break of after each 3 post.

if ($news->have_posts() ) : while ($news->have_posts() ) : $news->the_post();
    //$value = $news->current_post;
echo "<div class='col-lg-4'>";
    if($value % 3 == 0){
        ?>

                        <div class="height <?php foreach(get_the_category() as $category) { echo $category->slug . ' ';} ?>">
                        <div class="text">
                                <h5><?php the_time('F jS, Y'); ?></h5>
                                <h4><a href=""><?php the_title(); ?></a></h4>
                            <?php the_excerpt(); ?>
                        </div>
                    </div>


    <?php 
    //$i++;
    //print($value);
}
echo "</div>";
endwhile; endif;

Edit : What is different about my layout, it should be in indivuial row, as shown in bootly, more like google cards layout.

I have tried to to make a custom query, to some extend. it is working fine. But where i cannot make it work, is it to break after every 3 posts and do same thing (print div.row) and run same loop, For now, my code seem to output just 3 odd number posts, whereas i want it to break of after each 3 post.

if ($news->have_posts() ) : while ($news->have_posts() ) : $news->the_post();
    //$value = $news->current_post;
echo "<div class='col-lg-4'>";
    if($value % 3 == 0){
        ?>

                        <div class="height <?php foreach(get_the_category() as $category) { echo $category->slug . ' ';} ?>">
                        <div class="text">
                                <h5><?php the_time('F jS, Y'); ?></h5>
                                <h4><a href=""><?php the_title(); ?></a></h4>
                            <?php the_excerpt(); ?>
                        </div>
                    </div>


    <?php 
    //$i++;
    //print($value);
}
echo "</div>";
endwhile; endif;

Edit : What is different about my layout, it should be in indivuial row, as shown in bootly, more like google cards layout.

• php
• wp-query

Share Improve this question edited Oct 13, 2015 at 12:34 localhost asked Oct 12, 2015 at 16:59 localhostlocalhost 48411 gold badge77 silver badges2121 bronze badges 9

• @PieterGoosen what you mean – localhost Commented Oct 13, 2015 at 9:30
• @PieterGoosen Thnx, i just updated it. – localhost Commented Oct 13, 2015 at 9:38
• Check the two answers to this question – Pieter Goosen Commented Oct 13, 2015 at 9:50
• @PieterGoosen I tried that now, but my post shows one after another, which isn't what i want. I want layout like [this] (bootply.com/90113) – localhost Commented Oct 13, 2015 at 10:12
• @PieterGoosen my code display right, it is that wrapping of div that is now right, that i want to ask. where i want my div to display like [this] (bootply.com/90113) – localhost Commented Oct 13, 2015 at 10:33

 |  Show 4 more comments

2 Answers 2

Sorted by: Reset to default 0

try this. i am not sure it would work for masonary layout or not. but it would give you an idea on how to make rows and columns within loop.

if ($news->have_posts() ) : while ($news->have_posts() ) : $news->the_post();
    //$value = $news->current_post;

    if($value % 3 == 0){
        ?>
      <div class="row">                 
        echo "<div class='col-lg-4'>";

                        <div class="height <?php foreach(get_the_category() as $category) { echo $category->slug . ' ';} ?>">
                        <div class="text">
                                <h5><?php the_time('F jS, Y'); ?></h5>
                                <h4><a href=""><?php the_title(); ?></a></h4>
                            <?php the_excerpt(); ?>
                        </div>
                    </div>


    <?php 
    //$i++;
    //print($value);
}
echo "</div>";
if($value % 3 !== 0){
echo "<div class='col-lg-4'>";
echo "</div">
}
endwhile; endif;

You should just be able to achieve the same effect using CSS and display:flex - I don't think you need to break your loop up into threes.