Content is King, user experience is Queen, and displaying your WordPress blog posts in a grid layout is certainly key to elevate your blog to that status. This article will show you how to do that in minutes, without any coding knowledge.
An overview of what we’re going to do:
- Install a plugin that display grid layout for any content type.
- Set up a grid layout view the way you like in the plugin settings, then copy the shortcode for that view.
- Create a new page and paste the shortcode from the above plugin into this page.
- Set up this page as what will display your blog posts.
Step 1: Install a plugin that displays grid layout for your blog posts
There are many free plugins that can do this, but the one I’m using, and loving is ContentViews. Click on this link and download the plugin in a zipped file, then go to your WordPress dashboard to install and activate it.
Step 2: Set up a grid layout view for your blog posts
In your WordPress dashboard, you will see that Content Views has been added to the left column. Hover over the name and select Add New.
Give this view as recognizable name. I named it Display my blog post in grid.
In the Filter Settings, select Post as your Content type. If you’re not sure, just leave the other settings as they are.
In the Display Settings, set up the grid layout anyway you like. Most of the settings here are self-explanatory, but please note that:
- You can wrap a post content around a thumbnail, but only if there’s enough horizontal space. If not, you need to reduce the number of items per row, or the size of the thumbnail.
- Under the Title section, select the HTML tag to specify the styling of the title of each blog post. I chose h3 because h1 and h2 settings for my site are too big.
- You can automatically generate an excerpt for each blog post from a certain number of words. If you use this option, there will be a Read More button under each blog post and you can style that button using CSS.
- You can enable Pagination, which will split for Posts pages into multiple pages for easier navigation. Otherwise, this page will load indefinitely as the users scroll down. until it runs out of blog posts.
- You can click on the Preview tab to preview the changes on the fly, which is such a cool feature.
Once you’re done, please click on the Save button to save this grid layout view.
Step 3: Copy and paste shortcode for the new grid layout view in a new page
After saving the above view, you will see a shortcode for it. Shortcode is simply a shortcut that lets you do cool things in a single line without lots of nauseating codes.
Copy this shortcode. From your dashboard, add new page and paste this shortcode into it. Give the page a descriptive name about your blog archives, such as List of my awesome tutorials to help you design like a pro.
Save this new page.
Step 4: Add the Posts Page to your navigation menu
From the dashboard menu, go to Appearance > Menus.
Find the page containing the grid layout shortcode you’ve created, and add it to your navigation menu.
The label in the navigation menu doesn’t have to be the same as the title of the page. You can change the label’s name so that your web visitors know exactly what they’re getting.
The final result will look like below: