BlogThemes

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

When creating WordPress website designs, have you ever ever had the urge to create a grid show of posts? The grid structure works nice for media centric websites equivalent to our WordPress gallery or one other showcase sort website. Theme frameworks like Genesis already has a pre-built Grid Loop system. Nevertheless, in case you are attempting to do a grid show in your customized WordPress theme, then we’re right here to assist. On this article, we are going to present you methods to create a grid loop show of post thumbnails in your WordPress theme.

Word: it’s essential to have a good understanding of CSS and the way the WordPress loop work.

Earlier than we start, lets check out what we try to perform:

Grid Post Display

If you happen to discover, the posts on this web page are being displayed in a grid. There’s a border on the posts on the left hand aspect, however not on the suitable hand aspect. With a standard submit loop, all posts comply with the identical styling, so you should have a proper border on each posts which might look bizarre. Additionally discover, the spacing are fairly symmetric. Which is once more not attainable with the conventional loop to do for doing one thing like this. Now you could see what we try to perform, lets have a look on methods to accomplish it.

Very first thing it’s essential to do is ensure that your theme has WordPress submit thumbnails turned on. You must also take into consideration the way you need to resize your WordPress photos as a result of you can be needing it.

After getting received the thumbnails and sizes setup, lets get this factor began. Lets setup our loop queries:

1
2
3
4
5
6
7
8
9
10
11
12
<?php
$counter = 1; //begin counter
$grids = 2; //Grids per row
international $query_string; //Want this to make pagination work
/*Organising our customized question (In right here we're setting it to point out 12 posts per web page and get rid of all sticky posts*/
query_posts($query_string . '&caller_get_posts=1&posts_per_page=12');
if(have_posts()) :  whereas(have_posts()) :  the_post();
?>

The code above appears fairly straight ahead as a result of we’ve made inline feedback. One factor that you just in all probability would wish to edit is posts_per_page variable to fit your wants. You may also add different question parameters in case you so want. Now that we received the loop began, lets take a look at how we need to show the posts inside 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
//Present the left hand aspect 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
//Present the suitable hand aspect 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 begin the code by checking to see if the counter is 1 which suggests to point out our left grid. We merely go in and begin a div with a customized css class “griditemleft”. Inside it we added the submit thumbnail and the submit title. You may add or subtract any loop parts (equivalent to excerpts, dates, creator data, remark depend and many others). Discover: In our thumbnails, we’re calling an further picture dimension. You’ll in all probability have to switch the size-name with your individual dimension that you just created.

After the primary grid, we added an elseif that appears to see if the $counter matches the quantity laid out in our $grids (which it ought to as a result of we will likely be on the second submit). If the counter matches, then we will present our proper grid which begins with a customized css class “griditemright”. Discover after we shut the griditemright div, we’re including a transparent class. This we are going to clarify once we get to the CSS half.

After the loop is finished with this, we reset the counter to 0, so it could actually begin once more within the subsequent row.

We will merely finish the loop that we began by including this code:

1
2
3
4
5
6
<?php
$counter++;
endwhile;
//Put up Navigation code goes right here
endif;
?>

The code above mainly is constant the counter till it hits the restrict that’s laid out in our query_post variable. The explanation why we didn’t add the submit navigation code above is as a result of many people use a plugin or completely different show technique for this. So we’re leaving it open so that you can resolve for your self.

So our last loop code will appear like this:

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; //begin counter
$grids = 2; //Grids per row
international $query_string; //Want this to make pagination work
/*Organising our customized question (In right here we're setting it to point out 12 posts per web page and get rid of all sticky posts) */
query_posts($query_string . '&caller_get_posts=1&posts_per_page=12');
if(have_posts()) :  whereas(have_posts()) :  the_post();
?>
<?php
//Present the left hand aspect 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
//Present the suitable hand aspect 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 right here if you'd like it.
endif;
?>
</div>

Now that we’ve the PHP code prepared, lets take a look at how we’re going to model it.

Our default output would appear like this:

1
2
3
4
5
6
7
8
9
10
11
<div id="gridcontainer">
<div class="griditemleft">
<div class="postimage">   Put up Picture</div>
<h2>Put up Title</h2>
</div>
<div class="griditemright">
<div class="postimage">   Put up Picture</div>
<h2>Put up Title</h2>
</div>
<div class="clear"></div>
</div>

Listed below are the lessons that it’s essential to modify:

1
2
3
4
5
#gridcontainer{margin: 20px 0; width: 100%; }
#gridcontainer h2 a{shade: #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 suitable path in the direction of making a grid loop show on your WordPress posts.

Download The WPSaviour App Now

Related posts
Beginner’s GuideBest WordPress PluginsBlog

9 Best Social Proof Plugins for WordPress & WooCommerce (2020)

Tips

How To Disable The WordPress User Admin Toolbar

Tips

WordPress Front Page vs Homepage

Tips

5 Things You Must Avoid Doing in WordPress

Leave a Reply

Your email address will not be published.

Pay in your preferred currency
Indian rupee
Euro