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]
Post Author: Remi

Remi is an expert WordPress developer that coded many great free and premium themes and plugins. His experience on WordPress allows him to produce great stuff and to propose advanced tutorials. (remicorson.com)

Disclosure: This page contains external affiliate links that may result in us receiving a comission if you choose to purchase said product. The opinions on this page are our own. We do not receive payment for positive reviews.
Got something to say? Join the discussion.
  1. Mathew Porter says:
    Now that is a great idea, im sure warning people on how long my blog post ramblings will take to get through would be welcomed.
  2. steve says:
    Thats really great! I want to put a shortcode on my front page, something like [reading_duration id='243'] which would show how long it would take to read the article with the id 243. Any ideas how i can achieve that? do i need to set an attribute to the shortcode, or the entire function? Thanks Steve
    • AJ Clarke says:
      AJ Clarke
      The best thing to do steve would be to use a child theme to modify your parent theme so you can add the shortcode via do_shortcode() in the actual template files or via a hook (Total includes hooks) that way it's dynamic and will display for all posts automatically.
      Admin

Leave a Reply