A grid display of posts – that sounds cool…
I’ve reviewed WordPress blog layout plugins before and found them a little clunky.
They let you show a grid display of posts in WordPress.
Themes sometimes have this built-in, but often they don’t.
I’ve now discovered a new plugin to do the job and think it’s the best one I’ve seen to date.
You can display posts, WooCommerce products and other custom post types in up to 5 columns.
The WP Show Posts plugin
WP Show Posts is free from the WordPress plugin repository and currently has 8 five star ratings.
It’s well supported by developer Tom.
Once installed, you can create your own layouts by going to WP Show Posts > Add New.
When you have created a list, add it to a post or page using the button in the Editor. Select the list you want to insert the shortcode, save and you’re done!
Some examples of WP Show Posts in action
I used the GeneratePress theme from the same developer, installed WooCommerce and added some test data.
The default blog display looks like this. Note that these posts don’t have featured images. If they did, they would appear under the date and author.
Show posts in a single category
Using WP Show Posts, you can filter the posts to show posts only in one category – in this case, Post Formats.
Here are the key options I chose:
Note that you can only filter by one category or other taxonomy at a time. You can’t select more than one.
Show the most commented posts
I selected the 3 posts with the most comments. The comment count doesn’t display in the grid, so you’ll have to take my word for it that it works!
This includes the author, date and terms from the Meta section.
In the More query args section, I chose:
- Ignore sticky posts – checked.
- Order – Descending i.e. from most > least.
- Order by – Comment count.
Display one product line in a shop
The WooCommerce shop shows all product lines.
If I want to show only one type of product I can do it with WP Show Posts.
Here are the hoodies for sale.
This time under Posts, the options are:
- Post type: Product
- Taxonomy: product_cat
- Terms: hoodies
However, if I want to show the price on this page next to the product name or image, I can’t do it with the free plugin.
Ordering your own custom post types
Using Pods, I created a custom post type of Cheeses and associated it with a custom taxonomy, Countries.
Each cheese has:
- Title
- Content
- Featured image
- Cheese Type (custom field) – soft, semi-soft, semi-hard or hard
- Fat content (custom field) – a number representing grams of fat per 100g
- Country (custom taxonomy) – the country of origin.
I was able to create 3 lists and associated shortcodes to show the cheeses by type.
Post type was obviously cheese. Similarly to the previous examples, I chose the Taxonomy of countries.
Adding the country under the cheese name was done through Meta, with Include terms and Below title selected.
The More Query Args section is where most of the magic happened.
What do these options do?
Order and Orderby – Title, Ascending orders the cheeses in alphabetical order.
Status – Published. Only shows published posts. I recommend you stick with that!
Meta key and Meta value – Refers to my custom fields. I wanted Hard cheeses in this case, so that meant a meta key of cheese_type with meta value Hard.
I wanted to create a list of low fat cheeses, but soon found that the plugin couldn’t do that. You can search keys and values by exact matches, but you can’t do a greater or less than comparison.
So if I changed the sort and used a meta key of fat_content with value of <20, I got a “no posts found” message.
It would be the same for the store, showing products under £20, say.
What’s good about WP Show Posts?
- Simple to set up and use.
- Choose the number of columns you want – up to 5 – and the spacing between them.
- The grid display of posts is responsive (adapts to different devices)
- Choose your own image size and placement.
- Set your own excerpt size, or none at all.
- Set the “Read more” text (would be nice to have the option to add screen reader text here).
- Pick the order of display – often ordering by title makes more sense.
- Offset posts (i.e. leave out the number you pick) and ignore sticky posts.
- Don’t need any coding knowledge to do some more advanced queries.
- Can show your own taxonomy on the grid.
- Some filtering of custom fields.
- Includes pagination.
What’s not so good?
- Can’t select posts in multiple categories, tags or other taxonomies.
- Can’t show custom fields in the grid.
- No area to add your own CSS – the style is taken from the theme.
But wait, there’s more! WP Posts Pro
If the free plugin whets your appetite, you can do even more with WP Posts Pro.
The Pro version includes more ways to customize a grid display of posts:
- Lazy loading of posts and carousel display
- Choose posts between two dates
- Filter by multiple taxonomies and by custom fields
- Placeholder tags to set the display of posts to your liking
It costs $25 for a single site license.
Got a question or have something to say about this post? Leave a comment below.
I installed and never could figure out how it works
only I could put a shortcode and it will show up a list of title of my posts in1 category
no image, no exerp, nothing els
Nice review.
What CSS does it use to lay out the grid? Flexbox, grid, or dare I say float?
Hi Graham
To my untrained eye, it looks like a mixture of Flexbox and Bootstrap grid. 🙂
I installed it and it works fine except when making the browser window narrower the blog posts overlap. How can I correct this? I have tried adding the following code to the CSS for different media screens but it doesn’t seem to work:
.wp-show-posts-image img {
margin:0!important;
vertical-align:bottom;
height:auto;
width: 250px;
}
what am I doing wrong?
Actually I think I just solved it by changing the pixel width to 100%.