Posts in two columns. Newest – left – right

  • I am trying to get my posts to fall into two columns by date with the latest post at the top let column and then the next newest post at the top in right column and so on.

    Left Column —- Right Column
    9/9/19———–9/8/19
    9/7/19———–9/6/19

    …and so on. I tried this and it puts them into two columns but out of oreder

    <div class="container">
<div class="row">
        <?php if (have_posts()) : while(have_posts()) : $i++; if(($i % 2) == 0) : $wp_query->next_post(); else : the_post(); ?>

        <div class="col-md-6">
        <article>
        <h1><a href="<?php get_the_permalink(); ?>"><?php the_title(); ?></a></h1>
        <p>Posted on: <span class="meta"><?php the_time('F jS, Y'); ?></span></p>
        <?php the_excerpt(); ?>
        </article>
        </div>

        <?php endif; endwhile; else: ?>
        <div>Alternate content</div>
        <?php endif; ?>

        <?php $i = 0; rewind_posts(); ?>

        <?php if (have_posts()) : while(have_posts()) : $i++; if(($i % 2) !== 0) : $wp_query->next_post(); else : the_post(); ?>

        <div class="col-md-6">
        <article>
        <h1><a href="<?php get_the_permalink(); ?>"><?php the_title(); ?></a></h1>
        <p>Posted on: <span class="meta"><?php the_time('F jS, Y'); ?></span></p>
        <?php the_excerpt(); ?>
        </article>
        </div>

        <?php endif; endwhile; else: ?>
        <div>Alternate content</div>
        <?php endif; ?>
</div><!-- /row -->
</div><!-- /container -->
    • This topic was modified 4 years, 7 months ago by kevinritt.
    • This topic was modified 4 years, 7 months ago by kevinritt.
Viewing 1 replies (of 1 total)
  • Moderator bcworkz

    (@bcworkz)

    Your code works as expected when I tested it on my site, however, because I don’t use your CSS the posts soon got out of sync because they varied in height. Unless your CSS ensures post are all the same height, it’s not a workable solution.

    The other approach is to not utilize actual columns, rather output into a grid format. As in left-right, new row, left-right, new row, etc. Use CSS to ensure the posts end up aligned in a column even though there is no formal column structure in the HTML. This way the posts in a row will stay aligned. This will better accommodate responsiveness because the output on mobiles can easily be converted to single column while maintaining date order.

Viewing 1 replies (of 1 total)
  • The topic ‘Posts in two columns. Newest – left – right’ is closed to new replies.