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 600.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 view your WordPress posts in a grid layout?

Most WordPress themes do not have grid layout settings. In this article, we will show you how to display your WordPress Grid publications 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.

postgridlayoutexample

When do you need a grid layout on WordPress?

The traditional vertical layout of publications 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 publications.

So, if you have a custom homepage on your WordPress website, you can use a grid layout 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 you can add more items to your homepage. The appearance also looks more aesthetic because the images are much more prominent.

Many WordPress themes designed for magazine or photography websites already use the grid layout to display their publications. However, if you use a non-compatible WordPress theme, you will need to create your own template. This will require you 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.

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

Lire aussi How to manage email notifications on WordPress

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]

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

querypostsgrid

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

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

GridLayout

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

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

See also How to customize the form of comments on WordPress

You have available 5 modes, 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 is not adapted to your page, it is also here that you can solve this problem.

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 publication grid available, and you can add it to the page you want.

Add a publication grid to a WordPress page

On the publisher of the publication grid, you will see the tab « shortcodes". Clicking on it displays a shortcode.

gridshortcode

Copy the shortcode and edit the WordPress page where you want to display your publication grid. Paste the shortcode inside the area where the grid should appear.

See also How to display photos in a WordPress grid

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

postgridpreview

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]

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

From now on, you will be able to post your articles 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 WordPress limo booking plugin for businesses of all sizes. It can be used by limo and shuttle operators.

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, the integration of the WooCommerce plugin, Google Calendar and an intuitive control panel.

Features include: the ability to create, edit or delete booking forms, support for shortcodes, specification of the types of service offered, the accuracy of the minimum and maximum rental time of the limousine, the specification of the booking period, the accuracy of the time interval between the bookings of the same vehicle, the physical geolocation of your company, the specification of available routes in the booking 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.

Its features are: more 40 security tests available, the 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

Download | Demo | Web hosting

3. WooCommerce Category Discount

WooCommerce Category Discount is a 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 several parameters.

This WordPress plugin offers well-defined solutions to help you define discount rules in your online stores. It offers an excellent feature 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 next purchase, ie: If you are going to give 20 $ of discount to your customer for the current purchase, instead of providing the discount, give him 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. [FREE]

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

Download | Demo | Web hosting

Recommended Resources

Discover other recommended resources that will accompany you in creating and managing your website.

Conclusion

That is all ! We hope this article has helped you to 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 and.

...

This article features 14 comments
  1. Hello,

    I use Post Grid and I would like to put my first article on a column then the following on two columns. Is it possible with this plugin? If no, do you know of a similar plugin that would allow it?

    Thank you in advance.
    Sincerely

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

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

        1. Hi,
          You do not need to add the images because the images used are those of the articles in your blog. All you have to do is configure the layout and use the shortcode.

  3. Hello,

    I can not understand where I can integrate this code. By going to the editor of my site (tab appearance), the code does not do its work ...

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
9 shares
Share7
tweet1
Save1