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

If you are using the Block Editor the Query Loop Block will do much of this, in a more visual way.

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:

• Additional CSS Issue
• Jet Pack Settings Issue
• Glow Blogs October 2024 Update
• H5P Issue Some content types cannot be installed
• Glow Blogs Tutorial: Class Site
• Widgets in New Site Issue & Workarounds
• Glow Blogs Update 14 Aug 2024
• Glow Blogs Start of Session FAQ 2024
• Glow Blogs Webinar
• Glow Blogs Tutorial: Simple Links Site

This technique is extremely powerful but can get tricky if you are trying for more advanced methods. The display-posts-shortcode Wiki on GitHub gives more details.

---

More Examples

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

Will show pages whose parent has the id of 743. This is the plugin page on this site.

• Copy Posts Plugin
• H5P
• Embed Plus for YouTube
• Search & Filter
• Max Mega Menu
• dFlip Plugin
• Draw Attention Pro
• WP-PostRatings
• Google analytics data
• Google Language Translator

A 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 October 2024 Update (10/24/2024) - Glow Blogs has just had a fairly large update. Glow Blogs is now using wordPress 6.6.2. This bring quite a lot of new features, especially to the Block & Site Editor. Quite a few plugins have been updated too.
• Glow Blogs Update 14 Aug 2024 (8/14/2024) - We are pleased to announce a new release for Glow Blogs, which includes several fixes and updates to plugins and themes. Fixes Embedding Sways: Microsoft recently changed the URLs for Sway embeds, which disrupted the embedding process on Glow Blogs. The developers have now improved this process. We’ve also updated the help documentation to show how … Continue reading Glow Blogs Update 14 Aug 2024 →
• Glow Blogs New “New Site” Functionality (4/16/2024) - The latest release of Glow Blogs makes a slight change to how you create a new site. There is an added choice when creating a site: You can choose between the Classic and Block editor. Choosing Classic will create a site with the default editor for posts and pages is the classic editor and the … Continue reading Glow Blogs New “New Site” Functionality →

---

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"]

---

More Advanced Examples

We can cange the appearance by using some custom css, this is added via the Jetpack Custom CSS module.

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

CSS

/* 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;
}

---

Featured Images

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;
}