How to Create Timeline Via Shortcode?

Cool Timeline allows you to display your timelines inside pages, posts, or even widgets using shortcodes without needing to use any third-party blocks.

What is Timeline Shortcode?

A shortcode is a simple code snippet that you can insert into your WordPress posts, pages, or widgets to display timelines. Think of it as a command that tells WordPress, “show my timeline here in this style, with these specific settings.

Add Timeline Shortcode in Classic Editor

If you are using the Classic Editor, follow these steps to add your timeline:

• Open your page/post in Classic Editor.
• Click on the Add Timeline button in the toolbar (as shown in the editor screenshot).

• A pop-up will appear with the available timeline settings.
• Configure the timeline according to your requirements.
• Once you are satisfied with the settings, click Insert Shortcode.
• The timeline shortcode will now be added to your page or post.

Add Timeline Shortcode in Gutenberg

If you are using the Gutenberg Block Editor, you can add your timeline using the Story Timeline Shortcode block.

• Open any page or post in the Gutenberg editor.
• Click on the “+” Add Block button.

• Search for “Timeline” and select the Story Timeline Shortcode.
• The shortcode will be added to your page.
• Configure the available options according to your requirements.
• Once you are satisfied, publish or update the page.

Shortcode Attributes

Now, you can customize your shortcode using the following shortcode attributes:

Shortcode Attribute/Settings	Default Value	Available Options	Description
Timeline Categories	category=”timeline-stories”	All Dynamic Categories List	Display stories from a specific category, or by default, all categories are shown.
Timeline Layouts	layout=”default”	Default Vertical Timeline Horizontal Timeline One-side Timeline Compact Timeline	Choose the timeline layout from Vertical, Horizontal, One-sided, and Compact layout.
Timeline Designs	designs=”default”	Default Flat Design Classic Design Elegant Design Clean Design Modern Design Minimal Design Simple Design	Select your preferred timeline design style. Each design gives a different visual look to your timeline.
Timeline skins	skin=”default”	Default  Dark  Light	Change the color theme of your timeline. You can use light, dark, or the default color style.
Date Formats	date-format=”default”	F j January 1 (F j) F j Y January 1 2019 (F j Y) Y-m-d 2019-01-01 (Y-m-d) m/d/Y 01/01/2019 (m/d/Y) d/m/Y 01/01/2019 (d/m/Y) F j Y g:i A January 1 2019 11:10 AM (F j Y g:i A) Y 2019(Y) Custom	Choose how dates appear in your stories. You can also use your own custom date format.
Timeline Based On	based=”default”	Default  Custom	Select whether your timeline is based on story dates or custom order.
Stories Per Page	show-posts=”10″	1-50	Set how many stories to display per page. Pagination appears after this number.
Pagination Settings	pagination=”default”	Off  Ajax Load More	Choose your pagination type: “off” to disable pagination or “ajax-load-more” to load more stories with AJAX.
Icons	icons=”NO”	No Yes	Show or hide icons in timeline stories. By default, a simple dot is shown.
Stories Description	story-content=”short”	Short Full	Show a short description or full story content (with HTML).
Stories Order	order=”DESC”	DESC ASC	Arrange your timeline stories in ascending or descending order.
Category Filters Settings	filters=”no”	No Yes	Enable or disable category filters on your timeline.
Compact Layout	Date&Title position compact-ele-pos=”main-date”	On top date/label below title On top title below date/label	(Only for Compact Layout) Choose the position of the date and title: main-date = date on top, title below; main-title = title on top, date below.
Animation	animation=”none”	None zoom-in fade flip-right zoom-out fade-up fade-down fade-left fade-right fade-up-right fade-up-left fade-down-right fade-down-left flip-up flip-down flip-left slide-up slide-left slide-right flip-left zoom-in-up zoom-in-down slide-down zoom-in-left zoom-in-right zoom-out-up zoom-out-down zoom-out-left zoom-out-right	Add Animations Effect Inside Timeline.
Connector Style	connector=”none”	arrow line none	Choose the pointer connector style.
Equal Height Cards	equal-height=”false”	True False	Controls whether horizontal timeline story cards have equal heights. Set to true to enable equal-height cards. This setting applies to horizontal timelines.
Timeline Width	timeline-width=”full”	full custom	Set the timeline container width to full or custom. Full width spans the available content area, while custom width uses a maximum width.
Custom Timeline Width	timeline-custom-width=””	400–1920 px	Set the maximum width of the timeline in pixels when timeline-width="custom" is selected.
Story Padding	story-padding=””	0–48 px	Set the inner spacing around story content in pixels. Leave empty to use the default spacing for the selected design.
Story Margin	story-margin=””	0–160 px	Set the spacing between timeline stories in pixels. Leave empty to use the design default. This setting is not available for the compact layout.
Story Line Gap	story-line-gap=””	0–120 px	Set the horizontal gap between the timeline line or icon area and story cards in pixels.
Icon Position	icon-position=””	0–100	Adjust the position of the timeline icon or dot in pixels.
Image Fit	object-fit=””	cover contain fill none scale-down	Control how story images fit inside their containers.