Displaying your posts neatly in grid layout will improve the readability of the content and thus the site performance. Your visitors can navigate easily through information. In this article, we’ll learn how to display posts in a grid layout in the home page of a WordPress website.
3 simple steps to display posts in grid layout.
- Install a Post grid plugin.
- Set up a Static Homepage
- Copy the shortcode and paste it in your home page
Note: You can use same method to create grid layout in any other part of your website. Install post grid plugin add the shortcode to WordPress theme template.
Install Post Grid Plugin
From your wordpress Dashboard go to Plugins » Add New . Enter the keyword ‘Post grid’ in search field. There are plenty of WordPress plugins for creating grid layouts. 3 wordpress grid plugins are listed below. Install and activate a plugin.
1: Post grid
Upon activation, you will see a new menu item on left menu. Visit Post Grid » New Post Grid page to create your post grid. Enter a title for your grid. Below the title, you can see plenty of options. Click on each option,
- Query posts: You can display post in specific categories, exclude posts by post ids, change post order by meta field value etc.
- Skin & Layout: You can decide number of columns in the grid,
- Layout Settings: You can customize grid item layout settings like width, height, background color and more.
- Search : Add a search box above post grid so that users can display post grid based on keyword search
- Pagination: Edit pagination style
Once you are done, simply click on the publish button. This will make your post grid available. Click on the shortcode link to get shortcode.
Copy the shortcode and paste it to the WordPress page where you want to display your post grid.
2: The Post Grid
Upon activation, you will see a menu item ‘The Post Grid’ on your left menu. Click on The Post Grid » Add New Grid page to create your post grid.
Step 1) Enter the title
Step 2) Go through tabs Post Source, Layout Settings, Field Selection , Style and edit settings.
- Display posts by any Taxonomy like category(s), tag(s), author(s), keyword(s)
- Order by Id, Title, Created date, Modified date and Menu order.
- Display image size (thumbnail, medium, large, full)
- From the 4 different layouts select which layout you want then Select Number of Columns & pagination
- Set Primay color and Button Color.
- You can preview the Layout
Step 3) Once you are done, simply click on the publish button.
Step 4) Get short code on the green bar(refer above image). Copy the shortcode and paste it in the WordPress page where you want to display your post grid.
3: Content Views
Upon activation, you will see a new menu item ‘Content Views’ in the left menu. Click on Content Views » Add New page to create your post grid.
Step 1: Enter title
Step 2: Click on Filter settings tab & Display settings tab . Edit settings.
- Filter any posts you want to show (with many possible options: ID, category, tag, author, keyword, status).
- Click on Display settings tab. Select beautiful grid or list layout to display your posts. You can customize the layout in your own way with many useful settings.
Step 3: Click on Preview button. Once you are satisfied, simply click on the Save button
Step 4: Upon saving, you will see shortcode in the page.
Copy the generated shortcode and paste it to anywhere you want to display your grid of posts.
Set up a Static Homepage
By default WordPress blog homepage shows your latest posts. You can add grid layout in your home page by editing your theme file(home.php or index.php). But much easier way is by setting up a static home page and add shortcode in that page.
Get Shortcode
If you haven’t already copied shortcode, get it by going to plugin’s menu item.
Add shortcode to the page
Go to Pages » All Pages . Find your page. Click on Edit.
Paste short code in content area and Publish/Save page. Preview your page to see the shortcode in action.
