Introduction to Display Posts Shortcode

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.

Lil Luna using template parts

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:

<?php
/**
* Display Posts Shortcode - Move image after title
* @see https://www.billerickson.net/code/using-display-posts-shortcode-output-filter
*
*/
function be_dps_move_image_after_title( $output, $original_atts, $image, $title, $date, $excerpt, $inner_wrapper, $content, $class, $author, $category_display_text ) {
$output = '<' . $inner_wrapper . ' class="' . implode( ' ', $class ) . '">' . $title . $image . $date . $author . $category_display_text . $excerpt . $content . '</' . $inner_wrapper . '>';
return $output;
}
add_filter( 'display_posts_shortcode_output', 'be_dps_move_image_after_title', 10, 11 );
view raw functions.php hosted with ❤ by GitHub

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.

Subscribe now
Receive new meetup summaries by email.

Leave a Reply

Your email address will not be published.