How to Display Your WordPress Posts in a Grid Layout

display wordpress posts

Sometimes you should play with posts. In fact, you should show posts in different orders, like grid and masonry layouts. So that your readers don’t feel bored, and it becomes easier for your reader to read your posts. 

For your readers, you can show your posts in a grid layout. If you don’t know how to display WordPress posts in a grid layout, you can take help from this post. Here I am going to show you the full process. Afterward, you will be able to display WordPress posts in a grid layout by yourself. 

Let’s start, then. 

Displaying WordPress Posts in a Grid Layout With Plugin

To display WordPress posts in a grid layout, you need an external plugin named Ultimate Blocks. It’s free and comes with 20+ intuitive blocks that make your editor easier than ever. To do it, follow these steps and then try yourself.

Step 1: Install Ultimate Blocks Plugin

From your dashboard, navigate to Plugins -> Add new Plugin and search for ‘Ultimate Blocks’. 

Click on the ‘Install Now’ button and install it. After the installation is complete, don’t forget to activate the plugin. 

Step 2: Add Post Grid Block

Now open the page or post where you want to display WordPress posts in a grid layout. Click on the ‘Add Block’ (+)  button and search for ‘Post Grid’. 

Add the block by clicking on it. It will automatically generate and display WordPress posts in a grid layout with recent blogs. 

Step 3: Customize

There are two types of view available; Grid and List. For further customization of the block, check on the right-side block settings panel. 

Here you have options to display your WordPress post in a grid layout with authors, orders, categories, and tags. By default, you will be able to show six posts; if you want more than that, pull the slider and set it to your required number. 

You have also other options for setting image width, preserving the aspect ratio, displaying the author, featured image, date, excerpt, continue reading link, and title. 

Displaying WordPress Posts in a Grid Layout With Block Editor

This method doesn’t require any plugins; all you need is the block editor and nothing else.

Step 1: Insert Query Loop Block

First, open the page or post where you want to display WordPress posts in a grid layout. Click on the “Add block” button and search for “Query Loop”.

Insert the block by clicking on it. This block allows your posts to loop on your page. Now click on the “Start blank” button.

Step 2: Choose Variation

This will provide you with a few variations to start with. Here, I am selecting “Image, Date, & Title”, but you can choose any of the variations.

After clicking on it, you will see, all your posts in the list view.

Step 3: Display Posts in Grid View

Now, select the parent block.

Click on the “Grid View” button, this turns your list into a post grid.

Now, you will see your posts in a grid view.

Step 4: Customize

Next, you customize your grid view. I suggest removing the pagination first, to do that select the pagination block and click on the three dots. Click on “Remove Pagination”.

This will remove the pagination.

In the same way, you can remove the dates, just select dates, click on three dots, and click on “remove dates”.

If your headings are bigger, click on the headings and reduce the heading size to H4 or according to your wish.

It is wise to add links to both the post title and thumbnail. To do this, click on any post thumbnail, then click on settings -> toggle “Link to Post”.

Do the same for the title.

It will look something like below.

There are other customization options available, do it as you like.

If you like to show more posts, click on the query loop block and hit settings. From there, click on ‘Inherit query from template’.

It will display all other posts in the grid layout.

Finally, when you are done, hit the Update or Publish button.

Last Words

The best part of Ultimate Blocks is, that it doesn’t only provide you with one functionality or feature. In fact, it is the magic box of Advanced Gutenberg blocks that makes your life easy. I hope now you will be able to display WordPress posts in a grid layout by yourself. 

If you can’t configure the plugin or face any other problems, feel free to share it with me. I will be happy to help you. If you liked this post please share it with your friends, and don’t forget to leave comments behind in the box below. 

Leave a Reply

Your email address will not be published. Required fields are marked *

Get the Best Blocks Plugin at 20% OFF!

X
Need help?