Have you ever felt compelled to create a grid display of content when designing WordPress sites?
The grid layout is ideal for media-focused websites, such as our WordPress gallery or another form of showcase. Grid Loop is already embedded into theme frameworks like Genesis. However, if you’re seeking to implement a grid display in your own WordPress theme, we can assist you. We’ll show you how to make a grid loop display of post thumbnails in your WordPress theme in this article.
Note that you should be familiar with CSS and how the WordPress loop works.
Let’s have a look at what we’re trying to do before we get started:
The posts on this page are shown in a grid, as you can see. The left-hand side of the posts has a border, whereas the right-hand side does not. With a standard post loop, all posts have the same styling, therefore both posts will have a right border, which will appear odd. Also, observe how symmetrical the spacing is. This isn’t doable with the standard loop for performing something like this. Now that you know what we’re aiming to achieve, let’s look at how we’re going to do it.
The first step is to ensure that WordPress post thumbnails are enabled in your theme. You should also consider how you’ll resize your WordPress images, as you’ll need to do so.
Let’s get this thing started once you’ve got the thumbnails and sizes set up. Let’s get started with our loop queries:
|
1
2
3
4
5
6
7
8
9
10
11
12
|
<?php$counter = 1; //start counter$grids = 2; //Grids per rowglobal $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();?> |
Because we used inline comments, the code above appears to be rather straightforward. You’ll most likely need to change the posts per page option to suit your needs. If you want to, you can also add more query parameters. Let’s look at how we want to display the posts inside the loop now that we’ve begun it.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
<?php//Show the left hand side columnif($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 columnelseif($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 begin the code by checking to see if the number is 1, indicating that the left grid should be displayed. We just create a div with the custom CSS class “griditemleft” and insert it into the page. We included the post thumbnail and title into it. Any loop elements can be added or removed (such as excerpts, dates, author info, comment count etc). Notice that we are referring to an additional image size in our thumbnails. You’ll almost certainly need to update size-name with the name of the size you created.
We added an elseif after the first grid to check if the $counter equals the number provided in our $grids (which it should because we will be on the second post). If the counters match, we may display our right grid, which is defined by the CSS class “griditemright.” Notice how we apply a clear class after closing the griditemright div. When we get to the CSS section, we’ll explain why.
We reset the counter to 0 after the loop is finished with this, so it may begin again in the next row.
We can simply put an end to the loop we started by adding the following code:
|
1
2
3
4
5
6
|
<?php$counter++;endwhile;//Post Navigation code goes hereendif;?> |
The code above effectively keeps the counter going until it reaches the limit set in our query post variable. Because many people use a plugin or a different display approach for this, we didn’t include the post navigation code above. As a result, we’re leaving it up to you to make your own decision.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
|
<div id="gridcontainer"><?php$counter = 1; //start counter$grids = 2; //Grids per rowglobal $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 columnif($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 columnelseif($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> |
Let’s look at how we’re going to style the PHP code now that we have everything ready.
This is what our default output would look like:
|
1
2
3
4
5
6
7
8
9
10
11
|
<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 you’ll need to change:
|
1
2
3
4
5
|
#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 has helped you get started on creating a grid loop display for your WordPress posts.
