WordPress comes with default Gutenberg block editor that offers blocks for inserting buttons, social icons, columns and many other elements. However, in many situations you need custom widgets like FAQ, accordion, timeline, etc. Especially, timeline will be more useful to showcase your progress or growth to your readers. Though there are no default blocks for timeline, fortunately you have multiple ways to add timeline in WordPress site.
Related: How to add timeline widget in Weebly site?
What is a Timeline?
Timeline is a visual representation of events shown based on time. They can take the form of video, images, text or other content forms to provide an appealing and highly interactive user experience. You can add timeline in WordPress site in a vertical or horizontal direction showcasing flow of events.
Advantages of Adding Timeline?
There are many reasons you may want to insert a timeline in a post or page:
- It is a great way to showcase your company progression or brand’s history over years.
- If you offer project services, it is useful to show developmental stages of projects.
- You can use timeline for product lifelines and showcasing achievements.
- Also, timelines come in handy when you want to tell stories, visualize products and processes (that convey complex messages as simpler ones) to end-users or target audiences.
Thus, the display of nice-looking timelines helps to build more trust in your visitors, and here is how to go about making them.
Different Methods to Add Timeline in WordPress
The easy option in WordPress is to use one of the available timeline plugins. However, you can also simply create a widget and insert anywhere with custom content.
1. Custom Vertical Timeline Widget
Below is the custom timeline widget that you can insert anywhere on your site using “Custom HTML” block.
-
2025
Timeline Event 5
Here is the content for your timeline event. Enter a small paragraph to describe the event in detail.
-
2024
Timeline Event 4
Here is the content for your timeline event. Enter a small paragraph to describe the event in detail.
-
2023
Timeline Event 3
Here is the content for your timeline event. Enter a small paragraph to describe the event in detail.
-
2022
Timeline Event 2
Here is the content for your timeline event. Enter a small paragraph to describe the event in detail.
-
2021
Timeline Event 1
Here is the content for your timeline event. Enter a small paragraph to describe the event in detail.
Below is the complete code for the timeline widget and you can customize the appearance and text as per your need. You can insert this code anywhere on your site without any additional plugin.
<style>
.tl {
position: relative;
padding: 20px 0 20px;
list-style: none;
}
.tl:before {
content: " ";
position: absolute;
top: 0;
bottom: 0;
left: 50%;
width: 3px;
margin-left: -1.5px;
background-color: #eeeeee;
}
.tl > li {
position: relative;
margin-bottom: 20px;
list-style-type: none !important;
}
.tl > li:before,
.tl > li:after {
content: " ";
display: table;
}
.tl > li:after {
clear: both;
}
.tl > li:before,
.tl > li:after {
content: " ";
display: table;
}
.tl > li:after {
clear: both;
}
.tl > li > .tl-panel {
float: left;
position: relative;
width: 40%;
padding: 20px;
border: 1px solid #d4d4d4;
border-radius: 5px;
-webkit-box-shadow: 0 1px 6px rgba(0,0,0,0.175);
box-shadow: 0 1px 6px rgba(0,0,0,0.175);
}
.tl-body {
font-size: 18px;
line-height: 26px;
color: rgba(121, 112, 112, 0.71);
}
.tl > li > .tl-panel:before {
content: " ";
display: inline-block;
position: absolute;
top: 26px;
right: -15px;
border-top: 15px solid transparent;
border-right: 0 solid #ccc;
border-bottom: 15px solid transparent;
border-left: 15px solid #ccc;
}
.tl > li > .tl-panel:after {
content: " ";
display: inline-block;
position: absolute;
top: 27px;
right: -14px;
border-top: 14px solid transparent;
border-right: 0 solid #fff;
border-bottom: 14px solid transparent;
border-left: 14px solid #fff;
}
.tl > li > .tl-badge {
z-index: 1;
position: absolute;
top: 16px;
left: 50%;
width: 50px;
height: 50px;
margin-left: -25px;
border-radius: 50% 50% 50% 50%;
text-align: center;
font-size: 1.4em;
line-height: 50px;
color: #fff;
background-color: #999999;
}
.tl > li.tl-inverted > .tl-panel {
float: right;
}
.tl > li.tl-inverted > .tl-panel:before {
right: auto;
left: -15px;
border-right-width: 15px;
border-left-width: 0;
}
.tl > li.tl-inverted > .tl-panel:after {
right: auto;
left: -14px;
border-right-width: 14px;
border-left-width: 0;
}
.tl-badge {
font-size: 18px !important;
font-weight: bold;
}
.tl-badge.primary {
background-color: #2e6da4 !important;
}
.tl-badge.success {
background-color: #3f903f !important;
}
.tl-badge.warning {
background-color: #f0ad4e !important;
}
.tl-badge.danger {
background-color: #d9534f !important;
}
.tl-badge.info {
background-color: #5bc0de !important;
}
.tl-title {
margin-top: 0;
margin-bottom: 10px;
color: rgba(45, 45, 72, 0.44);
font-size: 20px;
}
@media screen and (max-width: 380px) {
.tl > li > .tl-panel {
width:25% !important;
}
}
@media screen and (max-width: 800px) {
.tl > li > .tl-panel {
width:33%;
}
}
</style>
<ul class="tl">
<li>
<div class="tl-badge success">
2025
</div>
<div class="tl-panel">
<div class="tl-heading">
<h4 class="tl-title">Timeline Event 5</h4>
</div>
<div class="tl-body">
<p>Here is the content for your timeline event. Enter a small paragraph to describe the event in detail.</p>
</div>
</div>
</li>
<li class="tl-inverted">
<div class="tl-badge warning">
2024
</div>
<div class="tl-panel">
<div class="tl-heading">
<h4 class="tl-title">Timeline Event 4</h4>
</div>
<div class="tl-body">
<p>Here is the content for your timeline event. Enter a small paragraph to describe the event in detail.</p>
</div>
</div>
</li>
<li>
<div class="tl-badge danger">
2023
</div>
<div class="tl-panel">
<div class="tl-heading">
<h4 class="tl-title">Timeline Event 3</h4>
</div>
<div class="tl-body">
<p>Here is the content for your timeline event. Enter a small paragraph to describe the event in detail.</p>
</div>
</div>
</li>
<li class="tl-inverted">
<div class="tl-badge">
2022
</div>
<div class="tl-panel">
<div class="tl-heading">
<h4 class="tl-title">Timeline Event 2</h4>
</div>
<div class="tl-body">
<p>Here is the content for your timeline event. Enter a small paragraph to describe the event in detail.</p>
</div>
</div>
</li>
<li>
<div class="tl-badge info">
2021
</div>
<div class="tl-panel">
<div class="tl-heading">
<h4 class="tl-title">Timeline Event 1</h4>
</div>
<div class="tl-body">
<p>Here is the content for your timeline event. Enter a small paragraph to describe the event in detail.</p>
</div>
</div>
</li>
</ul>2. Add Timeline in WordPress with Cool Timeline Plugin
The first step requires installing and activating the “Cool Timeline” plugin. Use the search feature through the “Add New” submenu under the “Plugins” sidebar menu category to achieve that. After activating the plugin, “Timeline Stories” and “Cool Timeline Settings” items will now appear as new sidebar menus in your dashboard. In order to use the plugin, you have to create stories and then create a timeline to show the stories as events flow.
Setup Plugin’s Default Settings
If you want to customize the default settings, go to “Cool Timeline Settings” menu to find all relevant settings that you can use with Cool Timeline plugin.
- General Settings – here you can customize the default alignment, content length, title heading tag, number of stories to display, enable or disable read more, stories order, etc.
- Style Settings – here you can customize the colors for backgrounds and other elements. You can also add custom CSS to decorate your timeline as per your need.
- Typography Settings – setup font size, family and weight for each element in the timeline.
- Advanced Settings – here you can find the differences between free and pro versions.
After finishing your customizations, click “Save Changes” button to save all your settings.
Create Stories for Timeline
As mentioned, you have to create stories to use as events in the timeline widget. Hover on the “Timeline Stories” menu and click on the “Add New” submenu in your site admin panel. Add title and media that would go alongside your story. Also, type in the story description using either the “Visual or “Text” interface. Click on the “Add Icon” button to select a story icon.
Then, scroll down to the “Timeline Story Settings” and select the story date/year/time, declare the story image as a small or full size. Set the featured image and fill in additional features like story format, categories and custom setups that the pro version includes. You can leave the pro version fields blank when using free version of the plugin. Finally, tap the “Publish” button to create your timeline story successfully. Also, do the same for other stories that would appear in your timeline.
Note: As you see the plugin use Classic Editor for creating stories while it supports Gutenberg blocks as well as Classic Editor widget for inserting in the post. The stories you create are stored as a custom post type with the name as cool_timeline.
Add Timeline in WordPress Post or Page
The plugin offers multiple timeline layout like vertical, horizontal, one side, simple and compact layouts. We will explain how to use the timeline both in Gutenberg and Classic Editors.
Using Cool Timeline Shortcode Block in Gutenberg Editor
You have two ways to generate and add the timeline – use the shortcode or use instant timeline builder block. When you are inside Gutenberg editor, click on the + icon on the top right corner and search for “timeline”. You will see two blocks – Cool Timeline Shortcode and Cool Timeline – Insta Builder.
Click on the “Cool Timeline Shortcode” block and the plugin will show you the preview along with the shortcode. You can customize the settings from the sidebar like changing the layout and fill in other details as it meets your interests. The shortcode will be automatically updated and hit “Publish” button.
Now, you can view the stories are automatically inserted in a nice timeline layout as per your settings.
If you want to show the stories in a horizontal timeline, you only have to select “Horizontal” as the timeline layout and other settings to suit your timeline. Other one side, simple and compact layouts will work either as the horizontal or vertical timeline setups.
In fact, you can paste the below shortcode directly anywhere on your site to showcase the stories as a timeline.
[cool-timeline layout="default" skin="default" date-format="F j" icons="YES" show-posts="10" animation="FadeInOut" order="DESC" story-content="full"]The explanations to effect editing are as follows:
- Cool-timeline: it is our default start syntax of the plugin.
- Layout: there are about five major layout options, which are vertical, horizontal, one-side, simple, and compact. You can make changes in the above code to fall into your considerations.
- Skin: the clean/default options are available here.
- Date-format: you can choose any date format to show alongside the stories according to your language or country style representation.
- Icons: you can choose to enable or disable (Yes/No) icons for any timeline story.
- Show-posts: assist in pagination, often in for a timeline (with a lot of stories).
- Animation: there is only one animation effect available in the Cool Timeline free version (that is the – FadeInOut). You can purchase pro for more.
- Order: helps to arrange and manage the way stories appear on the timeline, either in ascending or descending order (ASC/DESC).
- Story-content: it has either a short/full option to show the entire HTML text or a brief description with read-more for timeline stories.
Add Timeline in Gutenberg Using Instant Builder Block
The shortcode method is useful as you can copy and paste the shortcode anywhere on your site to show the same timeline. However, you have to create stories and the stories can be used only in one timeline. If you want to create multiple timelines showing different events, then you can easily do this in real-time using the “Cool Timeline – Instant Builder” block with its settings. In your page or post editor dashboard search and add the “Cool Timeline – Instant Builder” block. Start editing the timeline title, description, dates, icons, images, and add more stories if you wish. You can use either “Default (Both Sided)” or “One-Sided” as your timeline layout and customize the title/description sizes and colors.
Add Timeline with Elementor Page Builder
Cool Timeline plugin offers an add-on plugin to use with the popular Elementor page builder plugin. If you are using Elementor, install and active “Elementor Timeline Widget Addon” plugin, Edit the page or post you want to create your timeline with it (“Edit with Elementor” button). Type the “timeline” into the search bar, then drag and drop the “Story Timeline” component. Use the “Edit Story Timeline” settings to change various options to meet your ideal timeline requirements.
Using Classic Editor for Inserting Timeline
If you are using Classic Editor instead of Gutenberg, do not worry!!! Cool Timeline has an option for Classic Editor as well. When you are in Classic Editor, click on the “Cool Timeline Shortcode” drop-down menu and choose the “Add Cool Timeline Shortcode”.
Adjust your selections in the pop-up and click on the “OK” button to insert the timeline shortcode.
Similarly, you can select the “Add Cool Horizontal Timeline” option to insert a horizontal timeline widget.
Final Thoughts
A timeline can significantly boost the credibility of your business. Though there are many timeline plugins available, Cool Timeline plugin offers a decent way to add a timeline in WordPress site. you can easily create vertical or horizontal layouts customize the appearance. If you are not interested in using the plugin, then use the widget code given above.
Leave a Reply
Your email is safe with us.