Writers Building Websites

Writers Building Websites

Build a Reusable Book Listing Block in Breakdance

Create a global block in Breakdance to display dynamic book listings, streamline updates, and improve SEO across your author website’s custom templates.

Last Updated: 10 December 2024

Introduction

We are almost at the last section of the Single Book template but before that we are going to build our first global block.

What is a Global Block?

When you’re designing a website you sometimes need to use the same piece of content on multiple pages. Rather than recreate that piece of content over and over again we can build a global block and place it anywhere on the website as many times as well like.

Contact forms, newsletter sign up forms and customised social media elements are all useful Global blocks to create once and reuse over and over again. Even better is that when you edit the global block the changes apply everywhere it is used. It’s like a template but at block level.

Global blocks are used for static, replicable content (like placing a newsletter signup global block on every page) or can be applied to more complex things like repeatable/dynamic content like, say a catalog of books?

The Other Books Post Loop

When we look at the bottom of the Adventure Danger book post on the live Dirk Volcano website we can see all the books in the Dylan Danger series.

Each book displays a cover, a title, a book blurb, taken from the excerpt,  see I told you the book excerpt had multiple uses, and a call to action to see the book.

We build these book views using Breakdance’s Post Loop Builder element.

This Post Loop Builder element does a lot of work for us

  • It shows the visitor how many books are in the series
  • It displays the books in reading order
  • The excerpts build on the trope immersion satisfying genre fans that these books are exactly what they are looking for

And we not just using the post loop builder element here.

If I jump to the Dirk Volcano Home page we are using more post loops to display our books. This time it’s only the covers with a title which are both linked to the title’s book post.

If I click on the Full series button below the titles I’m taken to the series page with another post loop element showing off the books in that series.

We use post loops all over the author website build.

But we only need to build a few of them.

In this lesson we are going to build our base post loop, the framework for all the others. We will use this loop on the site duplicate it for other series or page specific elements but it all starts with this one.

Build the Latest Releases Global Block

Before we build our post loop we need to set up our Global Block. This global block will display a single book listing that will be picked up by the post loop for all the values in the query for that loop. Makes sense right? 

Maybe not but nothing provides clarity like an example so lets build one.

  • From the WordPress admin dashboard go to Breakdance > Global Blocks
  • Create a new Global Block called ‘Other Books Max’
  • Edit the Global Block with Breakdance
  • Set the the Preview to one of the Book Posts
  • Add Div element
  • Under spacing add 6 rem to the bottom margin
  • Click the plus icon inside the div and add a Wrapper Link element
  • Map the Wrapper Link element to the Post PermaLink
  • Add an image inside the Wrapper link
  • Set the image element to the featured image
  • Add 3 rem to the bottom margin of the wrapper link

We don’t want to put the remaining elements inside the Wrapper link

  • Click on the Div element in the structure panel
  • Add a Post Title element under the image
  • Set it to H5
  • Add a text element
  • Map it to the post excerpt data source.
  • Open the advanced options for the post excerpt data source
  • Limit the characters to 180

This text element will act as the book blurb. We are using a text element instead of the Post Excerpt so we can limit the amount of characters displayed. For more information why I’ve set this to 180 characters visit SEO for Authors.

  • Next, we are going to add a button
  • Change the Button text to See Book
  • Map the button link to Post Permalink
  • Style the Button as Secondary
  • Click save
  • Exit to wordpress

Summary

You’ve now created a global block to present book listings using Breakdance’s Post Loop Builder and custom fields. This single template streamlines content updates, and ensures design consistency. By integrating a reusable global block, you make it easy for readers to discover your catalog, explore entire series, and ultimately engage more deeply with your work—laying the groundwork for a more professional, efficient, and user-friendly author platform.

Stephen Gordon
Stephen is the founder of Writers Building Websites and brings over a decade of experience as a freelance marketer specialising in publishing. He is also an author.

Index

Copyright © 2024 Writers Building Websites | All Rights Reserved.