Reading Time

How it works?

The Reading Time plugin intercepts HTML output during site generation and scans your content using CSS selectors you specify. It counts words based on your configured reading speed (default: 210 words per minute), optionally adds time for images and videos, then injects a formatted label at your chosen location. The entire process happens app-side, so your visitors receive clean, fast-loading HTML with the reading time already included.

The plugin intelligently handles content extraction by targeting specific containers (like .content__entry) while excluding unwanted sections (like table of contents or footers). It respects HTML structure, correctly processes nested elements, and automatically falls back to common content tags if custom selectors don’t match.

Key features:

• Flexible Content Selection: Target specific content containers using CSS selectors (supports multiple selectors, classes, IDs, and complex combinations). The plugin includes fallback detection for standard HTML5 elements like article, main, and body to ensure reliable operation even with minimal configuration.
• Smart Content Exclusion: Remove specific sections from word counting using exclude selectors. This is useful for elements like table of contents, sidebars, footers, or any content that shouldn’t factor into reading time. The plugin removes entire nested structures, not just hiding them visually.
• Customizable Counting Rules: Configure words-per-minute reading speed, choose whether to count images and videos, set how many seconds each media element adds, and decide whether to treat iframes (like YouTube embeds) as videos. You can also include image alt text in word counts for more accurate estimates.
• Precise Time Calculation: Control rounding behavior (round up, down, or to nearest minute) and set minimum/maximum minute values to keep displayed times within sensible ranges. The plugin provides three values for templating: rounded minutes, exact decimal minutes, and total seconds.
• Universal Plural Support: Define separate label templates for different minute counts (one, few, many, other) to properly handle pluralization in any language. The plugin uses simple deterministic rules (1 → one, 2-4 → few, ≥5 → many) that work well for languages with complex plural forms like Polish, or Czech. All templates support placeholders: {m} for rounded minutes, {exact} for decimal precision, {sec} for total seconds.
• Flexible Label Placement: Choose where the reading time appears using target selectors, then control insertion mode (before, after, prepend, or append to the target element). The plugin automatically adjusts insertion behavior when mixing inline and block elements to prevent layout breaks.
• Clean HTML Output: Customize the wrapper tag (span, div, or any HTML element) and CSS class applied to the reading time label. The plugin generates semantic HTML with proper ARIA labels for accessibility and preserves any existing CSS classes on targeted elements.
• Granular Control: Enable reading time separately for posts and pages. You can display estimates on blog posts while excluding pages like About or Contact, or vice versa.
• Debug Mode: When enabled, detailed logs show exactly what the plugin is counting (words, images, videos), how calculations are performed, and the final output for each page.

Why consider this plugin?

• Better User Experience: Reading time estimates help visitors decide whether to read now or save content for later, improving engagement and reducing bounce rates.
• Complete Control: Unlike basic reading time solutions, this plugin lets you fine-tune every aspect of calculation and display to match your content type and audience needs.
• No Client-Side JavaScript: Since everything happens during build, your pages load faster and work perfectly even with JavaScript disabled or on readers that block scripts.
• Works With Any Theme: Because you define selectors and CSS classes yourself, the reading time integrates naturally with any theme structure and styling.