Timelines can be a really effective way of displaying a list of events in an interesting way.
Instead of simply creating a list of bullet points, you can publish that information in a stylish vertical timeline. Images, icons, and colors can make your timeline stand out on the page.
However, WordPress doesn’t currently have an easy way to add timelines to your site. Thankfully, there are some great timeline plugins for WordPress created for this exact purpose.
In this guide, you’ll learn about one of the best free timeline plugins for WordPress and how to use it to add a stylish timeline to your site quickly.
Why Create a Timeline?
If you want to display your education or employment history in an eye-catching way that’s also easy to digest, timelines are a great option.
They’re also ideal for sharing the story of your business or another project you were involved in. You could even use them to share photos from a trip you’ve been on or images of events from your life. Creating a timeline to outline the steps in a process or workflow is another use for them.
Any list of items that are related and occur in some sort of time-based order can be presented using the timeline format. There really is no limit to how you use timelines if you think about them creatively.
If you could benefit from adding a timeline to your WordPress site, read on to find out exactly how to create one.
How to Create a Timeline in WordPress
Installing a plugin is the quickest and easiest way to gain the ability to create timelines in WordPress.
There are many timeline plugins out there, but after testing the free options, Timeline Block For Gutenberg seems to be the best choice for most people.
About the Plugin
If you’re looking for a straightforward solution and just want to quickly add basic but nicely presented timelines to your posts and pages, then the free Timeline Block For Gutenberg plugin is hard to beat.
Once activated, the plugin adds a block to the WordPress editor. You can then add that block to a post or page. Once added, you can build a timeline by adding items to the block.
Each timeline item can include a date or similar piece of information, a heading, some text, and an image. You can add links and formatting to the text, giving you even more options for your timeline design.
You also get a few easily accessible customization options to make the timeline look how you want. If you need more functionality in the future, you can upgrade to the affordable paid version.
There are many other free timeline plugins for WordPress, and while Timeline Block For Gutenberg is a good option, you might find one of the other ones more suitable. For example, if you want to create a timeline based on your blog posts, then the Post Timeline plugin can help.
If you like the sound of the Timeline Block For Gutenberg, here’s how you use it to create a timeline in WordPress.
Install the Plugin
First up, you need to install the plugin. To do so, click on the Plugins → Add New menu item.
From the Add Plugins page, search for Timeline Block For Gutenberg. Then click on the Install Now and then the Activate buttons for the plugin.
Create a Timeline
Once the plugin has been installed and activated, a new block is added to the WordPress post and page editors.
To get started, create a new post or page by clicking on Posts → Add New or Pages → Add New. Alternatively, you can open an existing post or page for editing and add the timeline there.
Once the editor is open, you can add the timeline block to your page by clicking on the Block Inserter icon.
Typing “timeline” into the search field should display the Timeline Block.
Click on the Timeline Block to add it to your page. The timeline block includes some dummy content to help you see how the plugin works.
You’ll see the Timeline Block’s structure if you open the List View panel. To do so, click on the List View icon on the header menu. Then click on the > icon next to the Timeline Block item to expand the block.
The demo timeline consists of four items. Each one is an item on the timeline. If you want to delete an item, you can click on the three-dot icon and then click on Remove Cool Timeline Story from the menu.
Add Story Items to the Timeline
To build your timeline, you can either edit the demo items or add new ones to the timeline. To add a new item, click the Add Story button at the bottom of the timeline.
Now you can edit the new item that’s been added to the timeline. Your options here are editing the date field (which doesn’t have to contain a date, e.g., it could be something like “Step One”), adding an image, and entering the heading and description text. You can also add an icon. Just click on the part you want to change to edit the new timeline item.
Another option is to click on the Settings icon in the top right corner. This will reveal the settings panel. You can then edit the timeline story item from there, with the extra option of changing the story position from right to left and vice versa.
If you want to add a link to the text in the timeline story item, you can highlight the text and then click on the Link icon.
You can then enter the address or URL of the page you want to link to. If you want to link to a post or page on your site, you can start typing its name and then choose from the available options.
Once you’ve edited the item, you can move on to creating the next item in your timeline.
You can click on the post or page Preview button at any point to see how the timeline will look to your visitors.
Change the Order of Timeline Stories
You can change the order of the items on your timeline by selecting the item and then clicking on the Move Up or Move Down icon.
Alternatively, you can open the List View panel again and move items around by dragging and dropping them into position.
Once you’re happy with the timeline, you can publish the post or page to make it available to your visitors by clicking on the Publish or Update button on the top menu.
Customizing the Timeline Appearance
Any timelines you create can be further customized by clicking on the Timeline Block — as opposed to the individual timeline items — and then viewing the settings. The settings can be accessed by selecting the block, clicking on the Settings icon, or selecting Show more settings from the block menu.
You can then change the design of the timeline so that the items are displayed on one side only. You can also change the colors and fonts of the timeline.
Pro Version
As mentioned, there’s also a paid timeline plugin called Cool Timeline Pro from the same creators as Timeline Block For Gutenberg.
Some of its features include:
- More designs and templates for your timelines.
- Horizontals layout option.
- Display blog posts using the timeline format.
- More display settings and controls.
- Add videos and slideshows to your timeline.
- Optional timeline navigation system.
The paid Cool Timeline Pro is a good option if you need to do more with timelines.
Summary
Now you know how to create a stylish timeline in WordPress for free.
With the right plugin, the process is very straightforward. With very little time and effort, you should be able to publish an informative and nicely presented timeline on your site.
If you have any questions about this topic, please leave a comment below.
