How to add estimated reading time to your posts and pages

by

When I read long form content, I like it when the writer took the effort to add the estimated reading time to the article. Maybe it’s because I’m used to reading books on my Kindle, I just like to know what I’m up against.

Some time ago, I decided I wanted to have this feature added to the blog posts on my main agency site.

There are quite a few plugins in the Plugin Directory that will add the estimated reading time to your site. But come on, do you really want to add a plugin for that one gimmicky thing you want to add to your site?

As a rule, when I want – or need – to add a small feature to a website, I start by looking around for a snippet of code that does the trick. In this case, I found that Devin Price posted the solution I was looking for on GitHub.

The PHP function

Copy the following PHP code snippet to your functions.php file:

* Calculate the estimated reading time for a given piece of $content.
*
* @param string $content Content to calculate read time for.
* @param int $wpm Estimated words per minute of reader.
*
* @returns	int $time Estimated reading time.
*/
function site_estimated_reading_time( $content = '', $wpm = 250 ) {
    $clean_content = strip_shortcodes( $content );
    $clean_content = strip_tags( $clean_content );
    $word_count = str_word_count( $clean_content );
    $time = ceil( $word_count / $wpm );
    return $time;
}

The function takes the average number of words adults read per minute as a value. According to Iris Reading, the average reading speed of most adults is around 200 to 250 words per minute. College students are faster readers at around 300 words per minute. I use 250 as the average ($wpm = 250), but you can change that number to whatever you feel corresponds with your target audience.

The rest of the function is quite easy to follow:

  1. First, the function cleans the content from any shortcodes and HTML tags that should not be counted.
  2. Then the function counts the number of words in the clean content.
  3. The estimated reading time gets calculated by dividing the number of words by the number of words per minute.
  4. The function lastly returns the resulting time variable.

Inserting the function

I inserted the function into a div that I added to the after_entry_title hook, so it appears below the post title. I give the div a class named reading-time so I can easily style the text using CSS:

<div class="reading-time">
    Est. reading time: <?php echo site_estimated_reading_time( get_the_content() ); ?> minutes
</div>

Most themes give you easy access to the WordPress hooks (GeneratePress, my main theme, makes it very easy with the use of Elements), but there are other ways to add code to hooks.

Styling the text

The reading time below the post title is styled like your main content. Since it’s an extra feature I don’t want to attract all the attention to, I made it look more demure by changing the color to grey and reducing the font size to 85%:

/* Styling for estimated reading time */
.reading-time {
    color: #888;
    font-size: 85%;
}

Are you using an average reading time calculation on your articles? If so, how have you solved this issue? If not, what is your reasoning for not adding this feature to your site? Leave your thoughts in the comments below.