If you are using Cool Timeline Pro for the first time, this guide will help you create and publish your first timeline in WordPress.
In Cool Timeline Pro, each event is created as a separate Timeline Story. After creating your stories, you can display them together on any WordPress page using the Story Timeline Shortcode block.
You do not need to manually add every story to the page. Once your Timeline Stories are published, the shortcode will automatically display them based on your selected settings.
The complete process is:
Create Timeline Stories > Add the Timeline Shortcode > Publish the Page
Let’s go through each step.
Pre-requisite
Before creating your first timeline, make sure you have installed and activated Cool Timeline Pro. If you have not installed Cool Timeline Pro yet, first follow our installation guide.
Create Timeline Stories
Follow the steps below to create the first event for your timeline:
Add Story Content
- From your WordPress dashboard, navigate to Timeline Addons > Add New Story.
- Enter your Story Title and Description, this is the content that will appear on your timeline.
- Upload a Featured Image that visually represents your story and assign a category to your timeline story. [Create timeline categories]
Timeline Story Settings
From the “Timeline Story Settings,” you can customize your timeline stories:
- Story Type: Choose how the story should be ordered on the timeline. You can select:
- Date-Based: Use this option when your timeline events have actual dates.
- Custom Order Based: Use this option when you want to use custom labels instead of dates (like: Phase 2, Launch, or 1302 BC).
- Story Media: Choose to display an image, video, or slideshow for your timeline story and set the media size according to your preferences.
- Story Icon: Choose the icon type for your timeline stories.
- Extra Settings: Add the custom story link and set the color for your story.
Similarly, create other timeline stories.
Add Timeline Shortcode
Follow the steps below to start creating your timeline stories via shortcode using Cool Timeline:
- Open any page or post in the Gutenberg editor.
- Click on the “+” Add Block button.
- Search for “Timeline Shortcode” and select the Story Timeline Shortcode.
- The shortcode will be added to your page.
- After adding the timeline shortcode to your page, you can fully customize the display of the timeline using the following settings.
From General Settings:
- Select Layouts: Choose a timeline layout from the available options.
- Select Designs: Select from multiple predefined timeline designs to change the visual appearance of your timeline.
- Select Skin: Choose the color theme for your timeline. You can use the default, dark, or light skin according to your requirements.
- Select Filter Category: Display all timeline stories or choose to display stories from a specific category.
- Timeline Based On: Decide whether your timeline should be Date Based (stories shown by date) or use Custom Labels/Text.
- Stories Description: Select whether you want to show a short summary or the full story content inside each timeline item.
- Stories Per Page: Set how many stories should appear on one page. Pagination will be added automatically after the given number of stories.
From Advanced Settings:
- Stories Order: Choose how your stories appear on the timeline from DESC or ASC.
- Stories Date: Show or hide the date for each story.
- Date Formats: Select how the date will appear on your timeline.
- Display Icons: Show icons next to your stories. By default, a small dot is shown, but you can choose to display custom icons.
- Pagination Settings: Choose how users navigate between multiple pages of stories. You can use the default numbered pagination or enable AJAX “Load More”.
- Show Category Filters: Allow users to filter stories by category.
- Year Label Setting: Show or hide the year labels that appear between stories on your timeline.
- Year Navigation Setting: Display or hide year navigation buttons, allowing users to jump to stories from a specific year.
- Line Filling Settings: Toggle this on if you want to fill the center line connecting all stories.
- Display Read More: Show or hide the “Read More” button below each story.
- Content Length: Set how much of each story’s text will appear before the “Read More” link.
- Animation: Choose an animation effect for how stories appear on the timeline (e.g., fade-in, slide-in, or bounce).
- Timeline Title: Add a title to your timeline. This title appears at the top of your timeline section and helps visitors understand its purpose.
Publish the Page
- After satisfied with all the changes, click Publish.
- Then preview your page to see your timeline layout.
If you do not prefer using the Timeline Shortcode, Cool Timeline Pro also provides a dedicated Gutenberg Timeline Block. You can add the timeline directly in the WordPress Block Editor and customize it using the available block settings.
To learn how to create a timeline using the Gutenberg block, follow this guide:
