These days when it comes to WordPress themes, then they come with tons of options to customize the theme. Some themes come with an option to switch to grid layout from list layout, but many themes do not have such an option. The good thing is that since you are using WordPress, there’s a plugin that you can use to display WordPress posts in a grid layout. In this WordPress tutorial, you will learn how to display posts in grid layout using a plugin and that too without touching the coding of the theme.
Why use a Grid layout?
There can be many reasons behind using a grid layout for your WordPress website. Normally, or say traditionally, websites have a list layout (or vertical layout) and it has worked well for many, but if you want to do something different or want to stand out, then displaying posts in a grid layout is a good idea.
This type of layout can be used if you are using a custom homepage and want to display your latest posts in a grid layout. The layout looks great, clean and visually more appealing because of the beautiful use of featured images as you can see in the above screenshot.
Such grid layout is mostly seen in portfolio, magazine, photography and Pinterest like themes. For themes that doesn’t offer the functionality of adding such a grid layout, then custom coding is needed or you can go the easy route of doing this by using a plugin.
So without any further talk, here’s how you can have a grid based layout to display posts in WordPress, without touching the code.
How to display WordPress Posts in a Grid Layout
For the purpose of this tutorial, you will need to use a plugin named as Post Grid. This is a free plugin, plus the grid layout is responsive which means it is suitable on mobile devices also. Install and activate this plugin and then you will be able to see a new menu for “Post Grid” in your WordPress Dashboard.
Go to “Post Grid” and click on “New Post Grid” to create a new post grid.
Now, you will notice that this page has various tabs. First go to the “Query Post” tab where you can select what content do you want to display in the grid. Normally you would select “Post” from the list, but you can also select other content type. There are also options to exclude a post, or how many posts to display per page.
Next click on the “Layout” tab. From here, you can choose a layout for your grid such as flat, flat center, flat right or flat left, and then you can also select skin. Skin basically means the effect that will happen when the mouse is hovered on the thumbnail. You will be able to see a live preview of the effect right on this page.
Next, click on the “Layout Settings” tab. The settings here should work on most sites but if you are facing some problem in the layout, then this is where you can fix it. You can select grid item width, media height, featured image size, etc options.
From the “Navigation” tab, you can select your pagination style from Lite or Dark. Once you are done with all the settings, now it’s time to hit the Publish button.
Displaying posts in Grid layout
This final step is very simple. You just need to go to the “Shortcodes” tab and copy the shortcode from there.
Once copied, paste it on a new WordPress page where you want to display your posts in a grid layout. Finally click on the Publish/Update button and then visit the same page to see your posts in grid layout.
There is also an option to get the PHP code which you can add in the theme file directly, but getting the shortcode and adding it to a page or a post where you want to display the grid layout is an easy idea.
Alternative: Another useful plugin to display posts in a grid layout is Content Views. This plugin can display posts in various criteria like by category, tag, author and keyword in a responsive grid layout.
If you like this tutorial, then please follow us on Twitter, Facebook and Google+.