Posts Slider

3 min read Updated

The Unwind posts slider shows your posts as large slides. On the blog page, the Jetpack Featured Content feature picks up to five posts that you tag, and the Posts Slider template of the Post Loop Widget puts a slider on any page built with Page Builder.

The posts slider with a featured post and its Continue Reading button

Each slide shows the post details, the title and a Continue Reading button over the featured image of the post, across the width of the content area. Arrows at the sides move between the slides.

Slider on the Blog Page

Install Jetpack

Go to PluginsAdd Plugin, search for Jetpack, then install and activate it.

Turn On the Slider

Go to AppearanceCustomizeTheme SettingsBlog and turn on Jetpack Featured Content slider on blog home page. It is off by default. To make the white text easier to read on light images, also turn on Jetpack Featured Content slider image overlay. Also applies to slider in Post Loop widget. That setting adds a dark layer over each image.

Go to AppearanceCustomizeFeatured Content. Featured Content works with a post tag. In the Tag name field, search for a tag or enter a new one, for example Featured. The tag name is case sensitive. The section has two options:

  • Do not display tag in post details and tag clouds. On by default. The tag does not show in the post details or in the tag cloud widget.
  • Also display tagged posts outside the Featured Content area. Off by default. While it is off, the featured posts do not show in the post list below the slider when your front page shows your latest posts. Turn it on to show them in both places.

Choose the Posts

Go to PostsAll Posts and edit a post. Add the featured tag to the post. Repeat for each post that you want in the slider, up to five. Featured Content only features posts.

Give each post a featured image. Unwind uses it as the slide background. A slide without one has no background image, and its white text is hard to read.

Where the Slider Shows

The slider shows at the top of the page set as Posts page in SettingsReading, or of the front page when it shows your latest posts. It only shows on the first page of posts. While the slider shows, Unwind removes the space and the border below the header, so the slider meets the header.

Posts Slider on Any Page

Use the Post Loop Widget to put a slider on any page. You need Page Builder by SiteOrigin.

  1. Edit the page. In the Classic Editor, click the Page Builder tab. In the Block Editor, add the SiteOrigin Layout Block from the block inserter.
  2. Click Add Widget and choose Post Loop.
  3. In the Template list, choose Posts Slider.
  4. Use the Posts query section to choose which posts show, then click Done.

This slider shows the posts of the widget query, each with its featured image, and the overlay setting in Blog applies to it too. To list posts below the slider, add a second Post Loop Widget and choose one of the blog templates, for example Blog Grid.