Do you wish to show your WordPress posts in a grid format?
When presenting your content in WordPress, a grid layout provides you with additional options. This might come in handy when designing custom pages. We’ll teach you how to quickly display your WordPress posts in a grid style anywhere on your site in this article.
When do you need a WordPress grid layout?
Every WordPress theme supports the classic vertical blog post style, which works well for the majority of websites. This style, however, might take up a lot of space, especially if you have a lot of articles. If you’re making a custom homepage for your blog, you might want to utilize the grid style to show off your most recent content.
This will allow you to add more things to your home page. Furthermore, your post grid will accentuate your featured photos, making them more aesthetically appealing and clickable. The post grid may also be used to display your creative portfolio and other forms of unique material.
Using block editor, create a WordPress post grid layout.
Using the WordPress block editor, you can easily display your posts and thumbnails in a post grid arrangement. You may construct your own grid using the built-in post grid block.
Open the page you wish to change, then click the ‘Plus’ add block button, search for ‘Query Loop,’ and then click the block to add it.
This block incorporates your post loop into your page.
Then, at the top of the block, select ‘Start Blank’ to create a post grid.
Depending on the sort of information you want to display with your post grid, you have a few options.
We’ll go with ‘Image, Date, and Title,’ but you may do whatever you want.
Then, mouse over the image and choose the ‘Grid View’ option.
This converts your list into a grid of posts.
The information displayed can then be customised.
First, we’ll remove the pagination at the bottom of the block. Simply click on it and select the ‘Three Dots’ options menu.
Then, choose ‘Remove Pagination.’
This will delete the element from the block automatically.
Similarly, you may remove the dates from the posts or leave additional post information for your readers.
Following that, we’ll add links to both the post thumbnail and the post title.
Simply click on the thumbnail of your post and toggle the ‘Link to Post’ toggle in the right-hand options box.
Then, for your post title, repeat the process.
When you’re completed, click the ‘Update’ or ‘Publish’ button to publish your post grid.
You may now view your new WordPress post grid by visiting your WordPress website.
Then, for your post title, repeat the process. When you’re completed, click the ‘Update’ or ‘Publish’ button to publish your post grid. You may now view your new WordPress post grid by visiting your WordPress website.
By adding code to WordPress, you may create a WordPress post grid layout.
This approach necessitates a basic grasp of how to insert code into WordPress. Before you begin adding code, you must first establish a new image size for your post grid.
Next, locate the WordPress theme file to which you’ll be adding the code snippet. You may, for example, include it in your single.php file so that it shows at the bottom of all of your articles. You may also make your own page template to display your blog post grid layout with thumbnails.
After that, you may begin adding code to WordPress. We’ll break down the code sample section by section because it’s very long. To begin, insert the following code snippet into your theme template file.
<?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 post loop query is set up in this code line. If you like, you may alter the ‘posts per page’ variable to show more posts per page.
Then, in your theme template file, paste the following code snippet.
<?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;
?>This code line produces two columns for our articles, displaying the post title and picture. It also generates a CSS class, which we will style later. It also refers to ‘post image,’ which must be replaced with the name of the image size you made previously.
Then, in the end, add the following code snippet.
<?php
$counter++;
endwhile;
//Post Navigation code goes here
endif;
?>This piece of code just closes the loop. It also allows you to add post navigation, but because most website owners use a different plugin for this, we didn’t include it to avoid code conflicts.
Here’s how the entire code snippet appears.
<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>In order to make sure that your post grid shows properly, add the following CSS to your website.
#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;
}Explore the effects of various CSS selectors on different components of your post loop by experimenting.
We hope this article was useful in teaching you how to display your WordPress posts in a grid style.
