The Posts List block provides a dynamically updated list of one or more posts.

The list can be displayed as either a standard row list or as a grid. You can also choose to show or hide post data such the excerpt, date, feature image, or taxonomies.

How to Use

  1. Choose the Posts List block from the Add block menu (under the Widgets category).
  2. The Posts List block will default to a row list of posts ordered newest to oldest, showing only the title link. How many posts display by default will depend on the “Block pages show at most” setting in your WordPress reading settings (default 10).
  3. If you’re happy with the defaults this is all you have to do. The list is dynamically generated based on the parameters you set in the Filtering and Order and number settings menus and will automatically update whenever a new post is published.

Additional Options

The Posts List block is highly customizable. You can change the basic layout as well as how much post content is displayed.

Layout and Display Options

You can change between the default list layout and a card-style grid layout by toggling between the List view and Grid view options in the block toolbar.

  • When set to Grid view you can change the maximum number of columns to display under the Order and number panel in the block settings (in the sidebar). Note that at narrower screen widths (such as on phones) the display will fall back to fewer columns to preserve readability.

In the block settings you’ll find panels for Post content settings, Post meta settings, and Featured image settings. These control the following options:

  • Post content settings: select whether to show the post content or not. If toggled on you’ll be able to also choose between an excerpt or the full text of the post, and also customize the length of the excerpt.
  • Post meta settings: choose whether to show the post date, post categories, post tags, and other post taxonomies. Each can be toggled independently of the others.
  • Featured image settings: select whether to show the featured image (if a post has one). If toggled on you’ll have additional options including size and image alignment. Note that image alignment will not always have a visible effect depending on other layout options you’ve selected.

Filtering and Sorting Options

By default the Posts List block will display the x most recent published posts. You can choose to modify that by changing the sort order and by filtering the included posts by taxonomy (category, tag, or custom).

  • To change the order: expand the Order and number panel in the block settings and select from the options listed in the “Order by” menu. Options include chronological, reverse chronological (default), alphabetical by title, and reverse alphabetical.
  • To change the number of posts shown: expand the Order and number panel in the block settings and adjust the slider in the “Number of items” option.
  • To filter the included posts: expand the Filtering panel in the block settings and select the terms you want to filter by in the provided taxonomy menus.
    • For example: Lets say you have a “Favorites” tag and want a list of the ten most recent posts with that tag. You would insert a Posts List block, open the Filtering panel and select “Favorites” from the Tags menu.
    • You can filter using terms from multiple taxonomies, but note that it is an additive search. It will show only posts matching every term you select, not one or the other.

Examples

A Posts List block with all defaults

List view with feature images and an excerpt

  • Keyboard navigation

    There are many different ways to use the web besides a mouse and a pair of eyes. Users navigate for example with a keyboard only…

  • Markup: HTML Tags and Formatting

    Headings Header one Header two Header three Header four Header five Header six Blockquotes Single line blockquote: Stay hungry. Stay foolish. Multi line blockquote with…

  • Markup: Image Alignment

    Welcome to image alignment! The best way to demonstrate the ebb and flow of the various image positioning options is to nestle them snuggly among…

  • Markup: Text Alignment

    Default This is a paragraph. It should not have any alignment of any kind. It should just flow like you would normally expect. Nothing fancy.…

  • Markup: Title With Special Characters ~`!@#$%^&*()-_=+{}[]/\;:’”?,.>

    Putting special characters in the title should have no adverse effect on the layout or functionality. Special characters in the post title have been known…

  • Template: Featured Image (Horizontal)

    This post should display a featured image, if the theme supports it. Non-square images can provide some unique styling issues. This post tests a horizontal…

  • Template: More Tag

    This content is before the more tag. Right after this sentence should be a “continue reading” button of some sort on list pages of themes…

  • Template: Excerpt (Defined)

    This is a user-defined post excerpt. It should be displayed in place of the post content in archive-index pages.

  • Template: Excerpt (Generated)

    This is the post content. It should be displayed in place of the auto-generated excerpt in single-page views. Archive-index pages should display an auto-generated excerpt…

  • Template: Sticky

    This is a sticky post. There are a few things to verify: The sticky post should be distinctly recognizable in some way in comparison to…

List view with all data visible and small size images

Posts List in grid view

This one has 8 posts with three columns (the default) and is set to align wide. It has post titles and excerpt only.

  • Keyboard navigation

    There are many different ways to use the web besides a mouse and a pair of eyes. Users navigate for example with a keyboard only…

  • Markup: HTML Tags and Formatting

    Headings Header one Header two Header three Header four Header five Header six Blockquotes Single line blockquote: Stay hungry. Stay foolish. Multi line blockquote with…

  • Markup: Image Alignment

    Welcome to image alignment! The best way to demonstrate the ebb and flow of the various image positioning options is to nestle them snuggly among…

  • Markup: Text Alignment

    Default This is a paragraph. It should not have any alignment of any kind. It should just flow like you would normally expect. Nothing fancy.…

  • Markup: Title With Special Characters ~`!@#$%^&*()-_=+{}[]/\;:’”?,.>

    Putting special characters in the title should have no adverse effect on the layout or functionality. Special characters in the post title have been known…

  • Template: Featured Image (Horizontal)

    This post should display a featured image, if the theme supports it. Non-square images can provide some unique styling issues. This post tests a horizontal…

  • Template: More Tag

    This content is before the more tag. Right after this sentence should be a “continue reading” button of some sort on list pages of themes…

  • Template: Excerpt (Defined)

    This is a user-defined post excerpt. It should be displayed in place of the post content in archive-index pages.

Grid view with many posts

Display 20 posts in grid view with all possible columns showing title and date only, with wide alignment.

Grid view with all post data across four columns

Source

This is an HRS-created block provided as part of the HRSWP Blocks plugin.