How to Add a “Reading Time” Estimator to WordPress (No Plugins)

In a world of short attention spans, transparency is your best friend. Big platforms like Medium and BBC News have popularized the “Reading Time” tool because it gives the user an estimation of how much content is ahead.

By adding a simple, lightweight script to your WordPress posts, you can display an estimated reading time right under your title. This tutorial shows you how to build a smart estimator that handles different reading speeds and has five ultra-cool styles to match your site’s theme.

The Reading Time Logic

The science behind this is simple: the average adult reads at a speed of about 200 to 250 words per minute. Our script calculates the total word count within your article, divides it by a good speed, and rounds it to the nearest minute.

Build Your Custom Estimator

Use the tool below to generate your code. Each style is unique, from a minimal “pill” design to a high-tech “Night Glow” version.

<!-- START READ TIME ESTIMATOR -->
<div id="read-time-box">
    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg>
    <span id="read-time-display">Calculating...</span>
</div>

<script>
document.addEventListener("DOMContentLoaded", function() {
    const content = document.querySelector(".entry-content, article, .post-content") || document.body;
    const text = content.innerText || "";
    const words = text.trim().split(/\s+/).length;
    const time = Math.max(1, Math.ceil(words / 225));
    document.getElementById("read-time-display").innerText = time + " Min Read";
});
</script>

<style>
    #read-time-box {
        display: inline-flex; align-items: center; gap: 8px; font-family: sans-serif; font-weight: 600; font-size: 14px; padding: 8px 12px; margin-bottom: 20px; transition: all 0.3s ease;
        background: #f1f5f9; color: #475569; border-radius: 6px;
    }
</style>
<!-- END READ TIME ESTIMATOR -->

How to Install the Estimator in WordPress

Setting this up is straightforward and doesn’t require editing your theme’s deep files.

Step 1: Copy Your Code

Use the generator above to pick your favorite style and click the copy icon.

Step 2: Add to Your Post

1. Open any post in the WordPress Editor (Gutenberg).
2. Click the (+) icon to add a new block and search for Custom HTML.
3. Paste your code into the block.
4. Move the block to the very top of your post, usually right under the main title or featured image.

Step 3: Preview and Test Update your post and view it. The “Calculating…” text will disappear in a split second as the script counts your words and replaces it with the final time.

Customizing the Reading Speed

In the code, you will see the number 225. This is the average words-per-minute (WPM) for a standard adult reader.

• For Technical Content: If you write complex tutorials, change 225 to 180. This gives readers a more realistic expectation of a slower, deeper read.
• For Light Content: If you write quick news or gossip, change 225 to 275.

Why This Beats a Plugin

Every plugin you add to WordPress adds a lot of code. Most Read Time plugins load their own CSS files, font files, and tracking scripts that fire on every single page load.

By using this manual script:

• Performance: It only runs once the page is loaded and adds nearly zero weight to your site.
• Security: You aren’t relying on a third-party developer to keep their code updated.
• Full Control: You own the design. You aren’t stuck with whatever basic grey text the plugin developer decided on.

FAQ