Post Reading Duration WordPress Shortcode

I saw a few days ago a website providing a little extra information on the top of the page: the estimated time to read the page. I found it funny and wanted to create something similar using a WordPress shortcode.

This is pretty easy to do, so let’s start!

Step 1: Create A Plugin

As usual we are going to create a plugin, so, create a new folder under wp-content/plugins, and call it “post-reading-duration-shortcode“, open it, and create a file called “post-reading-duration-shortcode.php“. Open the file and paste this code:

<?php
/*
Plugin Name: Post Reading Duration Shortcode
Plugin URL: http://remicorson.com/
Description: Display the estimated time to read the post
Version: 0.1
Author: Remi Corson
Author URI: http://remicorson.com
Contributors: corsonr
Text Domain: rc_prds
Domain Path: languages
*/

Once you save the file you should see the plugin listing on the plugins page.

Step 2: Create The Shortcode

Basically the plugin will provide a simple shortcode without attribute. The text will be encapsulated between the shortcode tags themselves.The shortcode will display on the frontend the time visitors need to read the post. To create the shortcode, use this code:

/**
 * Register the shortcode
 *
 * @access      public
 * @since       1.0 
 * @return      void
*/
function rc_prds_add_reading_duration_shortcode( $atts, $content = null ) {
	return '<span class="reading_duration">'.$content.'</span>';
}

add_shortcode("reading_duration", "rc_prds_add_reading_duration_shortcode");

You can save the file. If you add to a post or a page the shortcode [reading_duration]Estimated reading time: XX[/reading_duration], it should show “Estimated reading time: XX” encapsulated into a “span” tag.

The next step is to modify the shortcode to display the real estimated time needed to read the page or the post, according to a predefined number of words read per minute.

To do so, we have to make the shortcode code evolve. We need to get the post ID (to retrieve the number of words in the post using str_word_count()), and we need to define a number of words people usually read in one minute. Let’s say 200 words per minute.

/**
 * Register the shortcode
 *
 * @access      public
 * @since       1.0 
 * @return      void
*/
function rc_prds_add_reading_duration_shortcode( $atts, $content = null ) {

	global $post;
	
	// Get Post ID
	$post_id = $post->ID;
	
	// Words read per minute (you can set your own value)
	$words_per_minute = 200;
	
	// Get estimated time
	$estimated_reading_time = rc_prds_get_post_reading_time( $post_id, $words_per_minute );
	
	return '<span class="reading_duration">'.$content.' '.$estimated_reading_time.'</span>';
}

add_shortcode("reading_duration", "rc_prds_add_reading_duration_shortcode");

Step 3: The Counter Function

As you can see there’s an undefined function: rc_prds_get_post_reading_time(). This is the function that will return the estimated time you need to read the post. Let’s create it:

/**
 * Get post reding time
 *
 * @access      public
 * @since       1.0 
 * @return      void
*/
function rc_prds_get_post_reading_time( $post_id, $words_per_minute ){

	// Get post's words
	$content     = get_the_content( $post_id );
	$count_words = str_word_count( strip_tags( $content ) );
	
	// Get Estimated time
	$minutes = floor( $count_words / $words_per_minute);
	$seconds = floor( ($count_words / ($words_per_minute / 60) ) - ( $minutes * 60 ) );
	
	// If less than a minute
	if( $minutes < 1 ) {
		$estimated_time = __( 'Less than a minute', 'rc_prds' );
	}
	
	// If more than a minute
	if( $minutes >= 1 ) {
		if( $seconds > 0 ) {
			$estimated_time = $minutes.__( 'min', 'rc_prds' ).' '.$seconds.__( 'sec', 'rc_prds' );
		} else {
			$estimated_time = $minutes.__( 'min', 'rc_prds' );
		}
	}
	
	return $estimated_time;
}

Basically, the function counts the number of words in “get_the_content()”, then count number of minutes and seconds needed to read the post. The last part is just a simple way to display the correct message depending on the values of $minutes and $seconds.

We could go further, and add hours needed to read the post but I’m not sure at 100% that it’s mandatory!

You can now fully use the shortcode by simply adding:

[reading_duration]Estimated Reading Time:[/reading_duration]