Introduction to Display Posts Shortcode
Display Posts Shortcode is a plugin for dynamically listing content on your site without any code.
To display a list of your recent blog posts, simply add this where you’d like them to appear: [display-posts]
Query Options
You can modify your query by passing parameters to the shortcode. For instance:
- Limit to posts in the “business” category:
[display-posts category="business"] - Limit to posts by the author “bill”:
[display-posts author="bill"] - Show the subpages of the current page:
[display-posts post_type="page" post_parent="current"] - Display posts with the highest comment count:
[display-posts orderby="comment_count"]
Here’s a list of the available parameters. You can also review the WP Query Codex page for more information how each parameter works and what values you can provide.
Display Options
By default, the results display as a bulleted list of post titles. Many of the shortcode parameters can alter the display of the results.
category_display="true"will include a list of the post’s categories.image_size="true"will include the post’s thumbnail if it has one.include_author="true"will include the post’s author.include_excerpt="true"will include the post excerpt.include_content="true"will include the full post content.include_date="true"will include the post date.wrapper="ol"lets you change the output to a bulleted list. You can also specify “div” as the wrapper type.
Styling Options
Display Posts Shortcode does not come pre-styled. It inherits the default styling from your theme. Depending on what items you include in your listing, you may want to add some CSS to adjust their styling.
You can target the wrapper element (whether it’s a ul, ol, or div) using .display-posts-listing. As a simple example, we’ll remove the bullets and left-align the thumbnail image.
.display-posts-listing .listing-item {
clear: both;
list-style-type: none;
}
.display-posts-listing img {
float: left;
margin: 0 16px 16px 0;
}You can also change the CSS class on the wrapper element using wrapper_class="my-custom-class". You could use this to have multiple styles of post listings.
Using Template Parts
If you’d like more advanced display options, you should use template parts. These are small files located inside your theme that control what is displayed for each post.
On my client projects, we’ll typically provide one or more “layouts” for Display Posts Shortcode that match the overall styling of the site. Instead of a simple bulleted list of recent posts, you can use the same styling from your blog archive page.
For instance, on Lil Luna all the post listings you see on the homepage are built using Display Posts Shortcode. For more information, see my article on Template Parts with Display Posts Shortcode.
Customization with Filters
Almost everything in the plugin can be customized with a filter. Here’s the available filters along with examples for each.
The output filter is the most commonly used. It allows you to modify what is output by the shortcode. While the template parts example above completely replaces the output, the output filter lets you strategically modify existing or insert new elements into the standard shortcode output.
For instance, if you wanted to display the post title before the featured image, you can re-arrange the post elements like so:
You can also use the filters to create shortcut arguments. For instance, lets say you’re often listing products in a specific product category: [display-posts post_type="products" taxonomy="product-industry" tax_term="agriculture"]
You could simplify this by creating your own “industry” parameter: [display-posts industry="agriculture"]
Here’s an article on Creating Shortcut Arguments for Display Posts Shortcode.