1

I have this layout I am trying to implement - https://drive.google.com/file/d/1cP831xAM1F5CT3HEmedCBkINwiCC18Rb/view

And I have created a news template, but I need to get the posts to display like my example where the first bootstrap row displays 3 posts then beneath that it displays 4 posts.

Is this possible, I cant seem to find the relevant information for me to achieve this.

Really hoping someone can point me in the right direction, on how I would code my template for this layout.

Many Thanks

Here is my current code

<div class="container">
    <div class="row">
    <?php
        while ( have_posts() ) {
            the_post(); 

            $class = 'col-md-4';

            if( $counter < 3 ) {
                $class = 'col-md-3';
            }

            ?>
            <div class="col-12 <?php echo $class; ?>">
                <?php the_post_thumbnail(', '); ?>
                <h3><a href="<?php the_permalink(); ?>" title="Read more"><?php the_title(); ?></a></h3>
            </div> <!-- .col-12 -->
            <?php

            $counter++;

        } // end while
    ?>
    </div><!-- .row -->
</div><!-- .container -->

closed as off-topic by Jacob Peattie, bosco, cjbj, Jack Johansson Aug 5 '18 at 16:31

This question appears to be off-topic. The users who voted to close gave this specific reason:

If this question can be reworded to fit the rules in the help center, please edit the question.

1

You can accomplish this by using a counter then updating the class according to your needs. The code below will create a variable $counter and assign it to 0 if posts exist. By default a 'col-md-4' is bound to $class, if the $counter is less than 3 $class will be updated to 'col-md-3' (making it fill 4 columns instead of 3). Then we output the html including the stored class. Finally, the $counter is incremented ready for the next post item.

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

    ?>

    <div class="container">
        <div class="row">
        <?php
            while ( have_posts() ) {
                the_post(); 

                $class = 'col-md-4';

                if( $counter < 3 ) {
                    $class = 'col-md-3';
                }

                ?>
                <div class="col-12 <?php echo $class; ?>">
                    <?php // content etc here ?>
                </div> <!-- .col-12 -->
                <?php

                $counter++;

            } // end while
        ?>
        </div><!-- .row -->
    </div><!-- .container -->
<?php } else { // end if ?>
    <p>There are no posts to display</p>
<?php } ?>
  • Thanks for that, when I try and add your code I get a syntax error? – Davva M Aug 2 '18 at 10:02
  • It might be this line? - <?php } // end if ?> – Davva M Aug 2 '18 at 10:02
  • I have not tested the code, can you give me the exact error you're getting? – mrmadhat Aug 2 '18 at 10:08
  • I forgot a reopening <?php tag after the <div class="row"> – mrmadhat Aug 2 '18 at 10:10
  • Many thanks, but when I add the code to my template, I just get a blank page and no posts show? – Davva M Aug 2 '18 at 10:27
0

try to take a look at this https://stackoverflow.com/questions/38304093/wordpress-blog-first-row-2-column-second-and-continuing-rows-3-columns

Is it similar to what you want to achieve?

  • More or less, but I need to show first 3 latest posts on one row with 3 columns, then beneath that other latest posts within a 4 column row. – Davva M Aug 2 '18 at 9:34

Not the answer you're looking for? Browse other questions tagged or ask your own question.