{"id":273703,"date":"2026-01-27T15:51:36","date_gmt":"2026-01-27T15:51:36","guid":{"rendered":"https:\/\/wordpress.org\/plugins\/deartimeline\/"},"modified":"2026-06-30T13:35:00","modified_gmt":"2026-06-30T13:35:00","slug":"deartimeline","status":"publish","type":"plugin","link":"https:\/\/ps.wordpress.org\/plugins\/deartimeline\/","author":23433661,"comment_status":"closed","ping_status":"closed","template":"","meta":{"version":"1.3.2","stable_tag":"trunk","tested":"7.0","requires":"5.6","requires_php":"7.2","requires_plugins":null,"header_name":"Dear Timeline (Best Vertical & Horizontal Timeline)","header_author":"Ankit Gyanwali","header_description":"A responsive vertical timeline designed for modern WordPress sites.","assets_banners_color":"c2cdd7","last_updated":"2026-06-30 13:35:00","external_support_url":"","external_repository_url":"","donate_link":"","header_plugin_uri":"","header_author_uri":"","rating":5,"author_block_rating":0,"active_installs":0,"downloads":553,"num_ratings":2,"support_threads":0,"support_threads_resolved":0,"author_block_count":0,"sections":["description","installation","faq","changelog"],"tags":{"1.2.0":{"tag":"1.2.0","author":"ankit07721","date":"2026-06-16 02:36:12"},"1.2.1":{"tag":"1.2.1","author":"ankit07721","date":"2026-06-16 02:36:12"}},"upgrade_notice":{"1.3.2":"

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.<\/p>"},"ratings":{"1":0,"2":0,"3":0,"4":0,"5":2},"assets_icons":{"icon-128x128.png":{"filename":"icon-128x128.png","revision":3502210,"resolution":"128x128","location":"assets","locale":"","width":624,"height":647}},"assets_banners":{"banner-772x250.png":{"filename":"banner-772x250.png","revision":3499585,"resolution":"772x250","location":"assets","locale":"","width":1376,"height":768}},"assets_blueprints":{},"all_blocks":[],"tagged_versions":["1.2.0","1.2.1"],"block_files":[],"assets_screenshots":[],"screenshots":{"1":"Live Desktop Preview at the top of the editor.","2":"Premium quick-add modal with glassmorphism design.","3":"Classic layout \u2014 premium zigzag with calendar badges and accent bars.","4":"Horizontal timeline layout with arrow navigation and scroll-snap cards."}},"plugin_section":[],"plugin_tags":[1433,37926,14785,5575,12837],"plugin_category":[],"plugin_contributors":[254778],"plugin_business_model":[],"class_list":["post-273703","plugin","type-plugin","status-publish","hentry","plugin_tags-history","plugin_tags-horizontal-timeline","plugin_tags-roadmap","plugin_tags-timeline","plugin_tags-vertical-timeline","plugin_contributors-ankit07721","plugin_committers-ankit07721"],"banners":{"banner":"https:\/\/ps.w.org\/deartimeline\/assets\/banner-772x250.png?rev=3499585","banner_2x":false,"banner_rtl":false,"banner_2x_rtl":false},"icons":{"svg":false,"icon":"https:\/\/ps.w.org\/deartimeline\/assets\/icon-128x128.png?rev=3502210","icon_2x":false,"generated":false},"screenshots":[],"raw_content":"\n

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 \u2014 CSS Scroll Snap<\/strong> for the horizontal layout and CSS Flexbox\/Grid<\/strong> for vertical layouts \u2014 keeping your pages lightning-fast.<\/p>\n\n

Layouts<\/h3>\n\n
    \n
  • Horizontal<\/strong> [deartimeline layout=\"horizontal\"]<\/code> \u2014 a scroll-snap-powered horizontal track with premium cards, calendar date boxes, color-coded dot markers, and arrow navigation.<\/li>\n
  • Flat<\/strong> [deartimeline layout=\"flat\"]<\/code> \u2014 modern side-by-side image and text cards alternating around a thin vertical spine with scroll-reveal animations.<\/li>\n<\/ul>\n\n

    Premium Admin Experience<\/h3>\n\n

    DearTimeline features a completely redesigned admin interface that lets you manage events directly from a live preview:<\/p>\n\n

      \n
    • Live Preview First<\/strong> \u2014 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.<\/li>\n
    • Inline Quick-Add<\/strong> \u2014 a pulsing \"+\" button on the timeline spine opens a premium glassmorphism modal for adding new events in seconds.<\/li>\n
    • Inline Edit\/Delete<\/strong> \u2014 hover any event card to reveal edit (\u270e) and delete (\u00d7) buttons. Edit opens the same premium modal pre-filled; delete removes with a confirmation prompt.<\/li>\n
    • Premium Modal<\/strong> \u2014 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.<\/li>\n<\/ul>\n\n

      Core Features<\/h3>\n\n
        \n
      • Three Layouts<\/strong>: Horizontal (scroll-snap), Classic (zigzag), Flat (modern cards) \u2014 each with its own distinct premium design.<\/li>\n
      • Classic Layout Redesign<\/strong>: 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.<\/li>\n
      • Per-Event Colors<\/strong>: Custom background color applied to calendar date boxes in all layouts (flat, classic, horizontal).<\/li>\n
      • Centralized Workspace<\/strong>: Manage titles, dates, descriptions, featured images, and custom dimensions from a single dashboard.<\/li>\n
      • Integrated Live Preview<\/strong>: Embedded preview refreshes on save \u2014 see your timeline update in real time.<\/li>\n
      • Scroll Reveal Animations<\/strong>: Vertical items fade and slide in via IntersectionObserver \u2014 choose from fade, flip, or zoom.<\/li>\n
      • Precision Image Controls<\/strong>: Custom width and height per event image with object-fit: cover<\/code>.<\/li>\n
      • CSS Scroll Snap<\/strong>: Horizontal layout uses native browser scroll-snapping \u2014 zero JavaScript slider libraries.<\/li>\n<\/ul>\n\n

        Best Use Cases<\/h3>\n\n
          \n
        • Company History<\/strong> \u2014 showcase your brand's journey with the horizontal layout for decades-long stories or classic for detailed entries.<\/li>\n
        • Product Roadmaps<\/strong> \u2014 keep customers informed about upcoming features and past milestones.<\/li>\n
        • Personal Portfolios<\/strong> \u2014 display career progression or life story in a visually engaging way.<\/li>\n
        • Event Schedules<\/strong> \u2014 multi-day conferences or workshops with swipeable horizontal agenda.<\/li>\n
        • Step-by-Step Guides<\/strong> \u2014 any content that benefits from a left-to-right or top-to-bottom narrative.<\/li>\n<\/ul>\n\n

          Usage<\/h3>\n\n

          Basic Shortcode<\/h3>\n\n
          [deartimeline] (displays Flat layout by default)\n<\/code><\/pre>\n\n
          Switching Layouts<\/h3>\n\n
            \n
          • Horizontal Layout<\/strong>: [deartimeline layout=\"horizontal\"]<\/code> \u2014 scrollable cards on a horizontal spine, CSS Scroll Snap, left\/right nav buttons.<\/li>\n
          • Flat Layout<\/strong>: [deartimeline layout=\"flat\"]<\/code> \u2014 modern side-by-side cards with image and text.<\/li>\n<\/ul>\n\n
            Animations (Vertical layouts only)<\/h3>\n\n
            Choose from professional entrance effects:\n- [deartimeline animation=\"fade-in\"]<\/code> (Default)\n- [deartimeline animation=\"flip-up\"]<\/code>\n- [deartimeline animation=\"zoom\"]<\/code><\/p>\n\n\n
              \n
            1. Upload the plugin files to the \/wp-content\/plugins\/deartimeline<\/code> directory, or install the plugin through the WordPress plugins screen directly.<\/li>\n
            2. Activate the plugin through the 'Plugins' screen in WordPress.<\/li>\n
            3. Use the [deartimeline]<\/code> shortcode in any page or post.<\/li>\n<\/ol>\n\n\n
              \n
              How do I use the shortcode?<\/h3><\/dt>\n
              Simply add [deartimeline]<\/code> to any page or post. By default, this will display all your published timeline events in the Flat layout.<\/p><\/dd>\n
              Can I change the layout?<\/h3><\/dt>\n
              Yes! You can choose between three professional styles:\n- Horizontal<\/strong>: [deartimeline layout=\"horizontal\"]<\/code> \u2014 scrollable card row with arrow navigation. Perfect for mobile-first, swipeable timelines.\n- Classic<\/strong>: [deartimeline layout=\"classic\"]<\/code> \u2014 premium vertical zigzag with refined calendar badges, colored accent bars, and animated entrance.\n- Flat<\/strong>: [deartimeline layout=\"flat\"]<\/code> \u2014 modern card-based layout with side-by-side image and text panels.<\/p><\/dd>\n
              Are there any animation options?<\/h3><\/dt>\n
              For vertical layouts, use the animation<\/code> parameter to pick your entrance effect:\n- [deartimeline animation=\"fade-in\"]<\/code> (Subtle)\n- [deartimeline animation=\"flip-up\"]<\/code> (Dynamic)\n- [deartimeline animation=\"zoom\"]<\/code> (Engaging)<\/p><\/dd>\n
              How do I add or edit events from the admin?<\/h3><\/dt>\n
              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 (\u270e) and delete (\u00d7) buttons. The premium modal handles all CRUD operations with a clean, responsive form.<\/p><\/dd>\n
              Where do I set the image size?<\/h3><\/dt>\n
              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%).<\/p><\/dd>\n
              How does the horizontal layout work without JavaScript?<\/h3><\/dt>\n
              The horizontal timeline uses native CSS scroll-snap-type: x mandatory<\/code> and overflow-x: auto<\/code>. The scroll track works on any device without JavaScript \u2014 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.<\/p><\/dd>\n\n<\/dl>\n\n\n
              1.3.2<\/h4>\n\n
                \n
              • Admin UI Overhaul<\/strong>: Removed \"Event Styling\" metabox; \"Live Desktop Preview\" moved to top priority; inline \"+\" button with \"Add New Event\" label on timeline spine; inline edit (\u270e) and delete (\u00d7) action buttons on hover for both flat and classic layouts.<\/li>\n
              • Quick-Add\/Edit Modal<\/strong>: Premium glassmorphism modal with gradient header, elastic slide-up animation, uppercase labels, smooth focus rings, custom scrollable body, gradient submit button with micro-interactions.<\/li>\n
              • Background Color Everywhere<\/strong>: Custom event background color now applies to date boxes in all three layouts \u2014 flat, classic, and horizontal.<\/li>\n
              • Horizontal Layout Polish<\/strong>: Color applied to calendar month strip; --tsp-bg<\/code> variable set per-item.<\/li>\n
              • Enhanced Hover Effects Across All Layouts<\/strong>: Bouncy card transforms, gradient accent strips, refined shadow stacks.<\/li>\n<\/ul>\n\n
                1.3.1<\/h4>\n\n
                  \n
                • New Horizontal Layout<\/strong>: [deartimeline layout=\"horizontal\"]<\/code> \u2014 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.<\/li>\n
                • 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.<\/li>\n
                • Left\/Right navigation buttons with smart disabled state (hidden at start\/end of track), implemented in lightweight Vanilla JS with requestAnimationFrame throttling.<\/li>\n
                • Enhanced card design across all layouts: refined shadows, smoother hover transitions, and consistent min-height for visual balance.<\/li>\n<\/ul>\n\n
                  1.3.0<\/h4>\n\n
                    \n
                  • Complete flat layout overhaul: modern card-based UI with white cards, rounded corners, and subtle shadows.<\/li>\n
                  • New CSS variables system for easy customization.<\/li>\n
                  • Circular dot markers with indigo accent border instead of square nodes.<\/li>\n
                  • Pill-shaped year separator labels.<\/li>\n
                  • Soft gray central line (configurable).<\/li>\n
                  • Responsive mobile layout: single-sided spine with stacked content.<\/li>\n
                  • Scroll reveal animations via IntersectionObserver.<\/li>\n
                  • Improved zigzag alternation with reliable flexbox ordering.<\/li>\n<\/ul>\n\n
                    1.2.0<\/h4>\n\n
                      \n
                    • Integrated Featured Image selector into the central meta box.<\/li>\n
                    • Added custom Width and Height controls for event images.<\/li>\n
                    • Added \"Live Desktop Preview\" directly to the Event Edit screen.<\/li>\n
                    • Refactored frontend popup to support batch event creation.<\/li>\n<\/ul>\n\n
                      1.1.0<\/h4>\n\n
                        \n
                      • Improved zigzag layout with straight-line alignment.<\/li>\n
                      • Standardized image heights (300px).<\/li>\n
                      • Fixed text domain issues and compliance headers.<\/li>\n<\/ul>\n\n
                        1.0.0<\/h4>\n\n
                          \n
                        • Initial release.<\/li>\n<\/ul>","raw_excerpt":"A premium, responsive timeline plugin for WordPress with three layout modes: Horizontal (scroll-snap), Classic (premium zigzag), and Flat (modern card …","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/ps.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin\/273703","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ps.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin"}],"about":[{"href":"https:\/\/ps.wordpress.org\/plugins\/wp-json\/wp\/v2\/types\/plugin"}],"replies":[{"embeddable":true,"href":"https:\/\/ps.wordpress.org\/plugins\/wp-json\/wp\/v2\/comments?post=273703"}],"author":[{"embeddable":true,"href":"https:\/\/ps.wordpress.org\/plugins\/wp-json\/wporg\/v1\/users\/ankit07721"}],"wp:attachment":[{"href":"https:\/\/ps.wordpress.org\/plugins\/wp-json\/wp\/v2\/media?parent=273703"}],"wp:term":[{"taxonomy":"plugin_section","embeddable":true,"href":"https:\/\/ps.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_section?post=273703"},{"taxonomy":"plugin_tags","embeddable":true,"href":"https:\/\/ps.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_tags?post=273703"},{"taxonomy":"plugin_category","embeddable":true,"href":"https:\/\/ps.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_category?post=273703"},{"taxonomy":"plugin_contributors","embeddable":true,"href":"https:\/\/ps.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_contributors?post=273703"},{"taxonomy":"plugin_business_model","embeddable":true,"href":"https:\/\/ps.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_business_model?post=273703"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}