Display WordPress Posts in Grid View.

Displaying WordPress posts in a grid format is not as difficult as it sounds. Here’s what you do to get your posts to display in that manner.
I assume you have in place a DIV that’s floated either left, right, or with a property value of inline-block and with a specific width. Let’s take the class of your floated DIV to be “grider”.

1. Open the file where you have your loop. Assuming your loop looks like what we have below

 <?php $query = new WP_Query('category_name=intro');

if($query->have_posts()) : while($query->have_posts()) : $query->the_post(); ?>

  <?php the_title() ?>
     
  <?php echo excerpt(25); ?> 
   
  <?php endwhile; ?>
  <?php endif; ?>

2. Now pay great attention to where we have the styled DIV with the class “grider” in the loop below. Notice how we wrapped just our areas of interest in our styled DIV

<?php { ?>
  <?php $query = new WP_Query('category_name=intro');

if($query->have_posts()) : while($query->have_posts()) : $query->the_post(); ?>

<div class="grider"> // Gridder DIV starts here

  <?php the_title() ?>
     
  <?php echo excerpt(25); ?> 
  
  </div><!-- End Grider --> // Grider DIV ends here
   
  <?php endwhile; ?>
  <?php endif; ?>
  <?php } ?>

3. Be sure to place both your starting and closing DIV’s as shown in the example above.
That’s it, your posts will be displayed in grids. If you find this tutorial helpful, please leave a comment
or if you have questions on how this is done, please state it in the comment area and I’d be glad to help you.

  • Ben says:

    That’s nice but where is the grider class?

  • Chib says:

    Ben take a look at the second block of code. Line 6.

  • Leave a Reply