Title: Dear Timeline (Best Vertical & Horizontal Timeline) Author: ankit07721 Published: 2026(e)ko urtarrilaren 27(a) Last modified: 2026(e)ko ekainaren 26(a) --- Bilatu pluginak ![](https://ps.w.org/deartimeline/assets/banner-772x250.png?rev=3499585) ![](https://ps.w.org/deartimeline/assets/icon-128x128.png?rev=3502210) # Dear Timeline (Best Vertical & Horizontal Timeline) [ankit07721](https://profiles.wordpress.org/ankit07721/)-(r)en eskutik [Deskargatu](https://downloads.wordpress.org/plugin/deartimeline.zip) * [Xehetasunak](https://eu.wordpress.org/plugins/deartimeline/#description) * [Berrikuspenak](https://eu.wordpress.org/plugins/deartimeline/#reviews) * [Instalazioa](https://eu.wordpress.org/plugins/deartimeline/#installation) * [Garapena](https://eu.wordpress.org/plugins/deartimeline/#developers) [Laguntza](https://wordpress.org/support/plugin/deartimeline/) ## Deskripzioa 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. ### Horizontal Timeline Layout (NEW) ``` [deartimeline layout="horizontal"] ``` A fully responsive, scrollable horizontal timeline that rivals premium competitors without their bloat. Built with: * **CSS Scroll Snap** — native browser scroll-snapping for butter-smooth card-by- card navigation. Swipe on mobile, scroll on desktop. Zero kilobytes of JavaScript. * **Left/Right Arrow Buttons** — lightweight Vanilla JS for desktop users. Smart button states: auto-disabled at the start/end of the track. Uses `requestAnimationFrame` throttling for zero layout thrashing. * **Premium Cards** — each event renders as a white rounded card with a gradient accent bar at the top, a calendar-style date box (month/day/year), event title, description, and optional featured image with hover zoom. * **Horizontal Spine** — a gradient line passes through color-coded dot markers( one per event). Each dot takes the event’s custom color from the “Event Styling” meta box. * **Hidden Scrollbar** — the track stays clean and premium on all browsers. Overflow is handled by native scroll, not ugly third-party scrollbars. * **Mobile-First** — cards snap to 260px on mobile, 280px on desktop. Navigation buttons shrink fluidly. The result: a performant, beautiful horizontal timeline that works on every device without weighing down your page. ### Vertical Layouts For traditional timelines, choose between two polished vertical styles: * **Classic** `[deartimeline layout="classic"]` — calendar-box dates (month badge + day number) that alternate left and right around a central spine with square dot markers. * **Flat** `[deartimeline layout="flat"]` — modern side-by-side cards: image on the left, text card on the right, alternating in a zigzag pattern around a thin vertical spine. This layout includes scroll-reveal animations via IntersectionObserver. Both vertical layouts feature year separator labels, configurable per-event background colors, and responsive mobile stacking (single-sided spine, content below). ### Why DearTimeline Plugin for WordPress? Most timeline plugins clutter your workflow with the complex Block Editor or weigh down your pages with bloated scripts. DearTimeline provides a simplified, centralized“ Event Styling” dashboard and uses lightweight, modern CSS techniques for butter- smooth performance on any device. ### Core Features (Explained) * **Horizontal Layout**: A sleek, scrollable horizontal timeline using native CSS Scroll Snap — no jQuery UI, no Slick.js, no bloat. Navigate with buttons or swipe. Each card gets a gradient accent bar, calendar-style date box, and a color-coded dot on the spine. * **Classic Vertical Layout**: Calendar-box style dates with zigzag alternation around a central spine. Clean, editorial look. * **Flat Vertical Layout**: Modern card-based layout with side-by-side image and text panels, automatic zigzag, and scroll-reveal animations. * **Centralized Workspace**: Say goodbye to the Block Editor. Manage titles, dates, descriptions, and images from a single, high-priority dashboard in your admin screen. * **Integrated Live Preview**: An embedded “Live Desktop Preview” appears directly below your editor, showing your changes instantly as you save. * **Frontend Batch Creation**: Use the unique “Add New Event” popup on your website to add multiple events at once using a repeater-style form. * **Precision Image Controls**: Every event image can have its own custom width and height, rendered with `object-fit: cover` to ensure professional cropping without distortion. * **Per-Event Color**: Each event supports a custom background (vertical layouts) or dot color (horizontal layout) for visual distinction. * **Scroll Reveal Animations**: Vertical timeline items fade and slide in as the user scrolls, powered by IntersectionObserver — choose from fade, flip, or zoom. ### Best Use Cases * **Company History**: showcase your brand’s journey from day one to today — the horizontal layout is perfect for decades-long stories. * **Product Roadmaps**: Keep your customers informed about upcoming features and past milestones. The scroll-snap horizontal timeline makes roadmap browsing feel natural and fluid. * **Personal Portfolios**: Display your career progression or life story in a visually engaging way — choose horizontal for a modern, magazine-style layout or vertical for a classic timeline. * **Event Schedules**: Perfect for conferences or multi-day workshops. The horizontal layout lets attendees swipe through the agenda day by day. * **Horizontal Timelines**: Any content that benefits from a left-to-right narrative— annual reports, project phases, step-by-step guides. ### 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. * **Classic Layout**: `[deartimeline layout="classic"]` — calendar-box style dates with zigzag alternation. * **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"]` ## Instalazioa 1. Upload the plugin files to the `/wp-content/plugins/deartimeline` directory, or install the plugin through the WordPress plugins screen directly. 2. Activate the plugin through the ‘Plugins’ screen in WordPress. 3. Use the `[deartimeline]` shortcode in any page or post. ## MEG ### 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"]` — calendar- box style dates with zigzag alternation around a central spine. – **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 multiple events at once? On the frontend of your site (when logged in as an admin), click the “Add New Event” button. Use the “+ Add Another Event” button in the popup to fill out multiple entries before hitting “Publish.” ### Where do I set the image size? Inside the “Event Styling” box on the Edit screen, look for the “Image Width” and“ Image Height” fields. 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. ## Berrikuspenak ![](https://secure.gravatar.com/avatar/c049c1885018fa3377f85739a3edc6202bb4b395798bcb2f458e68068f7ef49b? s=60&d=retro&r=g) ### 󠀁[Amazing Product](https://wordpress.org/support/topic/amazing-product-69/)󠁿 [rohan002](https://profiles.wordpress.org/rohan002/) 2026(e)ko urtarrilaren 30( a) Best fit for my site, perfectly aligned and supportive developer. ![](https://secure.gravatar.com/avatar/a2b4a8c0bd6a5294e4200561fec4bd62b9fbed2b07f2c78e43bb5d81a3edcd6a? s=60&d=retro&r=g) ### 󠀁[Very fast and responsive plugin](https://wordpress.org/support/topic/very-fast-and-responsive-plugin/)󠁿 [a2zsolution](https://profiles.wordpress.org/a2zsolution/) 2026(e)ko urtarrilaren 29(a) So today I used this plugging in my site , and it was very fast and responsive . I am very satisfied with it. [ Irakurri 2 berrikuspenak ](https://wordpress.org/support/plugin/deartimeline/reviews/) ## Laguntzaileak eta Garatzaileak “Dear Timeline (Best Vertical & Horizontal Timeline)” software librea da. Ondoko pertsonek egin dizkiote ekarpenak plugin honi. Laguntzaileak * [ ankit07721 ](https://profiles.wordpress.org/ankit07721/) [Itzul zaitez Dear Timeline (Best Vertical & Horizontal Timeline) zure hizkuntzara.](https://translate.wordpress.org/projects/wp-plugins/deartimeline) ### Garapena interesatzen zaizu? [Araka kodea](https://plugins.trac.wordpress.org/browser/deartimeline/), begiratu [SVN biltegia](https://plugins.svn.wordpress.org/deartimeline/) edo harpidetu [garapen erregistrora](https://plugins.trac.wordpress.org/log/deartimeline/) [RSS](https://plugins.trac.wordpress.org/log/deartimeline/?limit=100&mode=stop_on_copy&format=rss) bidez. ## Aldaketen loga #### 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. ## Meta * Version **1.3.1** * Azken eguneraketa **duela 3 egun** * Instalazio aktiboak **10 baino gutxiago** * WordPress bertsioa ** 5.6 edo handiagoa ** * **7.0** (e)raino probatuta. * PHP bertsioa ** 7.2 edo handiagoa ** * Language * [English (US)](https://wordpress.org/plugins/deartimeline/) * Etiketak * [history](https://eu.wordpress.org/plugins/tags/history/)[Horizontal Timeline](https://eu.wordpress.org/plugins/tags/horizontal-timeline/) [roadmap](https://eu.wordpress.org/plugins/tags/roadmap/)[timeline](https://eu.wordpress.org/plugins/tags/timeline/) [vertical timeline](https://eu.wordpress.org/plugins/tags/vertical-timeline/) * [Ikuspegi aurreratua](https://eu.wordpress.org/plugins/deartimeline/advanced/) ## Balorazioak 5 out of 5 stars. * [ 2 5-star reviews ](https://wordpress.org/support/plugin/deartimeline/reviews/?filter=5) * [ 0 4-star reviews ](https://wordpress.org/support/plugin/deartimeline/reviews/?filter=4) * [ 0 3-star reviews ](https://wordpress.org/support/plugin/deartimeline/reviews/?filter=3) * [ 0 2-star reviews ](https://wordpress.org/support/plugin/deartimeline/reviews/?filter=2) * [ 0 1-star reviews ](https://wordpress.org/support/plugin/deartimeline/reviews/?filter=1) [Your review](https://wordpress.org/support/plugin/deartimeline/reviews/#new-post) [See all reviews](https://wordpress.org/support/plugin/deartimeline/reviews/) ## Laguntzaileak * [ ankit07721 ](https://profiles.wordpress.org/ankit07721/) ## Laguntza Zerbait duzu esateko? Laguntza behar? [Ikusi laguntza foroa](https://wordpress.org/support/plugin/deartimeline/)