CODEWITHSUNDEEP
phpwordpresstwitter-bootstrap
Andrew Lynch
Andrew Lynch

Reputation: 1317

Bootstrap Scaffolding with Wordpress

I am using the Roots theme in order to enable Boostrap in Wordpress. However, I am running in to problems when I try and display articles in a grid format over multiple rows.

For instance when loops through four instances of <div class="span4> the fourth div does not wrap neatly to the next row. How can I use the Wordpress loop and call <div class="row"> after once the loop has run three times

Upvotes: 0

Views: 239

Answers (1)

birchbark
birchbark

Reputation: 185

There are several good ways to do this. I personally would recommend using something like Zurb Foundation's Block Grid. The markup for this would allow you to just use a normal unordered list <ul> for your posts and change the amount of columns easily at any point in the future, as well as allowing you to have a breakpoint at which a different number of columns are used.

You could create this functionality yourself in CSS as well, but, if you want to keep with bootstraps classes and merely want to hard code it to three rows always within your theme, you could do something like below. Basically, keep track of what iteration of the post loop you're on with a variable and reset it every three posts, creating the row div and closing it as needed.

 <?php
    if ( have_posts() ) :
       $postCount = 0;
       $rowOpen = false;
       while ( have_posts() ) :
          the_post(); 
          if ($postCount == 0) :
             if ($rowOpen) : ?>
               </div> <!-- close the div for the row -->
             <?php endif; ?>
             <div class="row">
             <?php $rowOpen = true; 
          endif; ?>
          <div class="col-lg-4">
            <!-- here's where your post content goes, i.e.: -->
              <h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
              <div class="entry">
               <?php the_content(); ?>
              </div>
          </div>
          <?php $postCount++;
          if ($postCount == 3) : # 3 because we've already incremented it
            $postCount = 0; # reset post count every third item
          endif;
        endwhile;
        if ($rowOpen) : ?>
          </div> <!-- close the div for the row -->
        <?php endif; 
      else : ?>
      <p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
      <?php endif; ?>

The problem I see there is that the regular bootstrap grid as well as the regular foundation grid requires a row class to contain its columns, so I don't think there is an easy way to list posts without some sort of conditional based on the amount of columns-per-row, programmatically. A CSS only solution would be great, but I don't know of one without creating your own grid or using Foundations block grid.

Upvotes: 1

Related Questions