Are you looking for ways to display WordPress posts in a grid layout? Here you go. Keep your concentration up to the last and know everything in detail about WordPress posts grid layout.
When you use a grid layout in WordPress, your posts are displayed more clearly. In the case of creating custom pages, this can be helpful. This article demonstrates how you can display your WordPress posts in a grid layout anywhere on your website by using 3 different ways.
Table of Contents
WordPress themes all support vertical blog posts, which work well for most website types. If you have a lot of posts, this layout will take up a lot of space.
The grid layout is an excellent choice for displaying recent posts on a custom homepage.
Adding other elements to your home page will be easier now that you have more room.
In addition to being visually appealing, the post grid makes your featured images more clickable. Plus, for showcasing your creative portfolio, you can also use the post grid for showcasing custom content around your site.
It is already common practice to display posts in a grid-based layout in several magazine themes and photography themes. Nonetheless, if your theme lacks this functionality, you must add it.
Therefore, let’s see how to use a grid layout on WordPress posts.
Using the WordPress block editor, you can easily display your posts and thumbnails in a post grid layout. Creating your own grid is easy with the post grid block.
You can do this by opening a page, clicking the ‘Plus’ button for the Add Blocks button, then searching for ‘Query Loop’, then adding it.
Adding this block to your page will add your post loop.
After clicking ‘Start Blank,’ you can create a grid of posts.
With this, you can choose what type of information you would like to display with the grid.
The option we will select is ‘Image, Date, & Title,’ but you can choose whatever you prefer.
Afterward, hover over the image and choose ‘Grid View’.
By doing this, your list will become a grid of posts.
In the next step, you will be able to customize the information you wish to display.
Let’s start by removing the pagination at the bottom. You can do this by clicking on it and selecting ‘Three Dots’ from the menu options.
After that, click ‘Remove Pagination’.
When this is done, the element will be automatically removed from the block.
If you want, you can also leave more post information for your visitors rather than deleting the dates from the posts.
In the next step, we’ll link both the title and thumbnail to the post.
In the right-hand options panel, click on your post thumbnail and toggle the ‘Link to Post’ option.
Next, write the title of your post.
You can then make your post grid live by clicking the ‘Update’ or ‘Publish’ button.
To view your new WordPress post grid, visit your WordPress website.
With this method, you can easily add a customizable post grid to any part of your website.
To begin, you must install and activate the Post Grid plugin. See our WordPress plugin installation guide for more details.
To create your first post grid, visit Post Grid > Add New after activation.
Create a title for your post grid. To make it easier for you to remember, this will not appear anywhere on your page.
Under this, you will find multiple tabs divided into different sections for the post grid settings.
Click the ‘Query Post’ tab first. In the ‘Post types’ box, you can define what post types you want to display.
Normally, it displays only posts, but you can also add pages and custom post types.
Once the ‘Layouts’ tab has been selected, click it.
To create a layout, click ‘Create layout’. Please click on this link to open it in a new window.
It is important to name your layout. Once you click on the ‘General’ option, you will see a list of tags.
You can use these tags to display information about your posts.
We will select the option ‘Thumbnail with link’ as well as the option ‘Post title with link’.
You can save your layout by clicking ‘Publish’ or ‘Update’.
Back in the previous tab, click the layout option to return to the original post grid editor.
At the bottom of the screen, click on the ‘Item layouts’ section to view the new layout.
The next step is to click the ‘Item style’ tab. You can adjust the grid’s size here.
Most sites will work with the default settings, but if they don’t, you can customize them here.
You can now add the grid to your WordPress blog once you’re ready. Click the ‘Publish’ button at the top of the page when you’re finished.
In the ‘Post Grid Shortcode’ field, copy the shortcode from the ‘Shortcode’ tab.
Select the page on which you wish to display your post list, then click on ‘Plus’ to add a block.
Select ‘Shortcode’ from the ‘Shortcode’ block after searching for ‘Shortcode’.
After copying the shortcode, paste it into the box.
Click ‘Publish’ or ‘Update’ to finish.
The WordPress post grid layout is now visible on your page.
It is necessary to understand the basics of how to add code to WordPress before using this method. Here’s how you can copy and paste code in WordPress if you’ve never done it before.
To add code to your post grid, you need to create an image size.
Adding the code snippet requires you to locate the appropriate theme file. If you want it to appear at the bottom of all your posts, you can add it to single.php, for example.
The blog post grid layout with thumbnails can also be created using a custom page template.
WordPress is ready for you to start adding code once you’ve done that. Our goal is to break down the code snippet section by section as the snippet is quite long.
To begin, add the following code snippet to the template file for your theme.
<?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(); ?>
Here is a code snippet that sets up the post loop query. Changing the variables ‘posts_per_page’ can display more posts per page.
Then, update your theme template file with this 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;
?>
We’ll display the title and image of our posts in two columns using this code snippet. As well as creating a CSS class, it also creates a style variable that we’ll see how to style later.
Additionally, it references ‘postimage.’ To replace that with the file name you created earlier, change the word ‘postimage’ to the file name you created.
After that, add this code snippet.
<?php $counter++; endwhile; //Post Navigation code goes here endif; ?>
The purpose of this code snippet is to close the loop. It also allows you to add post navigation, but because most site owners are using a separate plugin for all of this, we didn’t add it to prevent code clashes.
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>
To ensure that your post grid shows properly, add the following CSS to your site.
If you’ve never done it before, check out our tutorial on how to simply apply custom CSS to your WordPress site.
#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;
}
You may experiment with the various CSS selectors to see how they affect different components of your post loop.
We hope this helped! From now on, you can display WordPress posts in a grid layout using 3 three different ways. So, if you find this helpful for you, share this with your friends and colleagues who are WordPress enthusiasts.
You may also like our guide on how to clear cache files in WordPress, and also the guide on how to optimize your blog posts for SEO. You can learn more about WordPress by reading our blog. If you could let me know what topics most interest you, I would greatly appreciate it. Any comments you may have would be greatly appreciated.
If you like this post, be with ThemeLooks and subscribe to our WordPress video tutorials on YouTube. We may also be found on Twitter, LinkedIn, and Facebook.
