web_timeline Shortcode
The web_timeline shortcode presents an ordered sequence of milestones. Cards alternate around a central axis on larger screens and stack below 768px. For visual Gutenberg authoring, use Timeline and Timeline item.
The attributes below match the current Page Builder controls and public output. Use raw syntax only for reviewed content that cannot be maintained through the visual controls.
Usage
[web_timeline items="%5B%7B%22title%22%3A%22Launch%22%2C%22description%22%3A%22Our%20first%20release.%22%2C%22date%22%3A%222026%22%7D%5D"]items is a URL-encoded JSON array, normally managed by the Page Builder's repeatable item controls. The example decodes to [{"title":"Launch","description":"Our first release.","date":"2026"}]. An empty shortcode creates no milestone cards. Item order is preserved.
Attributes
| Attribute | Default | Accepted values | Purpose |
|---|---|---|---|
id |
Empty | Unique HTML ID | Optional direct-link target on the wrapper. |
additional_classes |
Empty | Space-separated CSS classes | Existing wrapper helpers. |
title_wrapper_color |
15 |
Palette slot 1–15, or empty | Title background. |
title_text_color |
11 |
Palette slot 1–15, or empty | Title text. |
description_wrapper_color |
13 |
Palette slot 1–15, or empty | Description background. |
description_text_color |
11 |
Palette slot 1–15, or empty | Description text. |
date_wrapper_color |
13 |
Palette slot 1–15, or empty | Date background. |
date_text_color |
11 |
Palette slot 1–15, or empty | Date text. |
items |
Empty | URL-encoded JSON array | Ordered item records described below. |
Cleared colors omit the corresponding text-main-N or bg-main-N class. They do not generate inline styles. This shortcode does not expose a separate device-visibility attribute.
Item fields
| Field | Default | Purpose |
|---|---|---|
title |
Empty | Milestone title; safe inline formatting is allowed. |
description |
Empty | Description with inline emphasis and links. |
date |
Empty | Visible free-text label, such as Spring 2026. |
additional_classes |
Empty | Existing helpers on this item's li. |
title_tag |
h3 |
Semantic title level: h2, h3, h4, h5 or h6. Visual size remains H3. |
date_time |
Empty | Optional valid YYYY-MM-DD calendar date. Adds a time element around a nonempty visible label, without changing item order. |
Content allows passive inline markup rather than scripts, embedded content or event handlers. Date labels use paragraphs with H4 appearance, not heading elements. Invalid calendar metadata is omitted without removing its visible label.
Customize the stylesheet
Go to Settings → POM Theme → Advanced → Custom CSS, expand Shortcode CSS assets, and open Timeline. The comparison shows the readable CSS generated by the current theme beside the editable source. Saving creates an optimized per-site replacement for the existing web-timeline stylesheet; reverting restores the current timeline.min.css asset.
The replacement changes CSS only. It does not change web_timeline, item parsing, titles, descriptions, dates, palette classes, IDs or request conditions. Target .web-timeline > ul > li for item geometry, .content > .h3 for titles and .date > .h4 for labels so the stylesheet supports every semantic title level and paragraph dates. Keep nested content selectors scoped to their intended children. Pages without Timeline content load no Timeline stylesheet, and the module has no dedicated JavaScript.
Verification
Verify web_timeline with at least three items so both odd and even layouts are represented. Check the central axis, item order, content card, point, date, palette classes, id, additional_classes, and per-item classes. After editing the stylesheet, confirm that a page containing the shortcode uses the managed CSS while a page without it still loads no Timeline asset.