Inserting Latest Posts (News, Blog) on a Page

Use the Latest Posts block to customize how news or blog posts are embedded and displayed on any page of your site.

Before you start:
To add posts using the Latest Posts block, you’ll need to create at least one post first.
To create a list of posts by category, you must have at least one post tagged with that category. 

You can use the Latest Posts block to embed posts on any page of your site, giving you control over elements such as layout, the fields displayed (author, date, excerpt, thumbnail, etc.), the number of posts and more.

Another advantage of using the Latest Posts block is that you can include posts on multiple pages of your site, adjusting the settings for each page’s purpose and content. For example, you might embed posts on these three pages:

  • Homepage: Grid with one row of three posts, showing your most recent stories
  • News page: List of all posts with thumbnails and pagination turned on
  • Topic-specific page: Carousel with six posts categorized by that topic

How to embed posts on a page

A new page editor was released in June 2020. Do you know how to use it? See the guide to the new block editor »

  1. Add the Latest Posts block.
  2. Under Display Settings in the right panel…
    1. Select a layout (Full Featured List, Thumbnail List, Grid or Carousel) under the Display As dropdown. Preview layout options below »
    2. Toggle the display of settings such as author, category, date, excerpt, thumbnail, comment number and pagination.
  3. Use Query Settings in the right panel to limit the number and type of posts displayed.
    1. Order by: Display posts in alphabetical order or order by date.
      1. Recommended: Newest to oldest (lists most recently published posts first)
    1. Category: Show only posts from a particular category.
    2. Use number of items to set the number of posts you would like to present on the page.
      1. If you’re creating a page that’s mostly or all posts, like a news page, we recommend setting this number anywhere from 20-40 posts (and be sure the pagination display field is turned on!).

Display settings

The Display settings on the right side of the screen includes layout options and which post fields to show.

Layout (Display As)

The four layout options allow you to select how your posts are listed.

Full featured list

Best for sites that have great featured images on all their posts, or the one(s) they plan to feature.

Thumbnail list

Recommended for sites that have a featured image for every post. Easier to scan multiple stories than full featured list layout.

Grid (or masonry)

Display posts as a grid, either with fixed row heights, or with staggered post heights based on the content (masonry layout).

The masonry layout is a type of grid layout that reduces unnecessary space. Instead of presenting posts in columns of equal height, the masonry layout is fluid, allowing posts to flow and fill unwanted gaps (for this reason, it is sometimes referred to as the “Pinterest style layout.”)

While the masonry layout may appear more dynamic than the classic grid layout (shown below), the grid is easier to scan and read. Choose the option that best suits your content.

Carousel

Also known as a slider or slideshow, a carousel layout allows you to display a specified number of posts per slide. Site visitors have the option to interact with the carousel and must click an arrow to view additional posts. 


Display Fields

Display fields control what information is shown with each post’s snippet – the preview of a post shown before a visitor clicks on it to read the full post. They include:

  • Author
  • Category
  • Date
  • Excerpt
  • Thumbnail
  • Comment number (# of comments)
  • Pagination: When pagination is on, and a site visitor clicks to see the next page, the entire page will refresh and take the site visitor to the top of the “next” page. 
    • Leave pagination turned on if you’re creating a page that’s mostly news with minimal content, like an introduction, at the top.
    • Turn pagination off when inserting posts on a page with lots of other content. If you’ve included one or more stories in the body of a page and want to invite site visitors to view more stories, include a link or button to your news page or blog.

By default, all of the display fields will show. To remove a display field, use the toggle to turn off the display field.

Crop images to same sizes (grid layout)

When using the grid layout, you’ll notice an additional display field: Crop images to same sizes. When toggled on, the thumbnail images will be automatically cropped to display at the same size. (This does not crop the original image file, only the thumbnail preview.)

We recommend keeping the default settings, unless your images have very different orientations. In this case, force-sizing the preview images might crop important elements out of the image (like a person’s head!).


More on this topic