ibrahimhalefoglu

ReadSpan adds two lightweight engagement features to your WordPress site:
Reading Time Badge 
A pill-shaped badge that displays estimated reading time, injected before, after, or both sides of post content. Supports three SVG icons (clock, book, stopwatch), custom colors, shapes, padding, and font size. Works via shortcode too.
Scroll Progress Bar 
A fixed-position progress bar (top or bottom of the viewport) that fills as the reader scrolls. Supports solid color, gradient, configurable height, and a real-time countdown feature in the badge.
Highlights
<ul>
<li>Zero JavaScript dependencies — vanilla JS, passive scroll listener with requestAnimationFrame throttle</li>
<li>CSS custom properties for instant style updates</li>
<li>24 configurable settings via a clean 3-tab admin UI with live preview</li>
<li>Mobile hide option (below 768 px)</li>
<li>Dark mode admin UI (prefers-color-scheme: dark)</li>
<li>Shortcode <code>[readspan]</code> support</li>
<li>PHP 7.4 compatible, no Composer required on production</li>
<li>Follows WordPress Coding Standards and DDD architecture</li>
</ul>

ReadSpan — Customizable Reading Time Badge & Progress Bar

Show a reading time badge and a scroll progress bar on your posts and pages — fully customizable from the admin panel.

Raúl Rojas

Most websites have no memory. Visitors return and see the same content with no recognition of what they’ve already explored. LekTrail changes that.
For content sites: Show readers which articles they started but didn’t finish, and suggest new content based on their history.
For e-commerce: Display recently viewed products so customers can easily return to items they were considering.
For courses and documentation: Track progress through lessons or guides, showing what’s completed and what’s next.
<h4>How It Works</h4>
LekTrail tracks when visitors scroll through your content:
<ul>
<li>Viewed: Posts they started reading</li>
<li>Completed: Posts they scrolled to the end (configurable threshold)</li>
<li>Suggestions: Unread posts based on your configuration</li>
</ul>
The widget displays three sections: “Continue Reading”, “Completed”, and “Suggested Reading”.
<h4>Two Tracking Modes</h4>
localStorage Mode (Default)
<ul>
<li>Works for all visitors, no login required</li>
<li>Data stored in browser, completely private</li>
<li>Optional consent banner</li>
<li>Data clears if browser storage is cleared</li>
</ul>
Server-Side Mode
<ul>
<li>Requires logged-in users (WordPress users or membership plugin)</li>
<li>Reading history persists across devices</li>
<li>Useful for membership sites, courses, or personalized experiences</li>
<li>Anonymous visitors see suggestions only</li>
</ul>
<h4>Features</h4>
<ul>
<li>Gutenberg block and shortcode support</li>
<li>Works with any post type (posts, pages, products, custom types)</li>
<li>Configurable scroll threshold to mark content as “completed”</li>
<li>Show/hide excerpts and thumbnails</li>
<li>Suggestion order: random, recent, or related</li>
<li>Category filters for suggestions</li>
<li>Customizable labels (multilingual ready)</li>
<li>Optional consent requirement with built-in banner</li>
<li>Performance caching for suggestions</li>
</ul>
<h4>Development</h4>
Source code and build tools are available on <a href="https://github.com/raulprdev/lektrail" rel="nofollow ugc">GitHub</a>.

LekTrail Reading Tracker

Show visitors what they've read, what they started, and what to read next.

ReadSpan — Customizable Reading Time Badge & Progress Bar vs LekTrail Reading Tracker