A comprehensive database for everything WordPress related.

TOP
WPKlik Logo Newsletter

Sign up and receive a free copy of How to Create an online Store with WooCommerce (full guide)

Display estimated read time for blog posts

How to Display Estimated Reading Time on Blog Posts

If you run a WordPress blog, you are probably trying to find different plugins and snippets in order to keep your visitors busy and encourage them to read your posts without clicking away.

Nowadays, visitors often want to get as much information as possible by just skimming through a page. Displaying estimated reading time for a post is very handy for this. In this way, a visitor will know how much time they need for obtaining information by reading a topic of interest. In turn, this will also encourage blog writers to write posts that will be more interesting and less time-consuming. Also, as a blog owner, you’ll be in a position to determine the best approach if you check the metrics and compare the time the visitors spend on different posts.

Some plugins certainly cover this functionality, but the WordPress function that handles this is very simple to use. Therefore, there’s no need to clog up your blog with another plugin just for this purpose.

In order to easily understand this method, we’ll explain it by integrating changes into the free WordPress Twenty Sixteen theme.

Let’s start with the function

if( !function_exists('content_estimated_reading_time') ) {
/**
Function that estimates reading time for a given $content.
@param string $content Content to calculate read time for.
@paramint $wpm Estimated words per minute of reader.
@returns int $time Esimated reading time.
*/
function content_estimated_reading_time( $content = '', $wpm = 200 ) {
$clean_content= strip_shortcodes( $content );
$clean_content= strip_tags( $clean_content);
$word_count= str_word_count( $clean_content);
$time = ceil( $word_count/ $wpm );
$output = '<span class="read-time-holder">';
$output .= '<span class="read-time">' . $time .'</span>' .' ';
$output .= '<span class="read-text">' . esc_attr__('min read', 'twentysixteen' ) . '</span>';
$output .='</span>';
return $output;
}
}

The function accepts two parameters – content ($content) and estimated words per minute of reader ($wpm). The second parameter is set to 200 for an average reader, but you can set it to some other value. You can gather some useful info about this on the internet.

Inside the function, we need to strip content from everything else except the words themselves. So first, we will be using two functions for stripping shortcodes and tags (strip_shortcodes and strip_tags).

Afterwards, we need to count the words in the cleaned content. Therefore, we will store the content in a $word_count variable. The function for counting words used here is str_word_count.

In order to calculate the average reading time, we only need to divide the word count by words read per minute, while ceil function used here is for rounding up the result.

The second part of the function is just for outputting the html with time and text that follow.

To integrate the function into your theme, just add it at the end of functions.php file for the theme that you are currently using.

As you can see, the whole logic behind the average reading time is very simple. Still, the function won’t do anything by itself. That’s why in order to display it on your blog list or single posts, we need to call it first.

Calling the function

There are different ways in which you can put the function to work. We will cover three of them below.

1. Echo it

Commonly, the easiest way for a vast majority of users is to call the function directly from inside the file where they need it. Say that, for example, you need to call the function inside the single.php file, which is a template for displaying single posts. This simply means that you need to open this file, and then echo the function there with post content as parameter, like this:

<?php echo content_estimated_reading_time( get_the_content() ); ?>

This is of course if you have a loop and all the structure inside the single.php file, but most likely, you won’t. An example of the structure can look like this:

2. Use filter

Modern and better coded themes separate these modules into different files. Therefore, a better method is to use filter, and to return the content with addition of the filter function. The subject on how to add filter has already been covered widely on the internet.

3. Modify existing function for more control

This is probably the best approach because you can have more control for positioning the output. In Twenty Sixteen theme, there is a function responsible for printing categories and tags for each post on the list and single posts. It is a twentysixteen_entry_taxonomies function. All that’s left for you to do is to simply copy and paste it inside functions.php and modify its last part with our function for estimated reading time call.

We’d like to briefly mention that since we kept the same name for the function, it will override the original one. Now, the function with our modification in it will be executed in all places within the theme.

Changed functions should look like this:

/**
* Function override of default function in parent theme
* Adding reading time function at the end
*/
function twentysixteen_entry_taxonomies() {
$categories_list= get_the_category_list( _x( ', ', 'Used between list items, there is a space after the comma.', 'twentysixteen' ) );
if ( $categories_list&&twentysixteen_categorized_blog() ) {
printf( '<span class="cat-links"><span class="screen-reader-text">%1$s </span>%2$s</span>',
_x( 'Categories', 'Used before category names.', 'twentysixteen' ),
$categories_list
);
}
$tags_list= get_the_tag_list( '', _x( ', ', 'Used between list items, there is a space after the comma.', 'twentysixteen' ) );
if ( $tags_list&& ! is_wp_error( $tags_list) ) {
printf( '<span class="tags-links"><span class="screen-reader-text">%1$s </span>%2$s</span>',
_x( 'Tags', 'Used before tag names.', 'twentysixteen' ),
$tags_list
);
}
/*our code modification to this function*/
print content_estimated_reading_time(get_the_content());
}

In this way, we will output the reading time in the part with tags and categories where it belongs.

display estimated read time

The code inside Twenty Sixteen theme’s functions.php file should look like this:

estimated read time
if ( !function_exists('content_estimated_reading_time') ) {
/**
Function that estimates reading time for a given $content.
@param string $content Content to calculate read time for.
@param int $wpm Estimated words per minute of reader.
@returns int $time Esimated reading time.
*/
function content_estimated_reading_time( $content = '', $wpm = 200 ) {
$clean_content = strip_shortcodes( $content );
$clean_content = strip_tags( $clean_content );
$word_count = str_word_count( $clean_content );
$time = ceil( $word_count / $wpm );
$output = '<span class="read-time-holder">';
$output .= '<span class="read-time">' . $time . '</span>' . ' ';
$output .= '<span class="read-text">' . esc_attr__( 'min read', 'twentysixteen' ) . '</span>';
$output .= '</span>';
return $output;
}
}
/**
* Function override of default function in parent theme
* Adding reading time function at the end
*/
function twentysixteen_entry_taxonomies() {
$categories_list = get_the_category_list( _x( ', ', 'Used between list items, there is a space after the comma.', 'twentysixteen' ) );
if ( $categories_list && twentysixteen_categorized_blog() ) {
printf( '<span class="cat-links"><span class="screen-reader-text">%1$s </span>%2$s</span>',
_x( 'Categories', 'Used before category names.', 'twentysixteen' ),
$categories_list
);
}
$tags_list = get_the_tag_list( '', _x( ', ', 'Used between list items, there is a space after the comma.', 'twentysixteen' ) );
if ( $tags_list && ! is_wp_error( $tags_list ) ) {
printf( '<span class="tags-links"><span class="screen-reader-text">%1$s </span>%2$s</span>',
_x( 'Tags', 'Used before tag names.', 'twentysixteen' ),
$tags_list
);
}
/*our code modification to this function*/
print content_estimated_reading_time(get_the_content());
}

Preferably, this modification should be done in the child theme.

When adding the estimated reading time function into different themes, please have in mind that the best ways of integrating function call may vary. Try to take some time by browsing through the steps that we’ve covered in order to find the best approach.

We hope that you found this article to be helpful. If you liked it, please feel free to check out some of these articles as well!

Newsletter

WordPress perfection at your fingertips.

If you enjoyed this article, feel free to subscribe to our newsletter using the form below. You can also follow us on Facebook and Twitter and subscribe to our YouTube channel for WordPress video tutorials.

Leave a Reply