How to Add Beautiful Event Timelines in WordPress

Event timelines are fantastic for visually representing your events, making them more engaging and easier for your audience to follow.

Beyond events, timelines can also be used on your ‘About’ page to highlight your company history and milestones.

But, without the right tools, planning and showcasing event timelines on your WordPress site can be challenging.

In this article, we will show you how to add beautiful event timelines to your WordPress site.

Why Add a Beautiful Event Timeline in WordPress

Event timelines highlight significant milestones with a clear, chronological structure. By using one, it can help enhance the storytelling aspect of your content.

Beyond milestones, timelines let you visually represent progress, phases, and the interconnection of events. This can make your content more engaging.

When it comes to use cases, many WordPress website owners use timelines to display related events in an organized and visually appealing way. Businesses and organizations also often use timelines to show their history.

If you have a portfolio website, like an online photography portfolio, then you can show your photographs in a nice vertical timeline that shows your journey around the world.

This can be more engaging than writing your history and adding it to your site as a page of plain text.

How to Add an Event Timeline in WordPress

The easiest way to add an event timeline in WordPress is by using the Cool Timeline plugin. This free, user-friendly plugin allows you to create stunning timelines quickly and easily.

Upon activation, you’ll see a new Timeline Addons area in your WordPress dashboard.

With this plugin, you can create event timelines in 2 methods.

The first one is by clicking the ‘Add New Story’ button from the Timeline Addons dashboard.

This will open the editor, where you can type in a title and description, set a featured image, and add other important information.

Once you’re done adding events, Cool Timeline will show all of these event stories on the same timeline. You can then add the timeline to any page or post.

This method is perfect for showing the same timeline multiple times across your website. However, it only lets you create a single timeline.

The other option is to use the Cool Timeline Block to build a visual timeline inside the WordPress block editor.

Adding multiple Cool Timeline Blocks to your website allows you to show different timelines on different parts of your site.

However, this method doesn’t let you reuse the same timeline across your website unless you save them as a block pattern yourself.

In this guide, we’ll cover both methods. No matter how you build your timeline, you’ll need to install and activate the Cool Timeline plugin. If you need more details, then please see our guide on how to install a WordPress plugin.

Once done, you’re ready to create your timeline using either the Timeline Addons menu or the block editor. If you prefer to jump straight to a particular method, then you can use the links below:

Ready? Let’s get started.

Method 1. How to Build a Reusable Event Timeline Using the Timeline Addons Menu

To create your first event, you can go to Timeline Addons » Add New Story from your WordPress dashboard.

You can then give the event a title by typing it into the ‘Add Title’ field.

In the main editor, you can go ahead and type in all the text that you want to show on your timeline. This will typically be a description of the event.

Once you’ve done that, it’s time to click on the ‘Set featured image’ link.

You can now choose the image that will represent the event on your timeline. You can either click to choose an image from the WordPress media library or upload a new image file from your computer.

Next, you’ll want to scroll down to the ‘Timeline Story Settings’ section. Here, you can click on the ‘Story Date / Year’ field and use the calendar popup to select the time and date when the event happened.

You can also choose between a ‘Full’ or ‘Small’ image for the event.

In the following image, you can see an example of a ‘Full’ image.

Larger images will draw the visitor’s attention towards the most important events on the timeline. However, ‘Full’ images take up more space.

The following image shows the same event, but this time with a ‘Small’ image instead.

If you want to add lots of different events to your timeline, then you may want to use the ‘Small’ setting.

This can help prevent your timeline from looking cluttered.

After making these changes, you’ll want to scroll to the top of the page and click on the ‘Publish’ button.

And that’s it! You can now repeat these steps to create more events.

Want to see all the events you’ve created so far? Then simply go to Timeline Addons » Cool Timeline Stories.

Once you’ve created all your events, the next step is customizing how the timeline will look on your website.

To do this, you can go to Timeline Addons » Timeline Settings » General Settings.

In the ‘Timeline Title’ section, you can type the title that will appear above your timeline.

Cool Timeline can also display an image above your timeline, such as your company logo. This can help reinforce your branding and let visitors know what the timeline is showing.

To add this optional image, you’ll want to click on the ‘Upload’ button.

You can now either choose an image from your WordPress media library or upload a new file from your computer.

If you add lots of text to a timeline, then it can look cluttered and off-putting.

With this in mind, you may want to set a maximum number of words that will be shown on the timeline. To set a maximum word limit, simply type a number into the ‘Content Length’ field.

If you do set a limit, then it’s a good idea to add ‘Read More’ links to your timeline. Cool Timeline will then add this link to any descriptions that are bigger than your word limit.

