Beginner's Guide for WordPress / Start your WordPress Blog in minutes

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.

Subscribe to WPBeginner

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.

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. See how WPBeginner is funded, why it matters, and how you can support us.

The Ultimate WordPress Toolkit

Get FREE access to our toolkit – a collection of WordPress related products and resources that every professional should have!

Reader Interactions

46 CommentsLeave a Reply

  1. Hi
    I have tried this on my static homepage but it is not working.
    Do I just add the one shortcode or both ( ie the php code also?)

    using make theme.

    do i just add it to the page as a paragraph and shortcode?

    thanks
    julie

    • You should only need to add the shortcode to the page, if you reach out to the plugin’s support they should be able to let you know why it is not displaying properly

      Admin

  2. Is there a way to customize the thumbnails? I have mine set to the featured image, however some are different sizes and are cut off in the wrong areas.

    • In the layout settings, you should be able to customize the display of the featured iamges

      Admin

  3. I’m following all the steps to set this grid up on my homepage but it’s not displaying. I created a page, added the short code, and under settings–>reading I set my homepage to static with that page. What am I doing wrong?
    p.s. I purchased a child theme (Foodie Pro), could that be my issue? Thanks!

    • There may be a page template that could be causing a display issue, if you reach out to Post Grid’s support they should be able to help have it display properly :)

      Admin

  4. This was GREAT!!! Thankyou! I was able to apply this for my main blog page however I also have navigation for the different categories within my blog. How can I make it so that each of these category pages also displays as a grid?

  5. I installed this plugin but my WordPress site have been automatically updated to Gutenberg and now a box appears in all my WordPress Post pages, covering the content so I can’t see it! The only way I can get rid of it is to de-install Post Grid. Anyone have any other ideas so I can use the Post Grid? Thanks for any help! L

  6. I have the page set up but I have 5 posts that I did before that are not showing up on the new Post Grid.

    How do I get the posts to show up on the grid?

  7. I’m using the Twenty Fourteen theme and this only gave me one option for layout instead of what you are showing and the one they let me use is a double but it just doesn’t work even the pagination got stuck on me so I don’t know what to do,is there a better plugin for my theme?

  8. What a simple solution, i understand WP and PHP on a good level and this is the smartest and easiest solution to make a grid of posts and fetch them up from the DB, although the need is pretty rare if you are willing to make a different page for any purpose otherwise there are themes that have built-in support of many kinds of grids designs i customized and designed a bit on my web there at simspk.com, also keeping simple and clean content is the simplest way to achieve better ranks, Great post bro, keep them up!

  9. What about for blog category pages? They just get listed vertically in my theme and it looks lame and wastes so much space! I want it to grid them just like the home blog page does.

      • Hey Daniel and Jess,

        The plugin’s premium version claims to have the option to create post grid for category archive pages. We didn’t test the premium version for the article. Please check the plugin website to learn more before buying.

        Admin

  10. I have the Dara theme with the Premium plan, and I am VERY NEW. Unfortunately, I just realized that plug-ins are only available with the Business plan, which I cannot afford to invest in at this time since it would triple my cost. Dara has a grid page option, but it only allows child pages to be displayed – I want POSTS to display from a specific category. Looks like I would have to create a static child page every time I want new content to appear in this Premium plan Dara grid page option, right??

  11. This is great but is this same process possible WITHOUT installing a plugin. How do you shows 10 different category separately? How select images for grid?

  12. This is awesome! Is there a way to edit from two across ( 2 columns) to three or four? When I change the settings to 20 posts a page, I am getting 2 columns and 10 rows.

  13. Hi, I followed all the steps but it doesnt work. The page where I posted the shortcode of postgrid doesnt show up as my how page. Whats wrong? Maybe the Php code is needed?

    I need you guidance. Thank you. I appreciate you response

  14. Hi, that’s great plugin.
    But i can’t creat a grid with three colums, only two colums.
    How can i?

  15. Hi,

    I’ve used this plugin on all the sites i’ve created, i love it its so easy to use but im having a problem with the layout a little bit. Im using Layout 1 with 4 Columns and for some reason a row splits into two different rows, how do i stop this from happening?

  16. Hello there. This was very helpful thank you. It works fine on the front page of my blog but wouldn’t work in the categories. Whenever a category is clicked in the header, the page shows the theme grid and not the Post Grid. How do I go about this? What page do I copy the code into please?

    Thank you

  17. My current theme doesn’t have the grid layout for the blog section. I’ve download the plugin and it works great but when I upload a new blog post does it automatically update the grid to include the latest post? Thank you for the super helpful video!

  18. I’m trying to make the blog section of my site look nicer here – is there a way to automatically style the current blog posts in a grid rather than creating a new page and adding shortcode or editing php files?

  19. Hi Thank you for the nice Article. Is there any way to make the same without plugin. If so how could i ?
    Thanks :)

  20. I want to use this but i am confused, I follow it but I dont see anything, I copy the shortcode but still nothing, do I have to upload images and text? can someone help?

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

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

  23. 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?

  24. 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

  25. 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

  26. 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

  27. 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 freejobalert.in

  28. 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.
    thanks
    Natalie

    • 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!

      Paul

Leave A Reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.