HOMEBlogTutorialsEasily Add WordPress Estimated Reading Time Without Bloated…

Easily Add WordPress Estimated Reading Time Without Bloated Plugins

WordPress Estimated Reading Time

In the fast-paced world of the internet, attention is the most valuable currency. When a visitor lands on your site, they instantly make a subconscious calculation: “Is this worth my time?” One of the most effective ways to answer that question affirmatively is by displaying a WordPress estimated reading time right at the top of your posts.

It’s a subtle psychological trigger. Seeing “3 Min Read” feels manageable, whereas a wall of text without context looks intimidating. While there are dozens of plugins that can achieve this, adding more code overhead to your site can slow down performance.

In this guide, we are going to build a lightweight, custom WordPress estimated reading time function. We will count the words in your post content and automatically display the minutes required to read it before your content begins.

Why “WordPress Estimated Reading Time” Matters for UX and SEO

Before we dive into the code, it is important to understand why this feature is a staple on top-tier publications like Medium and The New York Times.

  1. Respects the User’s Time: It sets clear expectations.
  2. Reduces Bounce Rate: If a user knows a long article is a “10-minute guide,” they are more likely to bookmark it or stay, rather than clicking away immediately out of overwhelm.
  3. Boosts “Time on Page”: By engaging the user immediately, you improve engagement metrics, which are crucial SEO signals.

Calculating the WordPress estimated reading time is actually quite simple math. The average adult reads about 200 to 250 words per minute. Our code will simply count the total words, divide by the average reading speed, and round up to the nearest minute.


Step 1: Accessing Your Theme Functions

To add this functionality without a plugin, we need to edit your theme’s functions.php file.

Note: It is highly recommended to use a Child Theme or a functionality plugin (like Code Snippets) to add this code. If you edit your parent theme directly, your changes will be wiped out when the theme updates.

  1. Log in to your WordPress Dashboard.
  2. Navigate to Appearance > Theme File Editor.
  3. Select functions.php from the right-hand sidebar.

Step 2: The Logic Behind the Code

We are going to create a function that performs three specific tasks to generate the WordPress estimated reading time:

  1. Retrieves the content of the current post.
  2. Strips away HTML tags (so we don’t count code as words).
  3. Counts the words and divides them by a specific words-per-minute (WPM) variable.

We will use the prefix pnet_ for all our functions to ensure there are no conflicts with other plugins or themes.


Step 3: Writing the Calculation Function

Copy and paste the following code block into your functions.php file. This is the engine that drives your WordPress estimated reading time.

PHP
/**
 * Calculate the estimated reading time.
 *
 * @param int $post_id The ID of the post.
 * @return string The estimated reading time text.
 */
function pnet_get_reading_time($post_id) {
    // Get the content of the post
    $content = get_post_field('post_content', $post_id);
    
    // Strip shortcodes and HTML tags to get an accurate word count
    $clean_content = strip_tags(strip_shortcodes($content));
    
    // Count the words
    $word_count = str_word_count($clean_content);
    
    // Average words per minute (WPM)
    $wpm = 200;
    
    // Calculate the time
    $reading_time = ceil($word_count / $wpm);
    
    // Return the time. You can change 'min read' to whatever you prefer.
    if ($reading_time < 1) {
        return 'Less than 1 min read';
    } else {
        return $reading_time . ' min read';
    }
}

Understanding the Code

  • strip_shortcodes: This ensures that if you use complex layout plugins, the raw code isn’t counted as words.
  • $wpm = 200: This is the standard reading speed. If your audience consists of technical skimmers, you might increase this to 250. If you are a photography blog with few words, this logic still holds up.
  • ceil(): This PHP function rounds fractions up. So, if the math results in 1.2 minutes, it displays as 2 minutes.

You might also like:

Empty WooCommerce Cart Programmatically: The Ultimate Guide (2026) [Solved]

Need to Empty WooCommerce Cart Programmatically? Use this simple code snippet to clear customer sessions instantly. Read the step-by-step guide.

Read more →


Step 4: Automatically Displaying the Time

Now that we have the calculation logic, we need to display the WordPress estimated reading time on the front end.

We want this to appear automatically before the content on single blog posts. To do this, we will use the WordPress filter the_content.

Add this code snippet below the previous one:

PHP
/**
 * Prepend the reading time to the post content.
 *
 * @param string $content The post content.
 * @return string The content with the reading time prefixed.
 */