To add this link, find the ‘Display read more?’ section and click the ‘Yes’ button.

You can now decide whether clicking the ‘Read More’ link will show the rest of your text in the same tab or a new browser tab. To make this choice, simply click on either the ‘Same Tab’ or ‘New Tab’ radio button.

By default, the timeline shows the year each event occurred. However, you may not always need to show this information. For example, if all the events happened in the same year.

To hide the year label, simply click on the ‘Year Label’ slider to turn it from ‘Show’ to ‘Hide.’

By default, the first event in your timeline will appear on the right-hand side of the timeline’s vertical line.

Want to show this event on the left-hand side of the timeline instead? Then, simply click on the ‘Left’ button next to ‘​​Vertical Timeline Stories Starts From.’

When you’re happy with your changes, click on the ‘Save’ button to save your changes.

Now, you can move on to the ‘Style Settings’ tab.

By default, the timeline doesn’t have a background.

If you want, then you can add a colored background to your timeline by clicking on the ‘Timeline Background’ slider to turn it from ‘No’ to ‘Yes.’

Then, go ahead and click on the button next to ‘Story background color.’

You should now be able to choose a background color using the color picker settings.

This screen also has similar color settings for all the different parts of your timeline, including the vertical line and the event titles. To change any of these default colors, simply click on the section’s button and then use the color picker that appears.

When you’re happy with the changes you’ve made, don’t forget to click on the ‘Save’ button.

Next, you might want to go to the ‘Typography Settings’ tab. Here, you can change the size and font that’s used for the different content in your timeline, such as the timeline title and story title.

If you change the default typography settings, then don’t forget to save your changes by clicking the ‘Save’ button.

Once you’ve finished customizing the timeline, you’re ready to add it to your website. Simply open the page or post where you want to show it, and then click on the ‘+’ button.

Now, you’ll want to type ‘Cool Timeline’ into the search bar. This plugin has a few different blocks, so make sure you click on the ‘Cool Timeline Shortcode Block.’

You can now either update or publish your page as normal.

Now, if you visit your website, you’ll see the live timeline.

Method 2. How to Create Multiple Event Timelines in WordPress Using the Timeline Block

You can also build a beautiful event timeline in WordPress using the block editor and ‘Cool Timeline Block.’

This block has lots of placeholder content. To build your timeline, you simply need to replace each placeholder with your own text and images. This allows you to build your timeline more visually.

To start, simply open the page or post where you want to add a timeline.

You can then click on the ‘+’ icon and type in ‘Cool Timeline Block.’ When this block shows up, click to add it to the page or post.

The Cool Timeline block has 4 placeholder events. You can start editing them one by one by clicking on the first event in the timeline.

In the right-hand menu, simply replace the ‘Story Heading’ placeholder with the heading you want to use for this event.

Next, you can add a description to the ‘Story Description’ field.

After that, you’ll want to find the ‘Primary Label (Date/Steps)’ field. Here, go ahead and type in the date when this event happened.

By default, the Cool Timeline block shows the first event on the right-hand side of the timeline.

If you prefer to show the event on the left-hand side of the vertical line, then you can click on the ‘Left’ radio button.

Now, the Cool Timeline block has a placeholder image for each event. To replace this placeholder with your own image, simply click on the ‘Remove’ button.

Once you’ve done that, go ahead and click on the ‘Upload/Choose Image’ button.

You can then either choose an image from the WordPress media library or upload a new file from your computer.

The Cool Timeline Block will show each image at its full size. To show a smaller image instead, open the ‘Image Size’ dropdown and choose either ‘Medium’ or ‘Thumbnail.’

As soon as you click on one of the different image sizes, the block will update to show the new image. This allows you to try out different sizes to see what looks best on your website.

By default, the timeline marks each event on the vertical line with a dot. You may want to replace this plain dot with a custom icon.

For example, you might use different icons for different types of events. Then, you can explore the different custom icons you can use for your timeline by clicking on the ‘Custom (Font Awesome Icon)’ radio button.

Once you do that, a dropdown with an arrow icon will appear. You’ll want to expand on it to scroll through all of the different icons.

When you find the perfect icon to use for your event, then you can click it.

You can now customize the rest of the placeholder events following the same process described above.

If you want to add more events to the timeline, simply click on the ‘Add Story’ icon. This will add a new placeholder event, ready for you to customize.

When you’re happy with how the timeline looks, you can either update or publish the page as normal. Once done, your timeline will be live on your WordPress website.

We hope this article helped you learn how to add a beautiful event timeline to your WordPress website. You may also want to check out our guides on how to create a simple event calendar and how to add a countdown timer widget in WordPress.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.