Find out how to use a grid layout to display your WordPress posts

Do you want to see WordPress articles organized into a grid?

Find out how to use a grid layout to display your WordPress posts – WordPress’s grid style provides you with additional display options for your content. In the process of making bespoke pages, this might be useful.

In this article, we’ll show you how to quickly put your WordPress articles on your website in a grid format.

When Does WordPress Need a Grid Layout?

Every WordPress theme supports the conventional vertical blog post style, which is suitable for the majority of websites. However, if you have a lot of posts, this style may take up a lot of room.

Use the grid style to show your most recent content if you’re designing a custom homepage for your website.

You will have extra room as a result to include more components on your home page.

Your featured photographs will be highlighted in your post grid, making them clickable and aesthetically pleasing. You can use the post grid to show off your creative portfolio and other original work.

The grid-based style is already widely used in photography and magazine themes to show postings. However, you’ll need to add it if your theme doesn’t already support it.

Let’s now demonstrate how to display your WordPress articles in a grid style. To get to the technique you want to utilize right away, just choose one of the fast links below.

Use the block editor in WordPress to create a grid layout.
Use the Post Grid plugin to create a grid layout.
By adding code to WordPress, you can create a grid layout.

1. Use the block editor in WordPress to create a grid layout.

Using the WordPress block editor, you can easily display your articles and thumbnails in a post grid arrangement. You may build your own grid using the built-in post grid block.

To do this, first, visit the page you want to update, then click the “Plus” add block button, conduct a search for “Query Loop,” and then click the block to add it.

Your post loop is added to your page using this block.

Then, to create a post grid, click the “Start Blank” button at the block’s top.

Depending on the kind of information you want to show with your post grid, this offers a few distinct options.

The option we’ll choose is “Image, Date & Title,” but you may choose any choice you wish.

After that, pick “Grid View” by hovering your cursor over the picture.

Your list now resembles a post grid.

After that, you may edit the data that will be shown.

We’ll start by removing the pagination from the block’s bottom. Simply click on it to access the “Three Dots” menu, and then click to complete the action.

Next, choose “Remove Pagination.”

By doing this, the element will be automatically removed from the block.

The dates in the posts can be taken out in the same way, or you can give your readers more information about the post.

Next, we’ll provide links for the post title and post thumbnail.

Toggle the “Link to Post” switch in the right-hand options panel by clicking on your post’s thumbnail.

Then, repeat the process with your post title.

To make your post grid live after finishing, click the “Update” or “Publish” button.

Visit your WordPress website right now to view your brand-new post grid.

This block may be added to any page or post.

2. Use the Post Grid plugin to create a grid layout.

With this technique, you can easily add a flexible post grid to any page of your website.

Installing and turning on the Post Grid plugin is the first thing you need to do.

To construct your first post grid after activation, go to Post Grid » Add New.

Give your post grid a title after that. This is simply to help you remember; it won’t display anywhere on your page.

The post grid settings, which are organized into many parts and have several tabs, are located below this.

You must first choose the ‘Query Post’ option. The post types that you wish to see in the “Post types” box may be defined here.

You can add pages and even custom post types, but by default, it will just show posts.

You then need to choose the “Layouts” option.

Next, choose “Create Layout” from the menu. This will launch a new tab.

Your layout needs a name. Then, choose the “General” option, and a list of tags will appear.

The details from these tags are what your post grid will show.

The options “Thumbnail with the link” and “Post title with the link” will be chosen.

To save your layout, click “Publish” or “Update.”

Return to the original post grid editor in the previous tab at this point, where you may choose from a new layout choice.

Clicking on the new layout in the “Item layouts” section at the bottom of the screen will choose it.

Select the “Item style” tab next. The size of your grid may be modified here.

If the default configuration doesn’t work for your site, you may adjust it here.

Your grid will be prepared to be added to your WordPress blog when you’re done and click the ‘Publish’ button at the top of the page.

The shortcode must now be copied into the “Post Grid Shortcode” box once you select the “Shortcode” tab.

Next, on the page where you want to display your post list, click the ‘Plus’ add block button.

After that, choose the “Shortcode” block by searching for “Shortcode.”

The shortcode you previously copied should now be pasted into the box.

Next, choose “Update” or “Publish” from the menu.

You can now go to your page to see how the WordPress post grid layout looks in real.

3. By adding code to WordPress, you can create a grid layout.

This technique needs a working knowledge of how to add code to WordPress.

You must first create a new picture size that will be used for your post grid before adding the code.

The next step is to find the appropriate WordPress theme file to add the code snippet. You might, for instance, include it in single.php so that it would be shown below each of your posts.

Also, create a unique page design and use it to show thumbnails of your blog posts in a grid format.

You may then begin adding code to WordPress after completing that. We’ll divide the code sample up into sections since it’s so lengthy.

To begin with, include the following bit of code in 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 made up using this line of code. If you’d like, you may modify the “posts_per_page” variable to show more posts per page.

Then, include the below bit of code in your theme template file.

<?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;
?>

The title and post picture will be shown in two columns for our posts thanks to this line of code. Additionally, it produces a CSS class, which we’ll show you later how to style.

You must replace “postimage” with the name of the image size you previously made since it also refers to it.

Then, add the following piece of code at the end.

<?php
$counter++;
endwhile;
//Post Navigation code goes here
endif;
?>

This piece of code just ends the loop. Most website owners use a separate plugin for this, but it also has the option to add post navigation, so we didn’t include it to avoid code conflicts.

Here is the whole code snippet in its entirety.

<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, in order to ensure that your post grid shows properly, you must 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;
}

You may alter the various CSS selectors to see how they alter certain post loop items.

Our goal in writing this tutorial was to teach you how to display your WordPress articles in a grid format. You may also be interested in reading our article on “How to easily add custom CSS to any WordPress site“

If you are still not able to fix this issue, then hire our expert WordPress developer to fix this issue.

Find out how to use a grid layout to display your WordPress posts