Advanced Layout for PublishPress Series

The Series plugin allows you to collect WordPress content together into a series. This is ideal for magazines, newspapers, short-story writers, teachers, comic artists, or anyone who writes multiple posts on the same topic.

You can easily create beautiful layouts with PublishPress Series. This is possible thanks to an integration with the PublishPress Blocks plugin.

To create your layouts, start with both PublishPress Series and PublishPress Blocks installed.

  • Go to “Series” then “Publish Series”.
  • Click “Update order”.
  • On this screen, you can make sure all your posts are in the correct order. In the image below, my posts are incorrectly sequenced. I need to drag-and-drop them into a better order.
Series Order Star Wars
Series Order Star Wars
  • Go to write a post using the Gutenberg editor.
  • Choose the “Content Display” block.
Content Display Block
Content Display Block
  • In the sidebar for the Content Display block, choose your series from the “Show content with these Series” box.
Choose Series
Choose Series
  • If you want to use the order of posts in the Series to control your display, you can do that by using the “Order by” option. Choose the “Series order” option.
Order By Series
Order By Series

Now that you've done the setup, you can configure your display. This image below shows the default view you will see with the Content Display block:

Default Star Wars View
Default Star Wars View

Using the block settings, you can make modifications from this point. For example, you can change the number of columns to “3”. If you have the Pro version of Blocks, you can also move the title underneath the image. This next image shows the updated version of this view:

Star Wars Layout
Star Wars Layout

The Content Display block has several views that are available, including Grid, List, Slider, Frontpage, Newspaper and Masonry. In the next part of this guide, I'll use several of those views to display the content from PublishPress Series.

This next image shows the List view. I've also added more content, including the Post Date, the Comment Count, the Excerpt, and the Read More link.

Star Wars List
Star Wars List

This next image shows the Grid view with a 4 column layout. I've used the option to rewrite the Read More link.

Star Wars Grid
Star Wars Grid

Let's take a look at one more option. This final image shows the Newspaper display for the Content Display block. One post is the headline, and the next three posts are sub-headlines. There is a setting that allows you to show the featured image only for a limited number of posts, and I've used that in this example.

Star Wars Newspaper
Star Wars Newspaper