• Skip to content
  • Skip to footer
A Bright Clear Web

A Bright Clear Web

A Bright Clear Web - Simple, effective, accessible websites

  • Home
  • About
  • Websites
  • Writing
  • Learn
  • Blog
  • Contact
You are here: Home / WordPress / Want a simple & powerful way to show a grid display of posts?

Want a simple & powerful way to show a grid display of posts?

Posted: August 12, 2016 Updated: January 4, 2018 by Claire Brotherton
5 Comments

Cheeses shown by type - soft, semi-soft or hard

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!

WP Show Posts insert button & shortcode

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.

GeneratePress blog posts

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.

2 column grid layout of blog posts

Here are the key options I chose:

WP Show Posts - category filter

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!

3 column grid of the three posts with most comments

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.

WooCommerce shop with products

If I want to show only one type of product I can do it with WP Show Posts.

Here are the hoodies for sale.

Hoodies in WooCommerce shop, 3 columns

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.

Cheeses shown by type - soft, semi-soft or hard

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.

WP Show Types - More query args

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.

Related

Category: WordPress Tags: blog, custom post type, plugin

About Claire Brotherton

Freelance web designer and front end developer based in Edinburgh, Scotland. I love WordPress, code, learning and blogging.

Reader Interactions

Comments

  1. shu says

    May 18, 2017 at 7:15 pm

    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

    Reply
  2. Graham Armfield says

    June 7, 2017 at 6:10 am

    Nice review.

    What CSS does it use to lay out the grid? Flexbox, grid, or dare I say float?

    Reply
    • Claire Brotherton says

      June 20, 2017 at 10:07 pm

      Hi Graham

      To my untrained eye, it looks like a mixture of Flexbox and Bootstrap grid. 🙂

      Reply
  3. Dan Snyder says

    December 22, 2019 at 3:51 pm

    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?

    Reply
    • Dan Snyder says

      December 22, 2019 at 4:10 pm

      Actually I think I just solved it by changing the pixel width to 100%.

      Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Subscribe to Blog via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email. Read my privacy policy.

potted cactus and laptop with code

Footer

Categories

  • Accessibility
  • Blogging & Content Marketing
  • Business
  • Personal
  • Software & Tech
  • Websites
  • WordPress

Top Posts

  • How To Create WordPress Excerpts And Include Links In Them
  • How To Solve WordPress Image Alignment And Text-Wrap Problems
  • Improve Your Divi Website's Reach With Divi Accessibility
  • How To Set Up And Customize Twenty Nineteen Theme
  • Registering a Domain Name with GoDaddy - Step by Step

Let’s Be Social

  • E-mail
  • Facebook
  • LinkedIn
  • Twitter
Copyright © 2014 -2025 A Bright Clear Web
  • Privacy and cookies policy
  • Site map