A scroll-driven, horizontal timeline of hobbies (or anything else with a start, an end, and a story) for WordPress. Edit entries from the admin, drop it on any page with a shortcode.
The GitHub repo is named
wp-timeline(historical). The WordPress plugin slug ishobby-timeline— that's what shows up on wordpress.org and in/wp-content/plugins/.
- Renders a horizontal timeline that scrolls horizontally as the visitor scrolls the page vertically.
- Each entry is a colored pill anchored to a date range. Hovering (or tapping on mobile) opens a card with a note.
- Supports on-again / off-again entries with multiple stints; gaps between stints render as dotted bridges.
- Status colors, headings, scroll feel, and the whole hobby list are edited from Settings → Hobby Timeline — no JS or HTML to touch.
- Mobile-aware: swipe to pan instead of scroll, with sensible auto-release at the ends so the page can still scroll past.
- Privacy-friendly: no external requests by default (Google Fonts is an opt-in checkbox; falls back to system serif + monospace).
See docs/install.md for the click-through.
git clone https://github.com/bkahan/wp-timeline.git
cp -r wp-timeline /path/to/wp-content/plugins/hobby-timelineThen activate in Plugins and configure under Settings → Hobby Timeline.
Place the shortcode anywhere a shortcode is allowed (post, page, Custom HTML block, etc.):
[iht_timeline]
The shortcode takes no attributes. All configuration lives on the admin page.
| Field | Notes |
|---|---|
| Name | The thing you do. |
| Status | current / paused / left / dabbled. Controls the pill color + legend label. |
| Note | Short blurb shown in the hover/tap card. Basic HTML (<a>, <em>, <strong>) allowed. |
| Dates | YYYY-MM (e.g. 2021-09) or just YYYY (= January). |
| Single period | A start and (optional) end. Leave the end blank for ongoing. |
| Multiple periods | A list of stints — gaps render as dotted bridges on the timeline. |
- Shortcode (
[iht_timeline]) outputs the scaffold + pre-rendered header (no flash of empty content), enqueues CSS/JS only on pages that use it, and injects the entries/statuses/config viawp_localize_scriptaswindow.IHT_DATA. - Admin page stores everything in three
wp_optionsrows:iht_hobbies,iht_status,iht_config. - Frontend renderer (
assets/js/iht.js) builds the bars, axis, cards, and label-clipping logic; the canvas istranslate3d'd as the page scrolls. - Sanitization: text fields via
sanitize_text_field, notes viawp_kses_post(safe HTML allowed), colors viasanitize_hex_color, dates via aYYYY[-MM]regex. Nonce + capability checks on save. - Uninstall (
uninstall.php) is multisite-aware: removes the three options on every site in the network.
hobby-timeline/
├── hobby-timeline.php # plugin header + bootstrap + textdomain
├── uninstall.php # removes options on plugin delete (multisite-aware)
├── readme.txt # WordPress.org-format readme
├── README.md # this file
├── LICENSE # GPLv2
├── docs/
│ ├── install.md # zip-install walkthrough
│ └── images/ # screenshots
├── includes/
│ ├── class-defaults.php # seeded example hobbies
│ ├── class-data.php # get/save/sanitize wp_options
│ ├── class-assets.php # registers + enqueues frontend assets
│ ├── class-shortcode.php # [iht_timeline] handler (+ [wp_timeline] alias)
│ └── class-admin.php # Settings page + repeater UI
├── assets/
│ ├── css/wptl.css # frontend styles (scoped to #iht-root)
│ ├── css/iht-admin.css # admin UI styles
│ ├── js/wptl.js # frontend renderer
│ └── js/iht-admin.js # admin repeater UI
└── languages/
└── hobby-timeline.pot # translation template
- One timeline per page (uses fixed element IDs). Multi-instance support is on the list.
- Four fixed status keys (
current,paused,left,dabbled) with editable labels + colors. Adding/removing statuses is on the list.
Built by Ben Kahan.