Skip to Main Content

How to display your WordPress publications in a grid layout

Divi: the easiest WordPress theme to use

Divi: The best WordPress theme of all time!

With over 701.000 downloads, Divi is the most popular WordPress theme in the world. It is complete, easy to use and comes with more than 62 free templates. [Recommended]

Would you like to display posts in a grid layout?

Most WordPress themes don't have grid layout settings. In this article, we'll show you how to display your WordPress posts in a grid on a WordPress theme without writing a single line of code.

If you have never installed WordPress, discover How to Install a WordPress Blog in 7 Steps et How to search, install and activate a WordPress theme on your blog 

But back to why we are here.

display posts in a grid layout

When do you need a grid layout in WordPress?

The traditional vertical post layout works well for most websites. However, this layout can take up a lot of space, especially if you want to display a large number of posts.

So, if you have a custom homepage on your WordPress website, you can use a grid layout especially to display your recent posts.

Discover by the way 10 WordPress plugins designed to display a gallery or portfolio

This layout will save you space, so that you can add even more elements to your homepage. The appearance also looks more aesthetic, as the images are highlighted much more.

post-grid-plugin-wordpress-display-grid

Many WordPress themes designed for magazine or photography websites already use the grid layout to display their posts. However, if you are using an incompatible WordPress theme, then you will need to create your own template. You will need to learn the languages ​​PHP, HTML, CSS, etc ...

See also our article on How to install WordPress locally on a PC / Windows with XAMPP

Let's see how you can display your WordPress posts in a grid on a WordPress theme without having to write code.

If you have never installed WordPress, discover How to Install a WordPress Blog in 7 Steps et How to search, install and activate a WordPress theme on your blog 

But back to why we are here.

View WordPress Publications in a layout in grid 

The first thing to do is to install and activate the plugin Post Grid. After activation, you must go to the page Post Grid »New Post Grid to create your publication grid. 

new wordpress grid

The page " post grid Is divided into different sections represented by tabs on the top row. You must first click on the " Query Post" page (in French).

Lire aussi How to manage email notifications on WordPress

Easily create your website with Elementor

Elementor allows you to easily create any website design with a professional look. Stop paying expensive for what you can do yourself. [Free]

Here you will define how you want the plugin to find the posts to display.

querypostsgrid

You can select the type of post you want to display. By default, it displays "post" (article), but you can choose the pages for example, at least select any custom publication type.

Then you need to click on the layout tab. This is where you can choose how you want your grid displayed.

GridLayout

You can then select the content of the layout. The plugin has choices such as "flat", "flat center", "flat right", etc ...

You can also click on the edit button to create your own layouts.

See also How to customize the form of comments on WordPress

You have 5 modes available, with interesting visual effects. Using the mouse, it is also possible to flip or rotate the image. 

Now you have to click on the tab " layout Settings". These settings should work on most websites. But if it happens that your grid does not fit your page, this is also where you can fix that.

gridlayoutsettings

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

Once you're done, just click the button "Publish". This will make your post grid available, and you can add it to any page you want.

Add a post grid to a WordPress page

On the publisher of the publications grid, you will see the tab « shortcodes" page (in French). Clicking on it displays a shortcode.

gridshortcode

Copy the shortcode, then edit the WordPress page where you want to display your post grid. Paste the shortcode inside the area where the grid should appear.

See also How to display photos in a WordPress grid

Are you looking for the best WordPress themes and plugins?

Download the best plugins and WordPress themes on Envato and easily create your website. Already more than 49.720.000 downloads. [EXCLUSIVE]

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

postgridpreview

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

Discover our 7 premium WordPress plugins to save your website / Blog

Now you will be able to display your posts in a grid on WordPress.

Discover also some themes and premium WordPress plugins  

You can use other WordPress plugins to give a modern look and optimize the grip of your blog or website.

We offer you here some premium WordPress plugins that will help you do that.

1. Driver

Chauffeur is a powerful premium WordPress limo reservation plugin for businesses of all sizes. It can be used by limousine and shuttle operators. 

Driver

With this plugin, you can easily make reservations for any defined route. It will help you improve customer service and manage your limo rental business on the internet.

It offers a simple, step-by-step reservation process with support for multiple payment gateways, notifications by e-mail and SMS, integration of the WooCommerce plugin, Google Calendar and an intuitive control panel.

As functionalities we will have among others: the possibility of creating, modifying or deleting reservation forms, the support of shortcodes, the specification of the types of service offered, the precision of the minimum and maximum rental time of the limousine, the specification of the reservation period, the precision of the time interval between reservations of the same vehicle, the physical geolocation of your company, the specification of the routes available in the reservation system, and much more

Download Demo | Web hosting

2. Security Ninja PRO

Security Ninja PRO is another premium WordPress plugin that will help you to perfectly improve the security of your website. It offers a plethora of options and features that will allow you to take control of every aspect of the security of your website.Security Ninja PRO wordpress plugins protect site against malware virus attacks

Its features are: more than 40 security tests available, a complete scan of your website in order to detect all vulnerabilities and security vulnerabilities, the integration of a malware scanner, safeguarding the activities of your website, planning different scans and much more

DownloadDemo | Web hosting

3. WooCommerce Category Discount

WooCommerce Category Discount is a premium WordPress plugin that allows you to manage discounts in your WooCommerce online store. While it's important to strategically create rules for discount offers, things get complicated when you have multiple products and want to offer discounts based on multiple parameters.Woocommerce Category Discount

This WordPress plugin offers well-defined solutions to help you define discount rules in your online stores. It offers great functionality that lets you decide when you want to make a discount. By default, this plugin provides the discount for the current purchase.

See also our 7 WordPress plugins to add a private messaging

However, you can also provide the discount to your customers for the following purchase, i.e .: If you're going to give your customer $ 20 off the current purchase, instead of providing the discount, give them a coupon that can be used for the next purchase.

Easily create your Online Store

Download free WooCommerce, the best e-commerce plugins to sell your physical and digital products on WordPress. [Recommended]

With this WordPress plugin, you can for example apply a discount on a category of your online store.

Download | Demo | Web hosting

Recommended Resources

Find out about other recommended resources to help you build and manage your website.

Conclusion

Here ! That's it, we hope this article has helped you display your WordPress posts in a grid layout. Do not hesitate to share with your friends on your favorite social networks

However, you will also be able to consult our resources, if you need more elements to carry out your projects of creation of Internet sites, by consulting our guide on the WordPress blog creation.

And if you have any suggestions or remarks, leave them in our section Comments.

... 

This article features 16 comments

  1. Hello,

    I am using Post Grid and would like to put my first post on one column and the following ones on two columns. Is it possible with this plugin? If not, do you know of a similar plugin that would allow this?

    Thank you in advance.
    Sincerely

  2. Hello, how do we integrate these photos to obtain the grid presentation with the title, the comment and the read more button. Thank you

      1. Hello, on this tutorial we can already see your images, what I did not understand is where and how we insert the images, the title and the read more. Thank you

        1. Hi,
          You don't need to add the images, because the images used are from your blog posts. All you have to do is configure the layout and use the shortcode.

  3. Hello,

    I can't figure out where I can embed this code. By going to the editor of my site (appearance tab), the code does not do its job ...

Leave a comment

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

This site uses Akismet to reduce unwanted. Learn more about how your comments data is used.

Back To Top
8 shares
Share7
tweet
Save1