How To Build a Timeline Page With Blocks

Up next in our Building with Blocks series is a quick tutorial on how to build a timeline page. Timelines give brands and organizations a visual way to introduce themselves and feature highlights from their histories. The block editor makes creating a timeline easier than it ever was with legacy plugins.

For this example, I selected the Timeline Block For Gutenberg by Cool Plugins, which is available on WordPress.org. It’s one of just a handful of plugins that offer timeline blocks. It makes it easy to create a responsive timeline that can be customized to match the organization’s brand, with live previews during the creation process.

I used the relatively new Blockpress theme from MotionBlocks, which supports full site editing so users can customize everything directly on the page. I found the theme easy to work with when creating my example website for this project. It also has compatibility with WooCommerce, if you’re selling something on your site. The Timeline Block for Gutenberg plugin will work with any theme that supports the block editor, but I wanted the chance to play around with Blockpress.

This video demonstrates how you can create a timeline in under five minutes.

The first step is to install the theme and plugin. Once both are activated, create a new page that will house the timeline. Click on the block inserter and select Timeline Block.

One convenient feature about the plugin is that it will insert some placeholders, so it’s easy to see how to add new timeline items (“stories”). The easiest thing to do is replace the text and images that are already there and add more stories at the end if you need a longer timeline.

The plugin lets you customize the story heading, description, and primary label colors, and even the line, icon color/background, and story border. This makes it possible to match the colors to a site’s branding. On the individual story settings, you can change the image size and customize the story icon by selecting from the Font Awesome icon collection. The stories can also link to other posts, so it’s flexible to be used for a variety of different purposes in addition to your standard corporate timeline.