Using the Display Posts plugin with WordPress and custom CSS

In case this helps anybody else, wanted to share how I created the Top 100 Albums page here on Dissociated Press. I wanted to be able to automagically create a page from all posts tagged with the “100 albums” tag, rather than manually laying things out.

The final result is using the Display Posts plugin that lets you utilize a WordPress shortcode (“display-posts“) with some parameters to specify how the posts should be displayed and how many of them should be displayed.

Got a little lucky with this one, because the plugin has a limit of 100 posts and… I wanted 100 posts. Good thing I didn’t write 101 albums… (you could probably fudge something with more than 100 by using the shortcode twice and tweaking a few parameters.)

Using the Display Posts plugin

First step, install the Display Posts plugin. If you’re using WordPress.com to host your site, you’ll need to be on a plan that allows installing plugins. It’s not the only plugin that enables the display-posts shortcode, but it’s the one I chose to work with.

Next, decide what parameters you want to use to auto-generate the page. What I wanted was to display all 100 posts (even though I haven’t finished migrating all 100 quite yet), from 100 to 1, with the album cover (featured image) at a reasonable size (300×300 or medium size) with the post title.

After fidgeting with parameters a while, here’s what I landed on:

[display-posts order="ASC" tag="100-albums" posts_per_page="100" image_size="medium" wrapper="div" wrapper_class="display-posts-listing grid"]

That generates a grid like this:

(Except it displays 100, if available. I capped this at three.)

Almost there…

Well, it doesn’t quite generate a grid like that. You’ll also need to tweak the CSS for the site a bit to get it to look all nice and griddy. Go to Appearance and Edit CSS and add this to your additional CSS for your site:

/* Grid style */
.display-posts-listing.grid {
	display: grid;
	grid-gap: 16px;
}

.display-posts-listing.grid .title {
	display: block;
}

.display-posts-listing.grid img { 
	display: block; 
	max-width: 100%; 
	height: auto; 
}

@media (min-width: 600px) {
	.display-posts-listing.grid {
		grid-template-columns: repeat( 2, 1fr );
	}
}

@media (min-width: 1024px) {
	.display-posts-listing.grid {
		grid-template-columns: repeat( 3, 1fr );
	}
}

Save that, and then the shortcode I listed previously should generate a handy grid of posts in ascending (ASC) order.

And this is why I love WordPress

My goal when I refactored the site (once again) using WordPress was to focus more on writing than fiddling. I mean, yes, this was a tiny bit fiddly, but I could have spent quite a bit of time trying to code this up myself. Especially since coding isn’t my thing.

Instead, a few “off-the-shelf” open source bits and I’m in business.

Editor, writer, communications expert, former community manager, open source enthusiast, music nut, and cat guy. Not necessarily in that order.

Leave a Reply