The Display Posts Shortcode allows users to easily display listings of posts.

Add the shortcode in a post or page, and use the arguments to select based on tag, category, post type, and many other possibilities.

There are also some extra options to display something more than just the title: include_date, include_excerpt, and image_size.

You can also display the list in a Text Widget. See Embed Codes in widgets for details and examples.

For example [display-posts category ="news" ] will give you this:

• Glow Blogs Update 27 Jan 2021
• Yoko Theme menus on mobile
• Glow Blogs Start of Session FAQ
• Glow Blogs Updated 18 Aug 2020
• Glow Blogs for Contingency and Continuity
• Getting Help with Glow Blogs
• Glow Blogs Theme Retirement
• Glow Blogs Theme Retirement
• Jetpack sharing IE 11 Bug
• Creating a School Website Videos

The display-posts-shortcode Wiki on GitHub gives more details.

---

[display-posts post_type="page" post_parent="743"]

Will show pages whose parent has the id of 743

• Draw Attention Pro
• WP-PostRatings
• Google analytics data
• Google Language Translator
• Events Organiser
• Google Calendar Embed
• Display Posts Shortcode
• Search Attachments Plugin
• Syndication Plugin
• Jetpack Plugin

 

An way to find out the id of a page: In the Post or pages list, hover over the post title and the id is in the link shown in your status bar:

---

Here we include an excerpt and the date and limit the number of posts to three.

[display-posts category ="releases" include_excerpt="true" include_date="true" posts_per_page="3"]

• Glow Blogs Update 27 Jan 2021 (1/27/2021) - Glow Blogs has a small update yesterday at 4pm There are two new Plugins. Mega Menus Max Mega Menu – WordPress Mega Menu Plugin  This is a really powerful menu plugin, it will give more responsive and accessible menus. It also fixes the problem with the Yoko theme’s menus on mobile. WP Accessibility This plug-in … Continue reading Glow Blogs Update 27 Jan 2021 →
• Glow Blogs Updated 18 Aug 2020 (8/18/2020) - Glow Blogs had an update today. There are several changes mostly with the Jetpack plugin. This has been updated and brings a few new useful features. There is a new module Copy Post, this adds the ability to start a new post based on existing posts. This adds a link to the posts and page … Continue reading Glow Blogs Updated 18 Aug 2020 →
• Glow Blogs Update (3/16/2018) - Glow Blogs had a small update this week: WordPress – 4.9.2 > 4.9.4 event-organiser plugin – 3.6.2 > 3.6.3 google-language-translator plugin – 5.0.33 > 5.0.43 wordpress-importer plugin  – 0.6.3 > 0.6.4 These were small maintenance and bug fixes. They should not affect the majority of Glow users.

---

And here we don’t have a list but put each post in a div.

[display-posts category="issues-news-2" include_excerpt="true" wrapper="div" posts_per_page="3"]

---

We can use some custom css, this is added via the Jetpack Custom CSS module.

[display-posts category="issues-news-2" include_excerpt="true" wrapper="div" posts_per_page="3" wrapper_class="examplecss"]

 

---

 

.page-id-388 .site-content .entry-header,
         .page-id-388 .site-content .entry-content,
         .page-id-388 .site-content .entry-summary,
         .page-id-388 .site-content .entry-meta,
         .page-id-388 .page-content {
    margin: 0 auto;
    max-width: 800px;
}

/* for display posts shortcode page */
.page-id-1403 .examplecss .listing-item {
    width: 30%;
    float: left;
    padding: 3px;
}

.page-id-1403 .examplecss a.title {
    display: block;
    width: 100%;
    font-weight: bold;
    text-decoration: none;
    background: lightyellow;
    border: solid 1px #ccc;
}

.page-id-1403 .examplecss .excerpt-dash {
    display: none;
}

---

If your posts use featured images you can use them too. Here is an screenshot example from the Blogging Bootcamp #2 blog.

 

This uses:

[display-posts category="announcement" wrapper="div" wrapper_class="ann-grid-layout" image_size="thumbnail" order="ASC"]

And this CSS:

.page-id-632 div.listing-item {
    float: left;
    width: 150px;
    margin: 3px;
    border: solid 1px #eee;
    padding: 3px;
}

.page-id-632 .ann-grid-layout {
    width: 500px;
}