Timeline shortcode for WordPress

The Timeline shortcode for WordPress can be used to display stylish and customizable timeline with as many events as desired. Each event accepts various types of content, from text to images. The timeline offers a new visual approach of organising and viewing events. Check below for example implementations and shortcode documentation:

Timeline Examples

January 2025

January event content here

February 2025

February event content

March 2025

March event content

April 2025

April event content

Timeline Shortcodes

Timeline Shortcode

[x3m-timeline orientation="vertical" line-style="dotted" line-width="2px" line-color="#333"]
  [x3m-event name="January 2025" box-color="#e0f7fa" text-color="#111"]January event content here[/x3m-event]
  [x3m-event name="February 2025" box-color="#ffe0b2" text-color="#111"]February event content[/x3m-event]
  [x3m-event name="March 2025" box-color="#ffe0b2" text-color="#111"]March event content[/x3m-event]
  [x3m-event name="April 2025" box-color="#ffe0b2" text-color="#111"]April event content[/x3m-event]
[/x3m-timeline]

The shortcode can be used to display a timeline with events inside posts or pages of WordPress. This offers a new approach to visualize calendar events or project status. Above example displays a timeline with 4 different events.

Timeline Documentation

Here are the shortcode option settings available for Timeline:

Shortcode Settings	Details
orientation=”vertical”	This is used to set the orientation of the timeline. Only “vertical” option available.
line-style=”dotted”	This is used to set the style of the line used in the timeline (the center line). Options available: – “solid” – “dotted” – “dashed”
line-width=”2px”	This is used to set the width of the timeline line, in pixels (ex “2px”).
line-color=”#333″	This is used to set the color of the timeline line. Color names or HEX color codes can be used to set the desired color.
name=”January 2025″	This is used to set the the title of the event in the timeline.
box-color=”#333″	This is used to set the background color of event box/bubble in the timeline. Color names or HEX color codes can be used to set the desired color.
text-color=”#000″	This is used to set the color of the text in the event box/bubble in the timeline. Color names or HEX color codes can be used to set the desired color.