Display Posts Shortcode

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:

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

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:

Screenshot how to find post ID from All posts page on dashboard

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 April 2022 (4/19/2022) - Glow Blogs has had another update. Here are some highlights Use H5P content on other blogs via shortcode You can now allow your hp5 interactive content to be used on other Glow Blogs. See the H5P example blog Sharing page for details. Plugin Copy Posts This post allows you to create template posts that can … Continue reading Glow Blogs Update April 2022 →
H5P Plugin (3/8/2022) - New to Glow Blogs the h5p plugin. This plugin allows you to create a wide variety of interactive content, From 360 tours to word searches, cloze procedures, quizzes and more. We have a blog with some more information to get you started: H5p examples H5P makes it easy to create, share and reuse HTML5 content … Continue reading H5P Plugin →
Glow Blogs Update 26 Aug 2021 (8/26/2021) - The Glow Services has had a major update WordPress has been updated. As usual we are slightly behind the latest version from WordPress.org Many of the plugin and Themes have been updated. It is now possible to use the Gutenberg Blocks editor on Posts and Pages. You can read more about the Blocks editor. We … Continue reading Glow Blogs Update 26 Aug 2021 →

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

Weekly jQuery Migrate Status Update e-mails - Some Blog owners may receive emails relating to jQuery. These can be ignored and deleted and have no impact on the service. Work is being carried out to prevent these emails from being send from Glow Blogs Updates on the Glow Status

Yoko Theme menus on mobile - There has been a problem with dropdown menus in blogs using the Yoko theme on mobile devices. It the past this could be dealt with by using the Jetpack mobile module. This has now no longer available. There was also a rather complicated workaround using widgets and custom CSS. As of 27 Jan 2021 there … Continue reading →

Jetpack sharing IE 11 Bug - We have discover a small issue with the Jetpack sharing module on Glow Blogs. If Facebook and Twitter are selected to hide behind the share button they don’t show in IE11 it doesn’t work with Official buttons so the other option needs selected or they have to be shown individually. We use the Icon Only … Continue reading →

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

Leave a Reply Cancel reply

Help for Glow Blogs