Template Parts with Display Posts Shortcode

Display Posts Shortcode lets you easily display posts based on any criteria you choose without any coding. Here’s the list of available parameters.

It includes some display options, but it’s unstyled so you’ll need to write CSS to make it look good. It’s difficult to match your theme’s layout for post summaries using just the shortcode and CSS.

Different styles of post summaries used by this theme

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.

<?php
/**
* Archive partial
*
* @package StudyFinds2018
* @author Bill Erickson
* @since 1.0.0
* @license GPL-2.0+
**/
echo '<article class="post-summary">';
echo '<a class="entry-image-link" href="' . get_permalink() . '">' . wp_get_attachment_image( ea_entry_image_id(), 'ea_archive' ) . '</a>';
$term = ea_first_term();
$category = '<a class="entry-category-link" href="' . get_term_link( $term, 'category' ) . '">' . $term->name . '</a>';
echo '<div class="entry-info">' . $category . ea_archive_sharing() . '</div>';
echo '<h2 class="entry-title"><a href="' . get_permalink() . '">' . get_the_title() . '</a></h2>';
echo '</article>';
view raw archive.php hosted with ❤ by GitHub

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

view raw archive-featured.php hosted with ❤ by GitHub

I use the same approach when it comes to styling Display Posts Shortcode. 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:

<?php
/**
* "Large" layout for Display Posts Shortcode
*
* @package StudyFinds2018
* @author Bill Erickson
* @since 1.0.0
* @license GPL-2.0+
**/
require get_template_directory() . '/partials/archive.php';
view raw dps-large.php hosted with ❤ by GitHub

The small layout uses slightly different markup:

<?php
/**
* "Small" layout for Display Posts Shortcode
*
* @package StudyFinds2018
* @author Bill Erickson
* @since 1.0.0
* @license GPL-2.0+
**/
echo '<article class="post-summary small">';
echo '<a class="entry-image-link" href="' . get_permalink() . '">' . wp_get_attachment_image( ea_entry_image_id(), 'ea_archive' ) . '</a>';
echo '<h2 class="entry-title"><a href="' . get_permalink() . '">' . get_the_title() . '</a></h2>';
echo '</article>';
view raw dps-small.php hosted with ❤ by GitHub

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” parameter to specify which post layout should be used.

[display-posts layout="large"]

This is a custom parameter, so add the following to your theme’s functions.php file to make it functional:

<?php
/**
* Template Parts with Display Posts Shortcode
* @author Bill Erickson
* @see https://www.billerickson.net/template-parts-with-display-posts-shortcode
*
* @param string $output, current output of post
* @param array $original_atts, original attributes passed to shortcode
* @return string $output
*/
function be_dps_template_part( $output, $original_atts ) {
// Return early if our "layout" attribute is not specified
if( empty( $original_atts['layout'] ) )
return $output;
ob_start();
get_template_part( 'partials/dps', $original_atts['layout'] );
$new_output = ob_get_clean();
if( !empty( $new_output ) )
$output = $new_output;
return $output;
}
add_action( 'display_posts_shortcode_output', 'be_dps_template_part', 10, 2 );
view raw functions.php hosted with ❤ by GitHub

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 Related / Recent Posts widgets. We simply add a text widget containing the shortcode and it matches the site:

Display popular content

If you’re using Shared Counts for social sharing, you can display a list of your most shared content with:

[display-posts layout="small" orderby="meta_value_num" meta_key="shared_counts_total"]

You can even get fancy and display the 5 most shared posts published in the last 6 months in the same category as the current post:

[display-posts layout="small" posts_per_page="5" orderby="meta_value_num" meta_key="shared_counts_total" taxonomy="category" tax_term="current" date_query_after="6 months ago"]

Find yourself writing the same long shortcode over and over? Create a shortcut argument, then use something like

[display-posts show_popular="true"]

For more examples of customizing this plugin, see my Display Posts Shortcode code snippets.

Bill Erickson

Bill Erickson is a freelance WordPress developer and a contributing developer to the Genesis framework. For the past 14 years he has worked with attorneys, publishers, corporations, and non-profits, building custom websites tailored to their needs and goals.

Ready to upgrade your website?

I build custom WordPress websites that look great and are easy to manage.

Let's Talk

Reader Interactions

Comments

  1. Where should i place all these snippets? In a child theme ?

    Can i acces advanced custom fields data?

    Thanks in advance!!!

    • The last snippet (featuring the be_dps_template_part() function) can be placed in your theme’s functions.php file or a core functionality plugin.

      The template partials themselves can go anywhere in your theme you like, but the code above assumes they are in: wp-content/themes/[your theme]/partials/dps-[something].php

      For instance, the small partial above would be /partials/dps-small.php.

      Yes, you can use advanced custom fields data in there. Either access the data using ACF functions ( get_field() ) or using WP core functions ( get_post_meta() ).

Leave A Reply