Looping through WordPress Posts – Output using Bootstrap

2 comments

1. You should read up on the modulo operator. It’s really helpful for these situations. Below I have two versions, the top is documented and uses braces (makes it easier to read) and the bottom does the same thing in the least code.

   Way One

   <?php
   // wp_query is used to get the post count in the loop
   global $query_string, $wp_query;
   
   // Define starting count
   $counter = 1;
   
   // Will output pagination set limit unless there are not enough posts, then it will output the remainder
   $post_count = $wp_query->post_count;
   
   if ( have_posts() ) {
   
     while ( have_posts() ) {
   
       the_post();
   
       // Checks to see if the current post is odd.
       // If it is, we open the div for the row.
       // Modulo give the remainder of the two numbers.
       if ($counter % 2 != 0) {
         echo '<div class="row">';
       }
   
       ?>
   
       <div class="col-md-6 blog-item text-center">
         <div class="postimage">
           <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail('category-thumbnail'); ?></a>
         </div>
         <h2><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
       </div>
   
       <?php
   
       // Is the post count even? We better close the div.
       // Also closes the div once we hit the last post in the loop.
       if ( $counter % 2 == 0 || $post_count == $counter ) {
         echo '</div>';
       }
   
       // Increment counter
       $counter++;
   
     }
   
   }
   

   Way Two

   <?php
   global $query_string, $wp_query;
   $counter = 1;
   $post_count = $wp_query->post_count;
   
   if ( have_posts() ) :   while( have_posts() ) : the_post();
   
     if ($counter % 2 != 0)
       echo '<div class="row">';
   
     ?>
   
     <div class="col-md-6 blog-item text-center">
       <div class="postimage">
         <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail('category-thumbnail'); ?></a>
       </div>
       <h2><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
     </div>
   
     <?php
   
     if ( $counter % 2 == 0 || $post_count == $counter )
       echo '</div>';
   
     $counter++;
   
   endwhile; endif;
   

   Log in to Reply

2. Try this:

   <div class="row">
   
   <?php 
   if ( have_posts() ) {
        while ( have_posts() ) {
           the_post(); 
   ?>
   
   <div class="col-md-6 blog-item text-center">
               <div class="blog-padding blog-indx-panel">
                   <div><a href="<?php the_permalink(); ?>"><img class="img-responsive" alt="" src="<?php if ( has_post_thumbnail() ) { the_post_thumbnail(); ?>"></a></div>
                   <h3><?php the_title(); ?></h3>
                   <p class="blog-date"><?php the_time('F jS, Y'); ?></p>
                   <p><?php the_excerpt(); ?> </p>
                   <div><a class="btn btn-default btn-text" href="<?php the_permalink(); ?>" role="button">Read Full Post</a></div>
               </div>
   </div>
   
   <?php
       } // end while
   } // end if
   ?>
   
   </div>
   

   Log in to Reply