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:
<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.
Steve says
This looks promising, I do not know where all the php code is supposed to go. If you could update this article to contain more details that would be awesome. As of right now, this does not work for me.
Chris says
This is working except any row beyond the first is going outside of the container. This can be seen if you set a background color either in the #gridcontainer or the section I placed the code into. How can I make this not go outside of the container? I used the code as it is written here.
sam says
Hello wpbeginner
I wonder if you knew how to create a list of 3-4 columns articles like we can see on this homepage website
thanks for your help
Best Regards
Sam
WPBeginner Support says
Hey Sam,
This column layout is sometimes also called a grid based layout. Many WordPress magazine themes have grid based layouts. Many other premium themes may offer it as an optional layout for the homepage.
Admin
Lulu says
I’ve read through your article three times now and one key piece of information still eludes me –
where does all this code go?
Thanks
Rachael Portier says
I am trying to get pagination to work with this loop and I can’t get it to work for anything! It displays but page 2 and so on are all just the same posts that are displayed on page one. Please help!
Atef Raouf says
Thanks for the tutorial.
I suggest you add some screenshots at the end to show the end results. this helps people visualizing the results without having to put all the code to see the results.
thanks
Linda says
Thank you for posting this! It was really helpful!
Rick @ The Stem says
Thanks for this.. it was exactly what I wanted, and so far I’ve got my tweaks working perfectly! Except one thing… I cannot seem to wrap my brain around increasing from 2 columns to three. I tried changing the $grids to 3.. but then I’m left guessing which loop to replicate… and what to do with the grids variable.
Please, could you help me out.. do I duplicate the left or right grid? And how do I adjust the if($counter == 1) statement?
My playing around only got me as far as repetition of the left or right column in the middle.
Thanks in advance!
fernando says
Kudos! Got it to work with regular posts in one category, but can’t put it to work properly with a custom post type
The left grid shows all posts, instead of showing them in both grids. Any idea what am I missing here? All the rest is just perfect, but that little bugger is killing me.
Dejan says
Hello! Thank you for this tutorial.
I have problem with displaying items in grid. If post name is too long, entry that goes beneath him move to next “free” place in grid. You can view it here: On mobile, that problem becomes more obivous.
Can you please help me to resolve this? If you have any ideas…
WPBeginner Support says
You can try using css max and min width to control the text overflow.
Admin
Dejan says
Thank you! It works like a charm!
Atiqur says
give me some idea how i can add staff list in Grid style
WPBeginner Support says
You can add a simple staff list, and then use CSS to display it in a grid layout.
Admin
jlkr98 says
Solved. Had commented out the rewind_posts and forgot about it.
jlkr98 says
Can’t quite make it work. Only shows the featured image of the page/post it is located on. Must be doing something wrong – anybody able to tell me what?
Thanks
Tammy Rome says
I need some ideas on how to prevent my page from displaying multiple instances of the posts. I have copied this code into a test file on my server. The only modification I have made is to add
<a href="”>…read more
after the … tag
Any ideas how to fix this?
abbey says
Hi, thanks for this great tutorial, everything works as usual but the pagination is not working if you are using the code as custom post type archive. it always says page not found when you click next page. anyway to solve this?
thanks
Andrew says
I tried your tutorial here (good one by the way), but I noticed an odd behavior of the masonry script (which I enqueue WP’s included version). Everything works, but if you go to another page and then go back, the blog masonry page container inline style height has changed and I get overlapping entries. So the original height value, doesn’t get restored unless you refresh the page.
Marko Jezernik says
Great code and it works perfectly. One question though: is it possible to get posts from only a specific category? That would be awesome.
mkotto says
Duplicate the category.php and add the name of the specific category you want to use:
category-drawings.php for example…
And then add the code
Marko Jezernik says
This works perfectly and it’s really easy to customize. One question though: how could one add category filter? I need the grid to display posts from specific category.
Abhishek Prakash says
Can you please tell me where we have to paste these codes.
Diwas says
Put the code anywhere you would like to show the posts on grid. I kept on index.php
Vinay singh says
Sir Can u tell me how to implement 4 grids… just asking a simple code to implement
Dan says
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 says
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 says
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 !
Sam Kiranga says
I suspected just by reading through the code that it would not even work for four grids let alone grids >4. Thats because it does not have an else statement for when $counter |== $grid. So when you have $counter == 3 and your $grid == 4 what happens? Of course it slips into a new unstyled div which will simply be the next row thus distabilizing the grid system. This is a half baked post grid solution.. Try using the Genesis framework code or bootstrap
photonon says
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 says
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 says
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.
WPBeginner Support says
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:
Or if you would just like to show post excerpt
Hope this helps.
Admin
Greg Rich says
Awesome, thank you so much!
Margo says
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 says
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 says
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 says
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 says
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?
WPBeginner Support says
For that you will have to modify the query.
Admin
Jim says
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 says
Hello. Is it possible to create a grid display of products using wordpress pages instead of posts?
Thank you
WPBeginner Support says
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.
Admin
webbing-in says
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 says
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
WPBeginner Support says
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.
Admin
Adelaide says
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 says
Hi, nice post…
Do u think is possible to give each category a specific css with this method?
Tks
WPBeginner Support says
yes
Admin
Liam Hodnett says
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 says
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!
Editorial Staff says
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.
Admin
Ayman says
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 says
change if($counter == 1)
to
if($counter == 1 || $counter == 2)
and as long as you have $grids = 3 it will work
Angel says
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 says
Thanks Angel – your fix worked for me
Dan Davies says
Hi thanks for this tut, really useful but I am struggling with the pagination – what code do i need for pagination? Any ideas?
Editorial Staff says
If you are using a plugin like wp-pagenavi then insert the code they provide you (this is for numeric pagination). If you want to have next/previous link pagination, then use:
http://codex.wordpress.org/Function_Reference/posts_nav_link
Admin
Vamsi says
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??
Editorial Staff says
Please ask that question in Genesis support forum. Its available for all paying customers.
Admin
_jamesbanks says
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?
wpbeginner says
@_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 says
@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.
wpbeginner says
@_jamesbanks Use the contact form.
skylos says
Wonderful tut, exactly what I was looking for!
_CAnet_ says
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 says
@_CAnet_ You would have to create a custom page template for your homepage. Then follow this tutorial
_CAnet_ says
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 says
@_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 belowhttps://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 says
How much for this function? Need it asap
wpbeginner says
@POKOFFICE Shoot us an email and we can talk.