Skip to content

Instantly share code, notes, and snippets.

@jessestu
Last active November 4, 2019 17:15
Show Gist options
  • Save jessestu/4f1f84e53394e8da764a3d8d77a51eee to your computer and use it in GitHub Desktop.
Save jessestu/4f1f84e53394e8da764a3d8d77a51eee to your computer and use it in GitHub Desktop.
This code generates and styles the [display-posts] shortcode for WordPress.com.

This guide builds off the official WordPress.com guide here: https://en.support.wordpress.com/display-posts-shortcode/


Display posts is a powerful way to customize a list of posts that meet a number of specific requirements, such as showing pages from within a specific category.

The bad part is that the shortcode generates HTML that looks plain without any extra styling. We can add the custom styling to make it look better using the steps in this guide.

How to add the CSS and the shortcode

  1. Go to My Site → Design → Customize → CSS, and copy and paste the CSS code that's in the style-for-display-posts.css document on this page. This will add a design to the posts or pages the shortcode adds to your page.
  2. Go to the post or page where you want to add [display-posts].

Display your latest posts

This example shortcode generates additional content than the basic [display-posts] shortcode generates. Try this one to show your latest posts along with a medium-sized featured image, the date, and the excerpt:

[display-posts image_size="medium" date_format="F j, Y" include_excerpt="true" posts_per_page="5" include_date="true" wrapper="div" order="ASC"]

Display child pages on any parent page

This example shortcode will list any pages set to the child page setting when you use the shortcode on the parent page. It also includes a medium-sized featured image thumbnail.

[display-posts post_type="page" post_parent="current" image_size="medium" wrapper="div"]

Display a specific category of posts

With this example, you will see a styled version of the shortcode with only one category of posts showing. Customize which category of posts show up by changing the category slug to something other than category="books" below. You can find the slug for any of your categoryies with these instructions under the section "Categories & Slugs".

[display-posts category="books" image_size="medium" date_format="F j, Y" include_excerpt="true" posts_per_page="5" include_date="true" wrapper="div" order="ASC"]

Find more examples for [display-posts] shortcode at our support document page (link loads another page).

/* This CSS styles the [display-posts] shortcode. See the original at https://gist.github.com/4f1f84e53394e8da764a3d8d77a51eee / jsw */
.display-posts-listing {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
align-content: flex-start;
}
.display-posts-listing > div {
margin: 1rem auto;
width: 100%;
max-width: 300px;
padding: 1em;
text-align: center;
background: rgba(255,255,255,0.5);
border-radius: 3px;
box-shadow: 1px 2px 10px rgba(0,0,0,.5);
display: flex;
flex-direction: column;
align-items: center;
}
/* styles image */
.display-posts-listing .listing-item a {
float: none;
margin: 0 auto;
display: block;
width: 100%;
}
.display-posts-listing .listing-item a.image {
border-bottom: none;
}
.display-posts-listing .listing-item a.image:hover {
border-bottom: none;
}
/* styles title */
.display-posts-listing .title {
font-size: larger;
line-height: 4rem;
background-color: #f1f1f1;
}
/* styles date */
.display-posts-listing .date {
font-size: smaller;
}
/* styles excerpt */
.display-posts-listing .excerpt {
text-align: justify;
text-justify: inter-character;
}
.display-posts-listing .excerpt .read-more {
padding: 1.5rem;
text-align: center;
}
.display-posts-listing .excerpt-dash {
visibility: hidden;
}
/* ##########
End [display-posts] CSS.
############# */
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment