Menu Close

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

Roja Bharathi
reading-time

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

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.

 

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 &lt; 1) ? &quot;a very quick read&quot; : minutes + &quot; minute read&quot;;

    //display it
    $(&#039;.reading-time&#039;).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 read’ if the minute calculation is less than 1. If it’s greater than 1, it will display ‘x minute read’.

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.

eading-time-wp-plugin-scaled

Here you can select the text that will appear on the 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.

Popular Posts
Total Views: 452
Posted in JavaScript, Web Technologies, WordPress
Tagged , , , , ,

You can also read...