Beginner's Guide for WordPress - Start your WordPress Blog in minutes.
Choosing the Best
WordPress Hosting
How to Easily
Install WordPress
Recommended
WordPress Plugins
View all Guides

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

Last updated on by
Follow WPBeginner on YouTube
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:

Grid Post Display

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:

<div id="gridcontainer">
<?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;
?>
</div>

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.


Editorial Staff at WPBeginner is a team of WordPress lovers led by Syed Balkhi. Page maintained by Syed Balkhi.

WPBeginner's Video Icon
Our HD-Quality tutorial videos for WordPress Beginners will teach you how to use WordPress to create and manage your own website in about an hour. Get started now »
  • jlkr98

    Solved. Had commented out the rewind_posts and forgot about it.

  • Vinay singh

    Sir Can u tell me how to implement 4 grids… just asking a simple code to implement

  • Dan

    Hi,

    Thanks for this tutorial, its awesome. I have tinkered about to make a responsive two column grid using this. The only issue I am having is getting Pagination to work. I am using this grid on a category archive page. So setting the amount of blog posts to display in Settings > Reading doesn’t seem to affect this page thus my pagination isn’t working.

    Any ideas how I would get Pagination to work on an archive page so as to not display hundreds of posts on one page?

    Thanks in advance. Superb website, has really helped me get to grips with WordPress.

    Dan

  • Huzan

    Is this grid responsive? I want to show this grid only on my category pages & posts pertaining to that category should reflect.

    Please advice.

  • Kailash

    Hello, I am not getting 3 & 4 grid in a row,
    i tried $counter = 1; //start counter

    $grids = 3; //Grids per row

    and then with if else i used ,if($counter == 1) , elseif($counter == 1 || $counter == 2) : , elseif($counter == 1 || $counter == 2 || $counter == 3) : but in fist column showing first post then in next column showing two post one by one.. Please help to disply 4 gid in a row !

  • photonon

    Hi,

    thanks for this tut!
    I used the code and modified it to show 3 posts in a row.
    Works great. There is only one problem, which may occur, because my knowledge about php programming is more ore less 0. So the problem is, that the grid is displayed over and over again, endless i think. Kind of a post page showing one post over and over again.
    I bet there is an easy solution, but i can’t see it right now.
    Thanks for any hint or even better a solution!

    Grtz!

    • Photonon

      Hi!

      Got it working. It was just a basic thing. I called a loop in a loop and then… Sometimes it’s better to have a break and then have a fresh look onto things. :-)

      Bye!

  • Gregory Rich

    Hello,

    Thanks so much for this. I’m creating a custom theme for my portfolio and this worked really nicely, except for some reason I can’t create a separate loop to display my posts in a non-grid format. I am probably missing something obvious. My website is http://www.gregoryrich.com and while I’ve gotten the grid to work for the homepage, I’m trying to get it so my posts are displayed in full text on http://www.gregoryrich.com/blog, and it’s just displaying the grid on both pages even though I have entered in completely different loops to the content area of the page. Any idea why this might be happening? Thank you very much, again.

    • http://www.wpbeginner.com/ WPBeginner Support

      Hello Gregory,

      This is happening because the snippet in the tutorial does not display content. To display content you will need to add this line of code, just below the post title:

      <?php the_content(); ?>
      

      Or if you would just like to show post excerpt

      <?php the_excerpt(); ?>
      

      Hope this helps.

      • Greg Rich

        Awesome, thank you so much!

    • Margo

      Hey! I am having the same issue- my PHP knowledge is very limited. I want a portfolio grid page which shows post thumbnails in a grid, then a blog page which shows the loop like the normal blog posts stacked on top of eachother. If anyone has found a solution to this, I would really appreciate the help! Thanks for this tutorial, it made it doable for someone like me with virtually now knowledge of PHP!

  • bgpworld

    Hi, can you tell me if the same code can be used to display search result as well, i seem to have problems with it showing the pagination and the not found message as im not sure where to place the code within this code.

  • Dang Dinh Tuan

    Hi,

    Thank for your post that I am looking for.
    I am new WP user and my website is http://www.maycatday.com.vn based SilverOrchide theme by Gazpo.
    In your post I see 5 code paragraphs which are 12, 25, 6, 47, 11 and 5 lines. Please guide me what code to use and where to put code in (Archive.php, single.php, style.php)?
    Hop to receive your guide!

    Thanks again,
    Dang Dinh Tuan

  • raanan

    Thanks!

    Maybe Im missing a point but –
    the ………. in the main code section is missing?(only in the css)
    so it displays the columns (3) one on top of another………..
    when ive added the gridconyainer i get a margin to the right….
    ant tio what went wrong?

    thanks

  • Adam Stepney

    Excellent got it working pretty straight forward! How would I go about using this grid across multiple pages but only showing posts based on the category for that page?

    • http://www.wpbeginner.com/ WPBeginner Support

      For that you will have to modify the query.

    • Jim

      Can i use this code to display custom post on a different page dedicated to that post only? if yes please elaborate.

      Thank you

  • Anandan

    Hello. Is it possible to create a grid display of products using wordpress pages instead of posts?
    Thank you

    • http://www.wpbeginner.com/ WPBeginner Support

      Yes it is possible but will require you to edit your template. Create a new WP_Query loop through post_type=page and then rest of the tutorial is the same.

  • webbing-in

    this piece of code has worked just right for me. My blogpage looking good with the grid layout.
    I made 2 rows of excerpts with 3 columns each.
    Now I need to give different background colors to each excerpt. Is it possible?
    Perhaps if I assign a category to each post and call 1 post from every category, can I have different bkground color? if possible, please help with the code…..thanks

  • webbing-in

    Where exactly (in which file) do I need to add this code?
    I need to show posts in grid style on my blog page.

    Thanks

    • http://www.wpbeginner.com/ WPBeginner Support

      It depends on where you want to show the grid. If you want to add the grid to your site’s main page then you need to find the WordPress loop in either index.php or content.php. There are so many themes, frameworks, so we can not tell you exactly where you would find it. Also look up for WordPress Loop.

      • Adelaide

        Yes, but can you explain more generally where it should go? Can I add it to a custom page template, and have it work just for that page?

  • Cesar G

    Hi, nice post…
    Do u think is possible to give each category a specific css with this method?
    Tks

    • http://www.wpbeginner.com/ WPBeginner Support

      yes

  • Liam Hodnett

    I have replaced my current loop on a custom template with the one above, however no posts are showing, I have gone through the process a couple of times over and still no joy! I’m wondering if my twentyeleven theme is broken somehow .. any recommendations you would suggest ??

    Thanks for your time

    Liam Hodnett

  • Casie

    Hi there,

    I have a question–what if your theme doesn’t have a loop.php page? Is there still a way to make this work?

    Thanks!

    • http://www.wpbeginner.com Editorial Staff

      Yes. Loop.php is just one of the files where your theme can have the loop code. It really depends on how your theme is structured. It could be in the index.php, archive.php, content.php, etc.

  • Ayman

    Hi,
    This is a great tut. I’m trying to apply the loop on a custom post type and so far everything is perfect.

    The only problem is that when I’m changing the ($grids = 2; //Grids per row) to a bigger number the images are hiding each other.

    If I’m leaving ($grids = 2) I’m getting 2 grids on each row and changing it to 3 is suppose to make the first image from the 2 row to swipe up to the 1 row and like that we will have 3 on each row but what is happening is that the 3 image is swiping to the first row and taking the place of the 2 image so result is 2 grids and the second grid is gone as it was replaced with the 3 one.

    Any help would be appreciated.
    Thanks

    • Peter

      change if($counter == 1)

      to
      if($counter == 1 || $counter == 2)

      and as long as you have $grids = 3 it will work

      :)

      • Angel

        I changed mine from

        if($counter == 1)

        to
        if($counter >= 1)

        Meaning if the counter is equal to or greater than 1, fixed it right up.

        • Bobbles

          Thanks Angel – your fix worked for me :)

  • Dan Davies

    Hi thanks for this tut, really useful but I am struggling with the pagination – what code do i need for pagination? Any ideas?

  • Vamsi

    This was really helpful… I just want to know the other thing,
    How can i remove grid view from the homepage of eleven40 theme(genesis theme)??? can you help me solve this??

    • http://www.wpbeginner.com Editorial Staff

      Please ask that question in Genesis support forum. Its available for all paying customers.

  • _jamesbanks

    I managed how to figure out how to create a 3 and 4 grid layout by copying the loop and adjusting the $grids variable. However on my 3 grid layout, the top row of posts are unclickable e.g you cannot follow the thumbnail links to the post, cannot highlight the text. Any idea why this is happening?

    • http://www.wpbeginner.com/ wpbeginner

       @_jamesbanks No idea. If you do it properly, then it should work just fine. If you email us your code, then we can perhaps take a look. 

      • _jamesbanks

         @wpbeginner  Thank you I will email you the code and the link to view the demo of my WordPress theme. What email address should I email it to? Thanks again. 

        • http://www.wpbeginner.com/ wpbeginner

           @_jamesbanks Use the contact form.

  • skylos

    Wonderful tut, exactly what I was looking for!

  • _CAnet_

    Hi,

    in TwentyTen I can make it perfectly work if putting the code in the category-slug.php.

    But how can I accomplish the same thing on my blog page?

    I have a static page set in the Front page displays section of Settings -> Reading

    Thanks

    • wpbeginner

      @_CAnet_ You would have to create a custom page template for your homepage. Then follow this tutorial :)

      • _CAnet_

        well, first of all, thank you for your quick response…but anyway it’s still not that easy to be done (not for a wpbeginner at least). :-/

        I need to grid-layout ONLY the post page,i.e., in SETTINGS -> READING:

        – FRONT PAGE DISPLAY = my custom static page

        – POST PAGE = the page I need to grid layout

        I’ve tryed creating a home.php and a front-page.php too, but I always got grid layout in the front page (that should not be changed).

        I’ve even tryed to apply a custom template from my post page too but it load a standard layout post page.

        What am I missing?

        Thanks for your kind help

        • wpbeginner

          @_CAnet_ Yes, this tutorial is not for total beginners. That is why we had a note in the article, that you must have a FAIR understanding of how CSS and the WordPress loop work.What you need to do is create a separate blog page. Follow the URL belowhttp://www.wpbeginner.com/wp-tutorials/how-to-create-a-separate-page-for-blog-posts-in-wordpress/In the url above, you will be creating a custom page template for the blog page.If you cannot figure it out, then you are more then welcome to hire us. We would be able to do this for a small fee.

        • POKOFFICE

          How much for this function? Need it asap

        • wpbeginner

          @POKOFFICE Shoot us an email and we can talk.