function pnet_add_reading_time_before_content($content) {
    // Only run this on single posts and the main loop
    if (is_single() && is_main_query()) {
        
        // Get the current post ID
        $post_id = get_the_ID();
        
        // Get the reading time using our previous function
        $reading_time = pnet_get_reading_time($post_id);
        
        // Create the HTML wrapper for styling
        $reading_time_html = '<div class="pnet-reading-time">';
        $reading_time_html .= '<span class="dashicons dashicons-clock"></span> '; // Optional icon
        $reading_time_html .= '<strong>Estimated Reading Time:</strong> ' . $reading_time;
        $reading_time_html .= '</div>';
        
        // Combine the reading time HTML with the original content
        return $reading_time_html . $content;
    }
    
    // Return content normally for pages or archives
    return $content;
}

// Hook the function to 'the_content' filter
add_filter('the_content', 'pnet_add_reading_time_before_content');

Why use the_content filter?

Using the filter allows you to inject the WordPress estimated reading time without having to edit your single.php template files. It is the safest way to modify content output programmatically.


Step 5: Creating a Shortcode (Optional)

What if you don’t want the WordPress estimated reading time on every post, or you want to place it manually in a Sidebar or use it with a Page Builder like Elementor or Divi?

We can wrap our logic in a shortcode. Add this final piece of PHP:

PHP
/**
 * Shortcode to display reading time manually.
 * Usage: [pnet_reading_time]
 */
function pnet_reading_time_shortcode() {
    $post_id = get_the_ID();
    $reading_time = pnet_get_reading_time($post_id);
    
    return '<span class="pnet-reading-time-shortcode">' . $reading_time . '</span>';
}
add_shortcode('pnet_reading_time', 'pnet_reading_time_shortcode');

Now, you can place [pnet_reading_time] anywhere on your site to display the count.


Step 6: Styling the Display with CSS

By default, the WordPress estimated reading time will look like plain text. We want it to stand out. Since we added the class pnet-reading-time in our PHP function, we can style it easily.

Go to Appearance > Customize > Additional CSS and add the following:

CSS
.pnet-reading-time {
    background-color: #f0f0f1;
    border-left: 5px solid #0073aa; /* WordPress Blue */
    padding: 10px 15px;
    margin-bottom: 20px;
    font-family: sans-serif;
    font-size: 16px;
    color: #333;
    border-radius: 0 4px 4px 0;
    display: inline-block;
}

.pnet-reading-time strong {
    color: #0073aa;
}

/* Optional: Style for the clock icon if used */
.pnet-reading-time .dashicons {
    font-size: 20px;
    vertical-align: middle;
    margin-right: 5px;
    color: #555;
}

This CSS gives the WordPress estimated reading time a professional “info-box” look that grabs attention without being intrusive.


Troubleshooting Common Issues

Even with clean code, you might run into minor hiccups when implementing your WordPress estimated reading time.

  • It shows “0 min read”: This usually happens if the str_word_count fails to read the content properly. Ensure you are testing on a post that actually has text in the WordPress editor, not just content inside a complex page builder module that hides data from the default loop.
  • It appears on Pages (like About Us): In our code, we used is_single(). If you want it on pages too, change that check to is_singular().
  • The formatting looks broken: Check your CSS class names. Ensure .pnet-reading-time in the CSS matches the class defined in the PHP function.

Conclusion

Congratulations! You have successfully implemented a WordPress estimated reading time feature without relying on third-party plugins. By taking control of the code, you ensure your site remains lightweight and fast.

Not only does this improve your website’s User Experience (UX), but it also helps in retaining visitors, which is a key factor in SEO ranking. The WordPress estimated reading time is a small detail, but in the competitive world of content creation, these small details compound to create a loyal audience.

Would you like me to write a follow-up tutorial on how to add a “Progress Bar” that fills up as the user scrolls down the page? Let me know in the comments!

You might also like:

The Ultimate Guide to WooCommerce Product Custom Fields: Let Users Customize Product

Learn how to add and use WooCommerce Product Custom Fields across product, cart, checkout, and order details. A complete developer-friendly...

Read more →

Abhik

🚀 Full Stack WP Dev | ☕ Coffee Enthusiast | 🏍️ Biker | 📈 Trader
Hi, I’m Abhik. I’ve been coding since 2007, a journey that began when I outgrew Blogger and migrated to a robust self-hosted stack. That transition introduced me to WordPress, and I’ve been building professional solutions ever since.

Leave a comment