Lately, I have been seeing estimated read times near post titles. It went like “2 min read”, “5 min red” , and as a reader it felt good to know how much time I’am going to waste on some random article ? .
So I have decided pass on the luxury ???? . It must be obvious by now that this blog runs on wordpress. There are many plugins available to add this feature to a wordpress blog, but ???? you know…
How to create a wordpress plugin?
It may seem like an uphill task, but actually you can finish one in a few minutes. To learn more, buy my eBook wordpress plugins for dumm.. ? , ehmmm a little bit of PHP and HTML and you are good to go.
For a detailed and fairly simple documentation go to wordpress.com. Start here – Writing a plugin.
You need to add the necessary header and license information on top of your main PHP page for wordpress to identify it as a plugin.
It would look something like this –
<?php /* Plugin Name: Calc read time Plugin URI: http://jijnasu.in/wp-content/uploads/2016/10/Calc-read-time.zip Description: Estimates read time for posts and shows it near post titles. Version: 1 Author: Jijnasu Author URI: http://jijnasu.in/ License: GPL2 License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: wporg Domain Path: /languages */
The read time plugin
Estimating the read time
After time and brain intensive calculations, I have come to the conclusion that an average adult can read about 200-250 words per minute (wpm).
Link to my research material – Average reading speed.
So we get the number of words in an article, divide it by 250 and we have our average reading time. As simple as that.
But that’s in english, in PHP it would look like
$post = "Hi guys, today let's talk about the top ten reasons why jijnasu.in is the best blog in the world"; $post_word_count = str_word_count($post); $words_read_per_min = 250; $words_read_per_sec = 250 / 60; $post_read_time_in_sec = ceil($post_word_count / $words_read_per_sec);
PHP – str_word_count.
WordPress integration
WordPress gives events we can register different functions on, like the events in javascript (in usage).
There are two types of events
- add_action ( string $tag, callable $function_to_add, int $priority = 10, int $accepted_args = 1 )
- add_filter ( string $tag, callable $function_to_add, int $priority = 10, int $accepted_args = 1 )
$tag represent the event.
Let’s add a filter
add_filter( 'wp_insert_post_data', 'calc_read_time_calc', 1, 2 );
The function ‘calc_read_time_calc’ would run everytime a post is inserted or updated. The event name being ‘wp_insert_post_data’.
The calc_read_time_calc function
<?php // function to save word count of posts function calc_read_time_calc($data, $postarr) { $post_word_count = str_word_count($data['post_content']); // update meta data if exists else update // meta_key: calc_read_time_word_count // meta_value : $post_word_count if (!add_post_meta($postarr['ID'], 'calc_read_time_word_count', $post_word_count, true)) { update_post_meta($postarr['ID'], 'calc_read_time_word_count', $post_word_count); } return $data; }
On insert or update of posts the word count is calculated and saved as meta data with key calc_read_time_word_count .
Showing it to the reader
We can doing this by adding one more filter
add_filter( 'the_title', 'calc_read_time_add_read_text_in_title', 1, 2 );
With this filter we can update the post title (the_title) before printing it on the screen.
We would use the calc_read_time_add_read_text_in_title ? function, to append read time to the post title.
The calc_read_time_add_read_text_in_title function
<?php // function to append read time // to the post title function calc_read_time_add_read_text_in_title($title, $post_id) { // add read time to only posts // and not pages or other stuff // also not in admin pages if (get_post_type($post_id) != 'post' || is_admin()) { return $title; } // retrive word count saved // as meta data $word_count = get_post_meta($post_id, 'calc_read_time_word_count', true); // if word count was not set // set it for this post if (empty($word_count)) { calc_read_time_calc(array( 'post_content' => get_post_field('post_content', $post_id) ) , array( 'ID' => $post_id )); $word_count = get_post_meta($post->ID, 'calc_read_time_word_count', true); } $word_count = (int)$word_count; if ($word_count == 0) { return $title; } // append word count to the title return $title . '<span class="calc_read_time_shower_title_span">' . calc_read_time_create_text($word_count) . '</span>'; }
If word count was not set for some post, it would be set inside this function.
If you paid any attention at all, which is highly unlikely, u must have noticed another function calc_read_time_create_text at the end.
It is used to calculate the reading time with the word count as input.
The calc_read_time_create_text function
<?php // function to calculate // read time with word_count function calc_read_time_create_text($post_word_count) { // words read per minute $wpm = 240; // words read per second $wps = $wpm / 60; $secs_to_read = ceil($post_word_count / $wps); $read_time_text = $secs_to_read < 60 ? $secs_to_read . ' sec' : round($secs_to_read / 60) . ' min'; $read_time_text.= ' read'; // ex - 5min read return $read_time_text; }
Ideally the user should be able to set the words read per minute, but let’s look at it later.
And finally let’s add some CSS.
The style sheet
.calc_read_time_shower_title_span{ display: block; font-size: 15px; background: inherit; color: inherit; }
Adding style sheets in wordpress
add_action( 'wp_enqueue_scripts', 'calc_read_time_add_styles' );
Use the add action to add style-sheets or scripts to your pages.
The calc_read_time_add_styles function
function calc_read_time_add_styles() { wp_enqueue_style('calc-read-time-styles', plugin_dir_url(__FILE__) . 'calc-read-time-styles.css', array() , null); }
Notes
- The function names must be unique.
- The style-sheet names must be unique.
- The plugin folder name should not contain spaces. Replace spaces with hyphens. Ex- ‘calc-read-time’ not ‘Calc read time’.
- Zip the plugin folder and upload it to your wordpress site.
Download the plugin – calc-read-time.
Download it on wordpress.org – Calc Read Time
Good day ????