Dear Timeline (Best Vertical & Horizontal Timeline)
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…
Use with caution
Dear Timeline (Best Vertical &… works, but test it on a staging site before relying on it in 2026. Is rated 5/5 and was last updated 3 months ago, and scores 56/100 on our health check.
- Small user base (<10 active installs)
- Very few reviews so far
How does it stack up?
Side-by-side on installs, updates, ratings & support
Daily downloads
Download spikes usually follow a new release — each site that auto-updates counts as a download.
Rankings
Where Dear Timeline (Best Vertica… stands todayWordPress.org search rankings
Live position in the plugin search, top 100| Keyword | Position |
|---|---|
| history | >100 |
| Horizontal Timeline | #43 |
| roadmap | >100 |
| timeline | >100 |
| vertical timeline | #61 |
Rating breakdown
★★★★★★★★★★ 5 from 2 reviews
About Dear Timeline (Best Vertical & Horizont…
From the official readme · v1.3.2Description
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"]
Installation
- Upload the plugin files to the
/wp-content/plugins/deartimelinedirectory, or install the plugin through the WordPress plugins screen directly. - Activate the plugin through the ‘Plugins’ screen in WordPress.
- Use the
[deartimeline]shortcode in any page or post.
Frequently asked questions
How do I use the shortcode?
Simply add [deartimeline] to any page or post. By default, this will display all your published timeline events in the Flat layout.
Can I change the layout?
Yes! You can choose between three professional styles: – Horizontal: [deartimeline layout="horizontal"] — scrollable card row with arrow navigation. Perfect for mobile-first, swipeable timelines. – Classic: [deartimeline layout="classic"] — premium vertical zigzag with refined calendar badges, colored accent bars, and animated entrance. – Flat: [deartimeline layout="flat"] — modern card-based layout with side-by-side image and text panels.
Are there any animation options?
For vertical layouts, use the animation parameter to pick your entrance effect: – [deartimeline animation="fade-in"] (Subtle) – [deartimeline animation="flip-up"] (Dynamic) – [deartimeline animation="zoom"] (Engaging)
How do I add or edit events from the admin?
In the WordPress admin, open a timeline event. The “Live Desktop Preview” at the top shows your timeline. Click the “+” button on the spine to add a new event, or hover any card to reveal the edit (✎) and delete (×) buttons. The premium modal handles all CRUD operations with a clean, responsive form.
Where do I set the image size?
On the event edit screen, look for the “Image Width” and “Image Height” fields below the title. You can use pixels (e.g., 300px) or percentages (e.g., 100%).
How does the horizontal layout work without JavaScript?
The horizontal timeline uses native CSS scroll-snap-type: x mandatory and overflow-x: auto. The scroll track works on any device without JavaScript — scroll with a trackpad, swipe on mobile, or use the arrow keys. The Vanilla JS layer (for left/right buttons) enhances but never replaces the core scroll experience.
Changelog
Complete classic layout premium redesign, admin UI overhaul with inline add/edit/delete from the live preview, premium quick-add modal, and background color applied to date boxes in all layouts. See changelog for full details.
1.3.2
- Admin UI Overhaul: Removed “Event Styling” metabox; “Live Desktop Preview” moved to top priority; inline “+” button with “Add New Event” label on timeline spine; inline edit (✎) and delete (×) action buttons on hover for both flat and classic layouts.
- Quick-Add/Edit Modal: Premium glassmorphism modal with gradient header, elastic slide-up animation, uppercase labels, smooth focus rings, custom scrollable body, gradient submit button with micro-interactions.
- Background Color Everywhere: Custom event background color now applies to date boxes in all three layouts — flat, classic, and horizontal.
- Horizontal Layout Polish: Color applied to calendar month strip;
--tsp-bgvariable set per-item. - Enhanced Hover Effects Across All Layouts: Bouncy card transforms, gradient accent strips, refined shadow stacks.
1.3.1
- New Horizontal Layout:
[deartimeline layout="horizontal"]— a fully responsive, scroll-snap-powered horizontal timeline. Zero JS slider libraries: uses CSS Flexbox + native Scroll Snap for buttery-smooth mobile swiping and desktop arrow navigation. - Horizontal cards feature a premium gradient accent bar, calendar-style date box (month/day/year), and per-event color-coded dot markers on a gradient spine line.
- Left/Right navigation buttons with smart disabled state (hidden at start/end of track), implemented in lightweight Vanilla JS with requestAnimationFrame throttling.
- Enhanced card design across all layouts: refined shadows, smoother hover transitions, and consistent min-height for visual balance.
1.3.0
- Complete flat layout overhaul: modern card-based UI with white cards, rounded corners, and subtle shadows.
- New CSS variables system for easy customization.
- Circular dot markers with indigo accent border instead of square nodes.
- Pill-shaped year separator labels.
- Soft gray central line (configurable).
- Responsive mobile layout: single-sided spine with stacked content.
- Scroll reveal animations via IntersectionObserver.
- Improved zigzag alternation with reliable flexbox ordering.
1.2.0
- Integrated Featured Image selector into the central meta box.
- Added custom Width and Height controls for event images.
- Added “Live Desktop Preview” directly to the Event Edit screen.
- Refactored frontend popup to support batch event creation.
1.1.0
- Improved zigzag layout with straight-line alignment.
- Standardized image heights (300px).
- Fixed text domain issues and compliance headers.
1.0.0
- Initial release.
For developers
Is this your plugin? Show off the numbers.
Add a live badge to your site, docs or GitHub README. It updates on its own — no account needed.
Best Dear Timeline (Best Vertical… alternatives
All history plugins →
FAQ
Dear Timeline (Best Vertical & Hori…: quick answers
Straight answers, pulled from live WordPress.org data.
Live data from WordPress.org · checked Oct 12, 2026
Is Dear Timeline (Best Vertical &… free?
Yes. Dear Timeline (Best Vertical &… is free to download and use from the official WordPress.org plugin directory.
Is Dear Timeline (Best Vertical &… safe to use in 2026?
Dear Timeline (Best Vertical &… works, but test it on a staging site before relying on it in 2026. Is rated 5/5 and was last updated 3 months ago, and scores 56/100 on our health check.
How many websites use Dear Timeline (Best Vertical &…?
Dear Timeline (Best Vertical &… is active on <10 WordPress websites and has been downloaded 864 times since it launched in January 2026. It was downloaded 90 times in the last 30 days.
Does Dear Timeline (Best Vertical &… work with WordPress 7.1?
Dear Timeline (Best Vertical &… is officially tested up to WordPress 7.0.7, while the latest release is 7.1.3. It may still work, but try it on a staging site first.
What PHP version does Dear Timeline (Best Vertical &… need?
Dear Timeline (Best Vertical &… requires PHP 7.2 or higher. Most hosts run PHP 8.x today, so it works on any modern WordPress hosting.
When was Dear Timeline (Best Vertical &… last updated?
The latest version, 1.3.2, was released on June 30, 2026 (3 months ago).
Who makes Dear Timeline (Best Vertical &…?
Dear Timeline (Best Vertical &… is developed and maintained by ankit07721.
What are the best alternatives to Dear Timeline (Best Vertical &…?
The most popular alternatives to Dear Timeline (Best Vertical &… are WP Activity Log (300K+ installs), Simple History (300K+ installs) and Timeline Widget For Element… (70K+ installs).
Powered by PageForge
Want thousands of pages that rank like these? Build them in an afternoon.
This directory runs on the same engine as PageForge. Turn any spreadsheet, CSV or API into thousands of fast, SEO-ready WordPress pages — with schema, internal links and AI-written copy baked in.
- CSV, Google Sheets & API data sources
- AI content, schema & internal links per page
- Works with Elementor, Gutenberg, Yoast & Rank Math
- Free on WordPress.org — no credit card
