How to Display Your WordPress Posts in a Grid Layout

Do you want to display plenty of posts on your WordPress site? Yes, then the WordPress grid layout can help you save a lot of space. Typically, this type of layout is popular on websites with loads of photographs and image galleries. Yes, but it can be used on any type of website.

What’s more? You can display your posts in a grid layout, even when your current theme does not support it. That’s right, you can create a grid layout easily without writing a single line of code.

Through this WordPress grid layout tutorial, let’s understand when you need a grid layout – and how to create a grid layout for your posts.

When Do You Need a Grid Layout for WordPress?

Typically, you will need a grid layout when you need to publish plenty of posts (for example, blog posts) on your WordPress sites. First, let us understand what is a WordPress post grid layout? This layout enables posts to be displayed in a small-sized square-shaped space, which could also contain the post title, thumbnail image, and a brief abstract of the post.

Each post is contained within a single square of the grid layout, containing a fixed number of rows and columns. The grid size is dependent on the number of posts that needs to be displayed.

When would you need a grid layout for your WordPress posts? Here are some scenarios:

• When you want to display your most recent posts in smaller layout space.
• When you want to share many content pieces (or posts) daily (for example, a news outlet).
• When you want to save space to display additional items on the page.
• When you want to display files and folders from multiple sources including web servers and cloud-based storage locations like Google Drive and Amazon Box.

The WordPress grid layout is also effective for using content to engage with website visitors. This layout is useful to keep your online visitors longer on your website and simplify navigation. For instance, a post with a grid on a WordPress site along with a thumbnail can enhance the visual look of your webpage.

Next, let us see how to display WordPress posts in a grid layout on any WordPress theme without writing any HTML code.

Displaying WordPress Posts in a Grid Layout

Here is the method where you can display WordPress posts in the form of a grid – without installing any WordPress plugin:

1. Sign in to the WordPress Admin panel, then navigate to Appearance > Customize.
2. Next, open the “Blog Settings” page.
3. From the “Blog” tab, select the layout as “Grid” and configure the number of grid columns.
4. Save the changes on your blog settings page.

Alternatively, you can use a WordPress page builder tool like Elementor to create a grid layout for your posts. Here are the steps you need to perform:

1. Open the Elementor tool and add a new page from the Pages menu. If you have already created the webpage, open it in the Edit mode.
2. Drag and drop “Posts” to the page location.
   
3. Next, you can customize the page with the following fields:
   • Posts number (or the total number of posts to be displayed)
   • Columns (or the number of grid columns)
   • Post Type (to be set to “Posts”)
   • Query posts by – or the sorting order of the posts (for example, latest posts)
   • Show Posts Title (to show or hide the post title)
   • Title Word Trim (to show a long post title in full or to trim it)
   • Show Posts Featured Image (to display or hide any featured image)
   • Show Featured Image As (for instance, as a simple image)
   • Featured Image size (to set the thumbnail size of the featured image)

   

4. Click “Apply” to save the changes that you have made.

You can also create a grid layout for your WordPress posts by using a WordPress grid plugin like Post Grid or WP Display Files Pro. Let us first look at how to work with the Post Grid plugin:

1. Install and activate this WordPress plugin on your website.
2. Create a new post grid in the editor tool.
3. From the “Query Post” tab, select the post type (for example, “Post”), post status, and the number of posts on each page.
   
4. Select the content layout (or how you want to display the grid) on the “Layout” tab.
5. From the “Layout Settings” tab, configure layout parameters like the width of the grid items for different devices, grid height, and the size of the featured image.
   
6. Finally, after completing the changes, publish the post grid to the specified page.

In the next section, let’s see how to add the post grid on any WordPress page using shortcodes.

Adding Posts Grid in a WordPress Page

From the “Post Grid” plugin editor tool, you can view the “Shortcodes” tab. From this tab, copy the displayed PHP shortcode – and then paste the shortcode on any WordPress page content where you want to display this grid layout.

Conclusion

Through this blog, we have discussed how to create a grid layout to display your WordPress posts on any webpage. This can be easily done without writing any code – and even on themes that do not support grid layouts.

With years of experience and expertise in WordPress plugin development, Flipper Code has been at the forefront of providing its global customers with various services like website development and WooCommerce store development. Check out our list of premium plugins that you can install on your WordPress or WooCommerce site.

Looking for help in creating your next WordPress plugin? Contact us today.