Use template parts to match your theme’s styling

Display Posts lets you easily display posts based on any criteria you choose without any coding.

It can be difficult to match your theme’s design for post summaries using just the shortcode and CSS. That’s where template parts come in.

Styling belongs in a theme

Your theme already contains the markup and styling for displaying posts. By leveraging it, the shortcode output can match the styling of your site.

A few years from now when you redesign your site, your shortcodes will automatically use the new post styles defined in that theme.

Markup in Template Partials

I use template partials for post layouts in my themes. Here’s the partials directory in my starter theme.

I use archive.php as the base layout for a post summary. It’s used on archive pages, and often elsewhere like a related posts section after a single post.

For areas that require a different output, I create a separate partial. In one theme we displayed featured posts in a rotator, so I created archive-featured.php:

I use the same approach when it comes to styling Display Posts. I might have two post layouts: large and small. I’ll create dps-large.php and dps-small.php to hold the markup. If the large layout matches the archive layout, you can simply include one into the other:

The small layout uses slightly different markup:

I use the “dps” prefix to indicate that these are for Display Posts Shortcode, and to limit which partials can be used by the shortcode.

Specify a layout in the shortcode

I add a “layout” custom parameter to specify which post layout should be used.

[display-posts layout="large"]

This code snippet goes in a core functionality plugin or Code Snippets.

The partials are only used if a layout is specified in the shortcode, and a matching partial is found. This lets you keep using the plugin in other contexts as well, like a bulleted list of recent posts.

This also saves me from building custom widgets for Recent Posts. We simply add a text widget containing the shortcode and it matches the site:

Filters used:
display_posts_shortcode_output