DearTimeline lets you create beautiful, responsive timelines with zero bloat. Unlike other plugins that ship heavy JS slider libraries (Slick.js, Owl Carousel), DearTimeline uses pure CSS techniques — CSS Scroll Snap for the horizontal layout and CSS Flexbox/Grid for vertical layouts — keeping your pages lightning-fast.

Layouts

Horizontal [deartimeline layout="horizontal"] — a scroll-snap-powered horizontal track with premium cards, calendar date boxes, color-coded dot markers, and arrow navigation.
Flat [deartimeline layout="flat"] — modern side-by-side image and text cards alternating around a thin vertical spine with scroll-reveal animations.

Premium Admin Experience

DearTimeline features a completely redesigned admin interface that lets you manage events directly from a live preview:

Live Preview First — the “Live Desktop Preview” metabox sits at the top of the editor, refreshed on every save so you see changes instantly without leaving the page.
Inline Quick-Add — a pulsing “+” button on the timeline spine opens a premium glassmorphism modal for adding new events in seconds.
Inline Edit/Delete — hover any event card to reveal edit (✎) and delete (×) buttons. Edit opens the same premium modal pre-filled; delete removes with a confirmation prompt.
Premium Modal — the quick-add/edit modal features a gradient glass header, elastic slide-up animation, uppercase labels with smooth focus rings, custom scrollbar, and a gradient submit button.

Core Features

Three Layouts: Horizontal (scroll-snap), Classic (zigzag), Flat (modern cards) — each with its own distinct premium design.
Classic Layout Redesign: Clean calendar badge with colored month strip, 2px gradient spine line, 14px refined dot with hover glow, white card with 3px colored accent bar on hover, and staggered entrance animations.
Per-Event Colors: Custom background color applied to calendar date boxes in all layouts (flat, classic, horizontal).
Centralized Workspace: Manage titles, dates, descriptions, featured images, and custom dimensions from a single dashboard.
Integrated Live Preview: Embedded preview refreshes on save — see your timeline update in real time.
Scroll Reveal Animations: Vertical items fade and slide in via IntersectionObserver — choose from fade, flip, or zoom.
Precision Image Controls: Custom width and height per event image with object-fit: cover.
CSS Scroll Snap: Horizontal layout uses native browser scroll-snapping — zero JavaScript slider libraries.

Best Use Cases

Company History — showcase your brand’s journey with the horizontal layout for decades-long stories or classic for detailed entries.
Product Roadmaps — keep customers informed about upcoming features and past milestones.
Personal Portfolios — display career progression or life story in a visually engaging way.
Event Schedules — multi-day conferences or workshops with swipeable horizontal agenda.
Step-by-Step Guides — any content that benefits from a left-to-right or top-to-bottom narrative.

Usage

Basic Shortcode

[deartimeline] (displays Flat layout by default)

Switching Layouts

Horizontal Layout: [deartimeline layout="horizontal"] — scrollable cards on a horizontal spine, CSS Scroll Snap, left/right nav buttons.
Flat Layout: [deartimeline layout="flat"] — modern side-by-side cards with image and text.

Animations (Vertical layouts only)

Choose from professional entrance effects:
– [deartimeline animation="fade-in"] (Default)
– [deartimeline animation="flip-up"]
– [deartimeline animation="zoom"]

Dear Timeline (Best Vertical & Horizontal Timeline)