The way to Display Your WordPress Posts in a Grid Layout

Do you ought to display WordPress posts in a grid layout?

A grid layout gives you more flexibility when displaying your posts in WordPress. This may be helpful when creating custom pages.

In this text, we’ll show you easily display your WordPress posts in a grid layout anywhere in your site. 

When Do You Need a Grid Layout for WordPress?

Every WordPress theme supports the normal vertical layout of blog posts, and this works well for many kinds of internet sites. Nonetheless, this layout can take up a number of space, especially if you’ve gotten a number of posts.

In the event you’re making a custom homepage to your site, then you could wish to use the grid layout to display your recent posts.

This gives you extra space so as to add other elements to your house page.

Plus, your post grid will highlight your featured images, so it’s visually appealing and clickable. You can even use the post grid to indicate off your creative portfolio and other forms of custom content.

Many magazine themes and photography themes already use the grid-based layout to display posts. Nonetheless, in case your theme doesn’t support this functionality, then you definitely’ll must add it. 

With that said, let’s show you display your WordPress posts in a grid layout. Simply use the short links below to leap straight to the tactic you ought to use.

Method 1. Create a WordPress Post Grid Layout with Block Editor

This method permits you to simply display your posts and thumbnails in a post grid layout using the WordPress block editor. There’s a built-in post grid block that permits you to create your individual grid. 

To do that, open up the page you ought to edit, then click the ‘Plus’ add block button and seek for ‘Query Loop’, then click the block so as to add it.

Add query loop block

This block adds your post loop to your page. 

Then, click the ‘Start Blank’ option at the highest of the block to create a post grid. 

Click start blank option

This offers just a few different selections depending on the style of information you ought to display along with your post grid.

We’ll select the ‘Image, Date, & Title’ option, but you’ll be able to select whatever you want.

Select the type of query loop

After that, hover over the image and choose the ‘Grid View’ option.

This turns your list right into a post grid.

Click on grid view option

Next, you’ll be able to customize the data you ought to display.

First, we’re going to delete the pagination at the underside of the block. To do that, simply click on it, and click on the ‘Three Dots’ options menu.

Then, click on ‘Remove Pagination’.

Click on delete pagination

This can mechanically remove the element from the block.

You may delete the dates from the posts the identical way or leave more post information to your visitors.

Next, we’ll add links to each the post thumbnail and post title.

Simply click in your post thumbnail and switch on the ‘Link to Post’ toggle within the right-hand options panel.

Turn on link to post toggle

Then, do the identical thing to your post title.

When you’re finished, click the ‘Update’ or ‘Publish’ button to make your post grid live.

Now, you’ll be able to visit your WordPress website to see your latest WordPress post grid.

Block editor post grid example

You may add this block to any page or post. In the event you’d prefer to use this as your blog archive page, then you definitely can see our guide on create a separate page for blog posts in WordPress.

Method 2. Create a WordPress Post Grid Layout With the Post Grid Plugin

This method offers an easy solution to add a customizable post grid you could add anywhere in your website.

Very first thing it’s worthwhile to do is install and activate the Post Grid plugin. For more details, see our guide on install a WordPress plugin.

Upon activation, it’s worthwhile to visit Post Grid » Add Latest to create your first post grid.

Then, give your post grid a title. This won’t appear anywhere in your page it’s simply to enable you remember. 

Post Grid plugin create new layout

Below this, you’ll find the post grid settings divided into different sections with multiple tabs. 

First, it’s worthwhile to click on the ‘Query Post’ tab. That is where you’ll define the post types that you ought to display within the ‘Post types’ box.

By default, it is going to only display posts, but you’ll be able to add pages and even custom post types.

Set post query type settings

After that, it’s worthwhile to click on the ‘Layouts’ tab.

Then, click the ‘Create layout’ button. This can open in a latest window.

Click create layout button

That you must name your layout. Then, click on the ‘General’ option, and it is going to open up a listing of tags. 

These tags are the data that can display in your post grid. 

Layout editor screen

We’ll select the ‘Thumbnail with link’ option and the ‘Post title with link’ option. 

Then, click ‘Publish’ or ‘Update’ to avoid wasting your layout.

Choose tags and save layout

Now, return to the unique post grid editor within the previous tab, and there can be a latest layout option available you could select.

Simply click on the brand new layout within the ‘Item layouts’ section at the underside of the screen.

Click new item layout

Next, click the ‘Item style’ tab. Here you’ll be able to set the dimensions of your grid. 

The default settings should work for many sites, but when not, then you definitely can change them here.

