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.[social-icon-message st_type="evernote" message="Clip to Evernote"]
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.
[cposhort_focus color="light" background="#E3E3E3" style="shadow"]"Reading time can help a reader draw these conclusions and actually increase time spent on site."[/cposhort_focus]
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?
Comments: