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.
- 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. - Go to the post or page where you want to add
[display-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"]
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"]
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).