Helping you build a better website
(and other interesting web stuff)

CSSHTMLJavaScriptjQueryMSSQLMySQLPHPSilvaTechnologiesWordpress
Silva Web Designs - Blog

How to Add An Estimated Post Reading Time To Your WordPress Posts

Have you ever wanted to display an estimated post reading time to your WordPress blog posts? If so, you are in the right place; an estimated reading time encourages your visitors to read a blog post instead of clicking away. In this article, we will show you two methods of adding an estimated post reading time to your WordPress posts. The first method will be using custom code with Countable and the second method is the WordPress Plugin method. If you don’t feel confident adding custom code to your blog, we would definitely recommend the Plugin option.

How does it work?

Reading speed is measured in words per minute (wpm). The average person reads between 200 and 250 wpm. As such the formula for the reading time is nothing more than the number of words in your blog post divided by the reading speed of an average person.


                                                  total words
reading time  =    round (------------------------------)
                                                  reading speed

On our blog we use 200 wpm, so even if you’re just reading it at a steady pace, you should be able to read it in the displayed amount of time.

So let’s dive right into it…

1. Adding Estimated Post Reading Time in WordPress using Countable

To implement this, we will be using JavaScript, it’s the simplest way to process your text on the site once it is rendered.

The first thing to do is to count the number of words of your post. You should have one DOM element which contains your post body. In our case, it is wrapped between:


<div id="blog-content">
     .....
</div>

So to count the words, we will be using Countable.

Countable is a JavaScript function to add live paragraph-, word- and character-counting to an HTML element. Countable is a zero-dependency library and comes in at 1KB when minified and gzipped.

In our case, all we have to do is count the words once so that we can calculate the reading time based on this value, to start we can use:


Countable.count($('#blog-content')[0], function (counter) {
	console.log(counter);
});

counter is an object with the following properties:


all: 9966
characters: 8681
paragraphs: 114
sentences: 121
words: 1253

Now that we have the count of words, we can calculate the reading time in minutes using the code below:


Countable.count($('#blog-content')[0], function (counter) {
    var wpm = 200,
        estimatedRaw = counter.words / wpm,
        minutes = Math.round(estimatedRaw);

    var effectiveTime = (minutes < 1) ? "a very quick read" : minutes + " minute read";

    //display it
    $('.reading-time').html(effectiveTime);
});	

To display the reading time, now we can simply add the following HTML where we want to display the text:


    <p class="reading-time"></p>

.
We also added a condition to display 'a very quick ready' if the minute calculation is less than 1. If it's greater than 1, it will display 'x minute read'.

and that's it!

2. Adding Estimated Post Reading Time in WordPress with a Plugin

First thing you need to do is install and activate the Reading Time WP Plugin.

Once activated, navigate to Settings » Reading Time WP page to configure plugin settings.

Here you can select the text that will appear on screen for reading time and minutes. You can also adjust the reading speed. By default, the plugin calculates reading time by estimating 300 words per minute reading speed.

If you don't want to automatically show reading time next to each post, then you can uncheck 'Insert Reading Time before content' and 'Insert Reading Time before excerpt' options.

The plugin offers a shortcode that you can then manually insert into posts where you want to display reading time.

Don't forget to click on the 'Update Options' button to store your settings.

You can now visit your website to see reading time next to your blog posts.


And that's it! We hope you have now learned how to display estimated post reading time in your WordPress posts.

If you liked this article, then please leave a comment below.

Nathan da Silva - Profile

Posted by: Nathan da Silva

Nathan is the Founder of Silva Web Designs. He is passionate about web development and web site design. His expertise is WordPress & Magento as well as many other frameworks. Would you like to work with Nathan? Send him an email on [email protected]

It’s good to share

Join the discussion