Rendering CPT Archive page as two columns

1

I’ve created my custom CPT archive that draws from a custom content.php template so each post rendered within a col-sm-6 div.

However, sometimes there are awkward line breaks where only one post is on a line, especially when the height of one post is slightly larger than other.

My custom content.php file is as follows:

<div class="col-sm-6">
  <article <?php post_class('press'); ?>>
        <div class="content">
          <h3 class="entry-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
          <div class="entry-summary">
              <?php the_excerpt(); ?>
              <a href="<?php the_permalink(); ?>" class="btn btn-sm btn-sdss">Explore</a>
          </div>
        </div>
  </article>
</div>

Which is drawn from the following line in my custom archive.php file:

<?php while (have_posts()) : the_post(); ?>
  <?php get_template_part('templates/content-cpt', get_post_format()); ?>
<?php endwhile; ?>

Where/how can I dynamically add a row so only two posts get rendered?

(Apologies if this is a bootstrap/WP question and not relevant to roots.)

2

Naturally once I ask it, I find the solution. Sort of.

I needed to add a col-sm-12 to the custom archive.php file before the php code that draws the content.php template file, which works some of the time

3

Not really a Roots issue but… you can use clearfix elements as recommended in the BS3 docs:

…you’re bound to run into issues where, at certain breakpoints, your columns don’t clear quite right as one is taller than the other. To fix that, use a combination of a .clearfix and our responsive utility classes.

So in your case you can (1) add your col-sm-6 as part of your post_class() and (2) add the clearfixes as needed with a quick check in your loop:

<article <?php post_class('press col-sm-6'); ?>>
  <div class="content">
    <h3 class="entry-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
    <div class="entry-summary">
      <?php the_excerpt(); ?>
      <a href="<?php the_permalink(); ?>" class="btn btn-sm btn-sdss">Explore</a>
    </div>
  </div>
</article>

And…

<?php while (have_posts()) : the_post(); ?>
  <?php get_template_part('templates/content-cpt', get_post_format()); ?>
  <?php if(($wp_query->current_post + 1) % 2 == 0) : ?>
    <div class="clearfix hidden-xs"></div>
  <?php endif; ?>
<?php endwhile; ?>

Suggestion #1 is optional but it reduces some markup so you might consider it.