How to Create a Grid Display of Post Thumbnails in WordPress Themes

When creating WordPress site designs, have you ever had the urge to create a grid display of posts? The grid layout works great for media centric sites such as our WordPress gallery or another showcase type site. Theme frameworks like Genesis already has a pre-built Grid Loop system. However, if you are trying to do a grid display in your custom WordPress theme, then we are here to help. In this article, we will show you how to create a grid loop display of post thumbnails in your WordPress theme.

Note: you need to have a fair understanding of CSS and how the WordPress loop work.

Before we begin, lets take a look at what we are trying to accomplish:

If you notice, the posts on this page are being displayed in a grid. There is a border on the posts on the left hand side, but not on the right hand side. With a normal post loop, all posts follow the same styling, so you will have a right border on both posts which would look weird. Also notice, the spacing are pretty symmetric. Which is again not possible with the normal loop to do for doing something like this. Now that you can see what we are trying to accomplish, lets take a look on how to accomplish it.

First thing you need to do is make sure that your theme has WordPress post thumbnails turned on. You should also think about how you want to resize your WordPress images because you will be needing it.

Once you have got the thumbnails and sizes setup, lets get this thing started. Lets setup our loop queries:

<?php
$counter = 1; //start counter

$grids = 2; //Grids per row

global $query_string; //Need this to make pagination work

/*Setting up our custom query (In here we are setting it to show 12 posts per page and eliminate all sticky posts*/
query_posts($query_string . '&caller_get_posts=1&posts_per_page=12');

if(have_posts()) :	while(have_posts()) :  the_post();
?>

The code above seems pretty straight forward because we have made inline comments. One thing that you probably would need to edit is posts_per_page variable to suit your needs. You can also add other query parameters if you so desire. Now that we got the loop started, lets look at how we want to display the posts inside it.

<?php
//Show the left hand side column
if($counter == 1) :
?>
			<div class="griditemleft">
				<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
//Show the right hand side column
elseif($counter == $grids) :
?>
<div class="griditemright">
				<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>
<div class="clear"></div>
<?php
$counter = 0;
endif;
?>

We start the code by checking to see if the counter is 1 which means to show our left grid. We simply go in and start a div with a custom css class “griditemleft”. Inside it we added the post thumbnail and the post title. You can add or subtract any loop elements (such as excerpts, dates, author info, comment count etc). Notice: In our thumbnails, we are calling an additional image size. You will probably have to replace the size-name with your own size that you created.

After the first grid, we added an elseif that looks to see if the $counter matches the number specified in our $grids (which it should because we will be on the second post). If the counter matches, then we can show our right grid which starts with a custom css class “griditemright”. Notice after we close the griditemright div, we are adding a clear class. This we will explain when we get to the CSS part.

After the loop is done with this, we reset the counter to 0, so it can start again in the next row.

We can simply end the loop that we started by adding this code:

<?php
$counter++;
endwhile;
//Post Navigation code goes here
endif;
?>

The code above basically is continuing the counter until it hits the limit that is specified in our query_post variable. The reason why we didn’t add the post navigation code above is because many folks use a plugin or different display method for this. So we are leaving it open for you to decide for yourself.

So our final loop code will look like this:

<?php
$counter = 1; //start counter

$grids = 2; //Grids per row

global $query_string; //Need this to make pagination work


/*Setting up our custom query (In here we are setting it to show 12 posts per page and eliminate all sticky posts) */
query_posts($query_string . '&caller_get_posts=1&posts_per_page=12');


if(have_posts()) :	while(have_posts()) :  the_post(); 
?>
<?php
//Show the left hand side column
if($counter == 1) :
?>
			<div class="griditemleft">
				<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
//Show the right hand side column
elseif($counter == $grids) :
?>
<div class="griditemright">
				<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>
<div class="clear"></div>
<?php
$counter = 0;
endif;
?>
<?php
$counter++;
endwhile;
//Pagination can go here if you want it.
endif;
?>

Now that we have the PHP code ready, lets look at how we are going to style it.

Our default output would look like this:

<div id="gridcontainer"> 
<div class="griditemleft"> 
<div class="postimage">	Post Image</div> 
<h2>Post Title</h2> 
</div> 
<div class="griditemright"> 
<div class="postimage">	Post Image</div> 
<h2>Post Title</h2> 
</div> 
<div class="clear"></div> 
</div>

Here are the classes that you need to modify:

#gridcontainer{margin: 20px 0; width: 100%; }
#gridcontainer h2 a{color: #77787a; font-size: 13px;}
#gridcontainer .griditemleft{float: left; width: 278px; margin: 0 40px 40px 0;}
#gridcontainer .griditemright{float: left; width: 278px;}
#gridcontainer .postimage{margin: 0 0 10px 0;}

We hope that this tutorial steers you in the right direction towards making a grid loop display for your WordPress posts.