The Best Recent Post Widget: Display Posts, by Bill Erickson

Search no more! “Display Posts”, a plugin by Bill Erickson, allows you to display recent posts in widgets and to customize them in almost every single way you want.

To get Toolkit Updates, make sure you’re subscribed by e-mail (Toolkits pages are static and they are not shared through Jetpack / WordPress)

With this amazing plugin you can, for instance:

  • display recent post of one specific category
  • display them as a grid
  • display the category next to the title
  • show thumbnails!

Check out the full documentation and read carefully its Parameters to see all you can do.

Here’s a quick guide on how to install it and customize it with CSS.

How to Install “Display Posts by Bill Erickson”

Go to your WP Dashboard > Plugins > Add New. In “Keyword” search box, write “Display Posts”. Click on Install, and that would be all.

Note: Even though it hasn’t been updated for a year, it works perfectly.

How to Add a Recent Posts Widget

To use this plugin, all we need is a “Text Widget” and using Bill’s shortcodes.

Head over to Appearance > Widgets, and drag a “Text Widget” to your sidebar, and then:

  1. Name your widget (for instance: “Recent Posts”)
  2. Write down your Shortcode using the parameters (mentioned above)
  3. Save it and click on done.

Now, let’s see some examples 😃

Display all posts with: title, date and category

Here’s how my widget looks on my footer up to this date:

To achieve it, I used the following Shortcode:

[display-posts category_display="true" category_label="In " posts_per_page="5" include_date="true" date_format="F j, Y" wrapper="ul"]

However, it won’t look like that without some CSS. Here’s what I did in the snippets:

  1. I removed the bullets and the margin (I tried using the div wrap in the shortcode, but it didn’t look good; so, I did this instead)
  2. I displayed the category links and dates as blocks, to have them in separate lines
  3. I added the default font of the Twenty Twenty Theme to: the span elements and the widget if we put it on the footer
  4. I changed the color of the title links and made them bold
  5. I set a new size of font for the title that won’t be applied on the footer
  6. I changed the color of the date and the category label; and then, also the color of the category link
  7. I resized the font of the date, category label and category link
  8. I made the category label and category link look italic
/* -------------------------------------------------------------------------- */

/*	Widget Display Posts by Eric
/* -------------------------------------------------------------------------- */
.display-posts-listing {
	list-style:none;
	margin-left:0;
}

.display-posts-listing .category-display,
.display-posts-listing .date {
	display:block;
}

.display-posts-listing span,
.footer-widgets .display-posts-listing {
		font-family:"Inter var", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, sans-serif;
}

.display-posts-listing .title {
	color:#333;
	font-weight:700;
}

.display-posts-listing .title:not(.footer-widgets .display-posts-listing .title) {
	font-size:1.5rem;
}

.display-posts-listing .date,
.display-posts-listing .category-display-label {
	color:#888;
}

.display-posts-listing .category-display a {
	color:#555;
}

.display-posts-listing .date,
.display-posts-listing .category-display-label,
.display-posts-listing .category-display
{
	font-size:1.5rem;
}

.display-posts-listing .category-display,
.display-posts-listing .category-display-label {
	font-style:italic;
}

I’ll add another example asap. Stay tune!

Follow Laly on WordPress.com