Beginner's Guide for WordPress - Start your WordPress Blog in minutes.
Choosing the Best
WordPress Hosting
How to Easily
Install WordPress
WordPress Plugins
View all Guides

How to Display Your WordPress Posts in a Grid Layout

Last updated on by
Special WordPress Hosting offer for WPBeginner Readers
How to Display Your WordPress Posts in a Grid Layout

Do you want to display WordPress posts in a grid layout? Most WordPress themes do not come with a grid layout display for your posts. In this article, we will show you how to display your WordPress posts in a grid layout on any theme without writing a single line of code.

Displaying WordPress posts in grid layout

When Do You Need a Grid Layout for WordPress?

Traditional vertical layout of displaying posts works well for most websites. However this layout can take up a lot of space specially if you want to display a large number of posts.

If you are using a custom homepage for your WordPress site, then you may want to use a grid based layout to display your recent posts.

It will save space, so that you can add other items on your homepage. It also looks more visually pleasant due to prominently displayed featured images.

WordPress themes designed for magazine or photography websites already use grid based layout to display posts. However, if you are using a theme that doesn’t support it, then you will need to create your own template for that. This would require you to learn PHP, HTML, CSS, etc.

Let’s see how you can show WordPress posts in a grid layout on any theme without having to write any code.

Displaying WordPress Posts in a Grid Layout

To make it easy, we have created a video tutorial on how to display your WordPress posts in a grid layout that you can watch below.

However if you just want to follow text-instructions, then you can follow our step by step tutorial on how to how to display your WordPress posts in a grid layout.

First thing you need to do is install and activate the Post Grid plugin. For more details, see our step by step guide on how to install a WordPress plugin.

Upon activation, you need to visit Post Grid » New Post Grid page to create your post grid.

Creating a new post grid

The post grid page is divided into different sections presented by the tabs on the top row. First you need to click on the ‘Query Post’ tab.

This is where you will define how you want the plugin to retrieve the posts for display.

Query posts to be displayed in the grid

You can select the post type you want to display. By default, it will display ‘posts’ but you can choose pages if you want, or select any custom post type.

Next you need to click on the layout tab. This is where you can select how you would want to display your grid.

Choosing your grid layout

You can select the content layout. The plugin comes with a few choices like flat, flat center, flat right, etc. You can also click on the edit button and that will open the layout editor where you can create your own layouts.

You can choose from one of the 5 available skins. Some of the skins have cool visual effects that flip or rotate the image when a user takes mouse over to the thumbnail.

Now you need to click on the ‘Layout Settings’ tab. The settings here should work on most websites, but if your grid layout does not fit on your page, then this is where you can fix that.

Grid layout settings

Finally, click on the navigation tab and select your pagination style.

Once you are done, simply click on the publish button. This will make your post grid available, and you can add it to the page where you want to display post grid.

Adding Posts Grid in a WordPress Page

On the post grid editor, you will see the tab shortcodes. Clicking on it will display a shortcode.

Copying the shortcode

Copy the shortcode and edit the WordPress page where you want to display your post grid. Paste the shortcode inside the content area where you want to display the grid.

Next, save your page by clicking on the update button. You can now visit your website to see the post grid in action.

WordPress posts displayed in a grid layout

You can also use the PHP code if you want to add the post grid directly into your WordPress theme files.

That’s all we hope this article helped you display your WordPress posts in a grid layout. You may also want to see our guide on adding multi-column content in WordPress posts.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi. Page maintained by Syed Balkhi.

WPBeginner's Video Icon
Our HD-Quality tutorial videos for WordPress Beginners will teach you how to use WordPress to create and manage your own website in about an hour. Get started now »


  1. mike says:

    This is cool for pages only. What if my posts belong under categories only. How do I add the shortcode to category archive. Thanks

  2. Dave Parks says:

    I finally found “Taxonomy” setting on the plugin homepage – available if you buy the premium.
    Which means the freebee is of zero value.

  3. Dave Parks says:

    The only category setting I see is

    “Exclude by post ID
    you can exclude post by ID, comma(,) separated”

    With all due respect to the creator of this plugin, there’s no way I’m going input all the IDs I do not want to appear. The list is too long, and it will grow as I develop this site.

    So is there some place to put in the one ID that I want to appear?

  4. Tina Davidson says:

    Hi – I finally have my blog up and running – yay! But want to add a store element to it. A “Shop Now” page. Do you think this its the best type of plug-in to use or is the one more efficient for a store set-up? Thanks so much! Tina

  5. hasan says:

    thanks for good knowledge
    my website has two kinds of contents : post and pages.
    can i add my new pages on homepage automatically without using widgets?
    thanks again

  6. Karthik says:

    hi thanks for kind info,

    please help me how to filter post by categories

  7. hasan says:

    thank you for good knowledge
    i use a theme support magazine template on my site but it includes only posts .
    how can i use this template for pages also not only posts ?
    thanks again

  8. anil singh says:

    thanks who do not know php and how to cutomize homepage this article will be helpful. i have one question which i searched all the web but not find any article. quetion is how can custmize homepage with category list without showing post area in homepage please make article for it . you can see example on

  9. judit says:

    Will this pluggin work on

  10. Tonia says:

    Hi – i see an image in your blog article, does this support featured content image ?

  11. natalie james says:

    Thank you so much for this article, it is as though you were reading my mind and my wish list for my blog. I was easily able to follow your step by step instructions until the very end. Im not sure how to put my query correctly, I think what Im trying to say is that I would like the grid page to be my landing page of my blog. At the moment it is inside a post with a post heading. You do mention at the end that I can past the code into my themes file but unfortunately I dont know where that is. Hope this makes sense and I look forward to your reply.

    • Paul Wandason says:

      Hi Natalie,

      I maybe wrong here – but I think you need to create a *page* with the grid on it, then if you go to “settings” then “reading” in the wordpress admin dashboard, you can set “Front page displays” to a static page, and select the page you’ve just created with the grid on it under the “front page” drop down menu.

      Hope this helps, and good luck!


Add a Comment

We're glad you have chosen to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and all links are nofollow. Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.