How to add estimated reading time to your WordPress posts
Display time to read to increase engagement

how to add Estimated Reading Time to your website

Age of Article Warning:
This article was originally published 35 months ago. The information, tips and techniques explained may outdated. Examples shown on this page may no longer work. Please consider this when viewing the below content.

Not everyone will agree with the subheading of this article, but hear me out. How often does a child say “Are we there yet?” when on a driving holiday. How often do we type into Google “How long does it take to fly from point A to point B?”

Or how often do we stand in a queue wondering how much time will pass before it’s our turn. How often do we ask “how long will it take”?

You get the point! No one wants to wait, we live in a society where time is our most limited resource.

So when I see websites like Medium.com that include the estimated time to read an article, I understand why they think that it’s important.

Reason 1: Time Management

We are constantly fighting the hands of the clock. This is why time management ideas are so popular. Possibly the most limiting resource we have is time. We are often on the lookout for ways to save time.

If I only have half hour lunch break, I’m not going to sit down to a banquet. If my bedtime is in an hour, I’m not going to start watching an epic 3 hour movie.

However, if I have 5 minutes to spare before my next appointment, I might decide to read a quick blog post. But how do I know how long it’s going to take me to read?

Well my first instinct would be to scroll to the bottom of the page to see how much content is in the article.

So if I land on a blog post and the estimated reading time is shown to me, then this might be what either makes me decide to keep on reading, or save it for later or immediately bounce off the page.

Reason 2: How deep is the article

This one is definitely subjective, and each person will interpret quantity vs quality differently, but this can be indicative of how informative the post might be. Of course it is up to you to make sure that your posts are good quality, as this is more important than how big a post is.

A technical tutorial might be seen as more extensive if the reading time is higher, so this could appeal to someone looking for more indepth articles. Whereas a quick and easy guide would attract those who want something short and simple to follow.

“Reading time can help a reader draw these conclusions and actually increase time spent on site.”

How to add estimated reading time to your website articles

Well option 1 would be to go down the path of adding a WordPress plugin, a quick search will reveal some options here.

Option 2 could be to count up how many words on your page, estimate how many words you can read in a minute, and then divide by this. Or you could also time yourself reading the article. Then just add it manually to the start of your blog article.

However I prefer something a little more automated (saves time) so here is my preference – option 3. I chose with my website to try out a jQuery script called “Reading Time” by Michael Lynch, which is a lightweight script for estimating reading time and adding it to your website.

It’s a relatively simple procedure to include the script using the WordPress enqueue scripts function, customising the script settings and adding to the pages you want to display “time to read”, and then including a little code in your template where you’d like it to appear.

Step 1: Download the jQuery file readingTime.js from github.com/michael-lynch/reading-time, then FTP upload to your theme folder. To keep your jQuery scripts organised I always recommend adding them into a “js” folder inside your childtheme folder. I added the file into a folder called “readingtime” and then added that into “js” folder.

Step 2: enqueue the script by adding the following PHP function to your childtheme’s functions.php file.

function enqueue_readingtime() {
    wp_enqueue_script(
        'readingtimejs',
         get_stylesheet_directory_uri().'/js/readingTime/readingTime.js',
         array('jquery'),
         '',
         true);
}
add_action('wp_enqueue_scripts','enqueue_readingtime');

Make sure to amend the path to your readingTime.js file, if you uploaded into a different folder location. We include a dependency of “jquery” so the script loads after jQuery, and set to true so that it loads in the footer.

Step 3: setup the script settings.
Here you can customise to suit your preferences. You can choose things like whether you want to include word count, the text displayed before the time shown, the word count, the ids or classes that you will target for displaying the output, and other cool stuff. Read up more about it on the author’s page.

For this blog I decided to only display the reading time only on my posts, and to count the number of words in the main div which has a class of “post-content”. For reading speed “wordsPerMinute” I decided that since my blog is more technical than say a food blog or a travel blog, therefore people will read slower to comprehend so I went with a reading speed of 180 wpm, rather than the default of 270 wpm.

Here is my code below, again you need to add this to your functions.php file. Be sure to modify for your website.

function readingtime_posts() {
    if (is_single() && wp_script_is('readingtimejs','done')) {
        ?><script type="text/javascript">jQuery(document).ready(function($) {
$('.post-content').readingTime({
    readingTimeTarget: '.reading-eta',
    wordCountTarget: '.word-count',
    wordsPerMinute: 180,
    round: true,
    prependTimeString: 'Time to Read: '
});
});</script><?php
}}
add_action('wp_footer','readingtime_posts',100);

Step 4: add some code where you’d like to show your reading time display.
This is the final step in the process and we’ll add some selectors based on our script code above.

<?php if (is_single()) {
    echo '<div style="clear:both;"><span class="reading-eta"></span> (<span class="word-count"></span> Words)</div>';
} ?>

The first span class of “reading-eta” is for the time display, and needs to match “readingTimeTarget” value in the previous code. The second span class of “word-count”, needs to match the value for “wordCountTarget” and is obviously the number of words in your content. Your content will be the div class that you chose for your selector, so in my code above I used “.post-content” but you should choose the div class that your post content is contained in. It could be “.entry-content” or “article” or maybe something else.

So that’s how you do it. Be sure to adjust your reading speed based on your type of content that you write about on your blog.

What do you think? Is this something you’d like to implement on your own website. Do you find it useful on websites like Medium that use reading time estimates?

Filed under: WordPressTagged with: , ,

6 Comments

  1. I notice the estimated time and the count of words of your article David and so nice to see the uniqueness. This is great for the readers, knowing that they have a brief hint on how to manage their time properly and how many times they will spend upon reading the article. Thanks David and also please feel free to reach our site at

    • Thanks John for your thoughts

  2. Hey David,

    Visiting your blog for the first time, amazing tutorial – never thought about this earlier,

    I have seen several sites mention “reading time” on articles, surely it is good to have a basic idea of about how long the post can take to read in full.

    Thank you for sharing the coders, seems fairly straightforward to implement. However, will look for a plugin to do this.

    thanks,
    Uttoran Sen,

    • Thanks for your feedback Uttoran and happy you found the tutorial good. What plugin did you decide to go with?

  3. Wow this is something really very interesting to try.

    I was not posting much on my website blog but now I have published a few important posts on it. I am already tracking it using Google Analytics. But now I will definitely going to try this.

    Thanks for sharing David.

    • Thanks Niki, good to keep track of your website traffic. Interesting exercise if you implement “reading time” is to compare the average time on a page in Google Analytics vs the estimated reading time for that page. It will give you an idea of whether people are reading through to the end of your articles.


Comments are closed for this article!