What's WP
Find Everything Related to WordPress - Best Tutoriasl on WordPress!
How to Display WordPress Posts and Pages in a Grid Layout?

How to Display WordPress Posts and Pages in a Grid Layout?

Have you ever thought about showing your posts and pages in a different manner? This can be achieved with a single grid layout. In the following sections, we will carefully introduce a simple and straight-forward method to help you display WordPress posts and pages in a grid layout.

Why Need a Grid Layout on Your WordPress Site?

It is common that many websites nowadays are still using a traditional vertical layout to display their posts and pages. However, this can be unfavorable for you to arrange your site contents, especially when you want to show a great deal of articles at the same time.

In this case, using a grid layout can save yourself the trouble. Besides taking up less space, a grid layout is more visually appealing, which, in return, can be helpful to attract more attention from the visitors’ side as well as boost the site readership and traffic.

How to Show Posts and Pages in a Grid Layout?

After the brief review on the potential benefits of a grid layout, let’s move to the most important part about how to add it to the WordPress site of your own. Instead of bothering yourself with some coding staff that is both time and energy consuming, we have selected a plugin named as Post Grid to help you through this process.

Post Grid Plugin

This plugin can query posts from any of your custom post types and create an awesome grid to display them. Refer to the following steps to see how the plugin will be used.

Step 1: Install the Post Grid plugin

In the very beginning, you need to install the Post Grid plugin. Get started by logging to your dashboard. Then, click on the “Plugins” > “Add New” option, enter the plugin name to the search box, and hit the “Install Now” button next the first search result. Finally, activate the plugin to make it ready-to-work.

Install the Post Grid Plugin

Step 2: Create a new post grid

Once the activation process is done, you will see a new item labeled as “Post Grid” on the admin area. Hover your mouse to it and click on the “New Post Grid” option in the menu bar that it opens up.

Click the New Post Grid Option

As the screen capture shows, the process of adding a new post grid is similar to that of creating a new post or page. Firstly, you need to provide a title for the post grid. Then, you can define how the post grid will work on your WordPress. Since the plugin provides a lot of options that are distributed in different sections, we will explain the configuration of some major sections in detail.

Create a New Post Grid

The first section, namely, “Query Post”, is provided for you to define how the plugin will query posts to display in a grid layout. Since most of the options here are self-explanatory, you can configure them according to the actual needs of your website.

Query Post Section

The second section – “Layout” is where you can change both the content layout and skin of this post grid. Presented as the following image, the plugin now offers four content layouts and five skins for you to choose. If in any case you are not satisfied with the default content layouts, you can click the “Edit” link to create a new layout.

Layout Section

After changing the appearance of the grid layout, now we come to the layout settings page. The default settings coming with this plugin can work well on most websites. However, you can also made some modifications if there is a need.

Layout Settings Section

As for the last section, it is provided for you to style the navigation method of the grid layout. You can choose to display the post query in a pagination manner or in the default way. If the first way is selected, you can make some customization to it by choosing a theme that you prefer among the two options – “Lite” and “Dark”.

Navigation Section

When you are done with all the settings above, remember to publish the post grid to make it work alright and proceed to the next step.

Step 3: Display the post grid on your WordPress site

After creating a new post grid, the next thing to do is displaying it on your WordPress site and share it with your readers. To perform this, all you need is a shortcode.

As you may noticed, there is a “Shortcodes” tab on the post grid editing page containing a shortcode and a PHP code. Here, you need to copy the shortcode and paste it into the content area of any posts and pages where you want to display the post grid.

In the next, do not forget to publish or update the post (page) to enable all your changes. When you have finished all the operations above , you can now visit your site to see the post grid functioning as below.

Post Grid in Action


Zoe is a freelance writer who has a deep knowledge about WordPress. She loves everything related to website building and loves to share her experience with people all over all the world. In the daily life, Zoe loves detective novels as it can train her logical thinking and creativity.