The Cool Timelines plugin allows you to create a beautiful vertical timeline that you can add to a page or post. Timelines is ideal for situations where you want students to create a representation of a historical event or development process in chronological order.
After activating the Cool Timelines plugin in Plugins > All, you will see a new Timelines Stories menu item added to your main navigation.
What's On This Page?
Your timeline is created using a series of Timeline Stories. Each timeline story adds an event to your timeline.
Below is what a story looks like in a timeline.
You add a timeline story as follows:
1. Go to Timelines Stories > Add New
2. Add your story title and your story content.
3. Click on Set featured image and add an image (used for your story image).
Your image is displayed in the Featured Image module once it has been set.
The image size can be switched between full or small sized using the custom timeline setting module underneath the timeline story editor.
By default, the full size image is used. Text is wrapped around the image when small is selected.
4. Optional – Click on Add Icon and set an icon if you want display a different icon for each story.
5. Click on Edit next to Publish immediately.
6. Change the publish date to your story date and story year then click OK.
7. Click Publish.
8. You repeat the process of adding new stories using Timelines Stories > Add New until you’ve published a story for every event you want to display in your timeline.
- A timeline story looks like a post if you click View Post after you’ve published your story.
- Your timeline stories displays in the timeline format when you embed the timeline shortcode into a post or page.
After creating all your stories you display your timeline in a page or post as follows:
1. Go to Pages > Add New (or Posts > Add New).
2. Add your page title.
3. Click on the Cool Timeline Shortcode Icon and then click on Add Cool Timeline Shortcode.
4. The Cool Timelines Shortcode window will launch.
5. Select your layout options and then click OK.
- Timeline layout – controls how your timeline is displayed.
- Default layout – vertical both sides timeline.
- One Sided layout – vertical one side timeline.
- Animation effect – controls the timeline animation.
- None – no animation
- Date format: controls how the date is formatted.
- Icon – Select Yes is you have set story icons and want them displayed.
- Show number of posts: controls how many stories are displayed in the timeline. If the number of stories is more than the number you’ve selected pagination will be added to your timeline.
6. Your timeline shortcode will be inserted into the page.
7. Click Publish.
8. When you view your published page (or post) you will see your timeline.
Your timeline can be customized using the options in Settings > Cool Timeline Settings.
There are three timeline settings pages:
- General Settings
- Style Settings
- Typography Settings
The general settings is where you configure the broad settings of your timeline including the timeline title, heading style, title alignment, timeline image, how the story is displayed and story order.
You can change these settings at any time by going to Settings > Cool Timelines > General Settings, make your desired changes and then click Save Changes.
The timeline title is displayed at the top of your timeline. By default, your timeline title is Cool Timelines. It can be replaced with any title.
Title Heading Tag and Title Alignment
Controls the heading style of the Timeline title and the alignment of the timeline title.
Timeline default image
The timeline default image allows you to add an image to the top of your timeline.
Number of stories to display
Controls how many stories are displayed in the timeline. If the number of stories is more than the number you’ve selected pagination will be added to your timeline. This can be adjusted when you insert a timeline into a page using the Cool Timeline Shortcode.
Controls the length of the story excerpt displayed in the timeline if you use the short (default) stories description. To display the full story you select Full (with HTML).
Allows you to switch between displaying excerpt of your stories and displaying the full story. By default, an excerpt of the stories is displayed and readers see a Read More link if your story is longer than the content length set.
Change to Full (with HTML) if you want the full stories displayed in the title.
Leave as Yes for Read more if you have Short Default selected in stories description.
By default, stories are displayed in DESC which is reverse chronological order. Change it to ASC if you want to display your timeline in chronological order.
Style settings is used to control the colors used in your timeline.
You can change these settings at any time by going to Settings > Cool Timelines > Style Settings, make your desired changes and then click Save Changes.
The container background is what appears behind your timeline. By default, it is set to No for container background and will use the background color of the page/post content area.
For example, if configured to a background color of light yellow
Your timeline would look like this:
Story Background color, First color and Second color
The story background controls the color of each story container while the first color and second color controls the color of the story titles in the timeline.
Line Color and Circle color
Allows you to adjust the color of the line and the year circle color in the timeline.
For example, when set to the following color options:
It looks like this:
The typography settings enables you to adjust the typography in your timeline.
You can change these settings at any time by going to Settings > Cool Timelines > Typography Settings, make your desired changes and then click Save Changes.