Change item style size

When you’re finished, click the ‘Publish’ button at the highest of the page, and your grid can be able to add to your WordPress blog.

Now, it’s worthwhile to click the ‘Shortcode’ tab after which copy the shortcode within the ‘Post Grid Shortcode’ box.

Copy post grid shortcode

After that, open up the page where you ought to display your post list and click on the ‘Plus’ add block button.

Then, seek for ‘Shortcode’ and choose the ‘Shortcode’ block.

Add shortcode block

Next, paste the shortcode you copied earlier into the box.

Then, click the ‘Update’ or ‘Publish’ button.

Paste shortcode and save

Now, you’ll be able to view your page to see your WordPress post grid layout live. 

Post Grid plugin example

Method 3. Create a WordPress Post Grid Layout With the SeedProd Page Builder Plugin

One other solution to create a post grid layout is using the SeedProd page builder plugin. It’s the most effective drag and drop WordPress page builder out there utilized by over 1 million web sites.

SeedProd

SeedProd helps you easily create custom pages and even completely custom WordPress themes without writing any code. You should utilize the plugin to create any sort of page you would like, like 404 pages, coming soon pages, landing pages, and more.

To learn more, see our guide on create a custom page in WordPress.

Within the SeedProd builder, as you’re customizing your page, simply click the plus ‘Add Section’ button anywhere on the page.

Click to add a new section

This can bring up an option so as to add a latest block.

Next, drag the ‘Posts’ block over to your page, and it is going to mechanically add a listing of posts to your page. 

Drag over blog post block

Now, you’ll be able to customize this block with the left-hand options panel.

First, scroll right down to the ‘Layout’ section. Here you’ll be able to set the variety of columns to your blog post grid and switch on the ‘Show Feature Image’ and ‘Show Title’ toggles.

Set number of columns, title, and image

Next, scroll right down to the ‘Show Excerpt’ toggle and the ‘Show Read More’ toggles and switch them off to create an easy blog post grid layout.

Turn off read more and excerpt toggles

If you ought to customize the colour scheme, text, and more, then click the ‘Advanced’ tab at the highest of the left-hand column. 

Then, click the ‘Text’ drop down and make your changes.

Customize post grid text

You may proceed customizing your page and blog post grid layout as much as you’d like. 

When you’re done, click the ‘Save’ button and choose the ‘Publish’ drop down at the highest of the page to make your changes live.

Now, you’ll be able to view your latest post grid in your website. 

SeedProd post grid example

Method 4. Create a WordPress Post Grid Layout by Adding Code to WordPress 

This method requires some basic understanding of add code to WordPress. In the event you haven’t done this before, then see our guide on copy and paste code in WordPress.

Before you add code, it’s worthwhile to create a latest image size that you simply’ll be using to your post grid. To learn more, see our guide on create additional image sizes in WordPress.

Next, you’ll need to search out the proper WordPress theme file where you’ll be adding the code snippet. For instance, you’ll be able to add it to your single.php, so it appears at the underside of your whole posts. 

You can even create a custom page template and use it to display your blog post grid layout with thumbnails.

To learn more, see our WordPress template hierarchy cheat sheet to assist find the proper theme template file.

When you’ve done that, you’ll be able to start adding code to WordPress. Because the code snippet is kind of long, we’ll break it down section by section.

First, add the next code snippet to your theme template file.


This code snippet sets up the post loop query. You may change the ‘posts_per_page’ variable to display more posts per page in case you’d like.

Then, add the next code snippet to your theme template file.


            

This code snippet creates two columns for our posts and can display the title and post image. It also creates a CSS class that we’ll show you style later. 

It also references ‘postimage’, so that you’ll need to vary this to the name of the image size you created earlier. 

After that, add the next code snippet at the tip.


This code snippet simply closes the loop. It also gives the choice so as to add post navigation, but most website owners use a distinct plugin for this, so we didn’t include it to avoid code conflicts. 

Here’s how the ultimate code snippet looks altogether.

Now, you’ll must add the next CSS to your site to make certain your post grid displays nicely. 

In the event you haven’t done this before, then see our guide on easily add 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 modify the several CSS selectors to see how they modify different elements of your post loop.

We hope this text helped you learn display your WordPress posts in a grid layout. You could also wish to see our guide on select the most effective web design software and our expert picks of the most effective live chat software for small businesses.

In the event you liked this text, then please subscribe to our YouTube Channel for WordPress video tutorials. You can even find us on Twitter and Facebook.

Leave a Reply

Your email address will not be published.