When you attract a visitor to your website, you want them to stick around for as long as possible and the more informed your visitors are, the more engaged they will become. Adding an Estimated Reading Time to your WordPress posts enables your visitors to know how much time they need to invest reading your content. Building engagement between your content and the website visitor will increase loyalty thus increasing the time they spend on your website and the amount of content consumed.
The explosion of visitor expectation of determining how much time they need to investment reading an article, has lead to the widespread adoption across the internet of websites add the estimated reading time feature. An average person will read at 240 words per minute (roughly 2 minutes per page) with a comprehension rate of about 60%, however, research has shown that reading speeds drop by about 25% when reading on a computer screen rather paper.
In this guide, we will show you how to easily add an Estimated Reading Time to your WordPress posts using either the Reading Time WP plugin or by creating our own WordPress function using functions.php and then customise it using Font Awesome icon and CSS styling.
Important
In this tutorial, we'll be directly editing WordPress theme files and we recommend that you create a child theme of your existing parent theme. By using a child theme you will be able to apply modifications without altering the parent theme files and ensuring any changes you make are kept following any parent theme updates.
Note
If you don't feel comfortable with editing the functions.php file directly, we would recommend you use the Code Snippets plugin. This plugin will enable you to easily add, manage and delete WordPress code snippets from your dashboard. To find out more about adding custom code snippets using a plugin see our tutorial How to Add Custom Code Snippets to WordPress with the Code Snippets Plugin for more information.
Add Estimated Reading Time using Plugin
The plugin we will be using to add Estimated Reading Time into your WordPress posts is Reading Time WP. We have chosen the Reading Time WP plugin due to it simplicity to configure, is regularly updated and offer user customisations. You can choose to display the Estimated Reading Time in your WordPress posts automatically or manually using it’s in-built shortcode.
To get started, you will need to install and activate the plugin.
Once activated, you will need to navigate to Settings > Reading Time WP to open the plugin configuration panel.
In the Reading Time WP settings panel, you can change the text that appears before the reading time and change the reading time prefix. You can also adjust the reading speed, the default is 300 words per minute, therefore, increasing or decreasing the Estimated Reading Time calculation.
Now you can customise where the Estimated Reading Time is displayed. If you want to automatically insert Estimated Reading Time before each post and show on the post excerpt, then you will need to click the checkboxes. Similarly, if you only want the Estimated Reading Time before each post but not displayed on the post except, the you will only need to click that checkbox. Also choose to exclude images from the reading time calculation or choose to include any shortcode in your WordPress post or pages.
You can choose where you want Estimated Reading Time to be displayed such as all posts and pages. However, typically pages in WordPress are geared towards pages such as about us or contact us and wouldn’t necessarily want to add an Estimated Reading Time display. If you want to manually add the Estimated Reading Time display to select posts only, you could simply use the shortcode [rt_reading_time] for the default options or [rt_reading_time label="Reading Time:" postfix="minutes" postfix_singular=“minute”] which allows you to change the label and postfix. Once you have completed your customisations, don’t forget to click Update Options to save your settings.
You can now visit your website and you will see the Estimated Reading Time is displayed at the top of your post.
As you can see we have added the Font Awesome clock icon before the Estimated Reading Time. If you want to add the clock icon to your website you can simply add the following code to your style.css file, depending whether your website uses Font Awesome v4 or v5:
/* READING TIME FONT AWESOME 4*/
span.rt-reading-time::before {
content: "\f017";
font-family: "FontAwesome";
padding-right: 6px;
font-weight: 400;
color: #ffda23;
}/* READING TIME FONT AWESOME 5*/
span.rt-reading-time::before {
content: "\f017";
font-family: "Font Awesome 5 Free";
padding-right: 6px;
font-weight: 400;
color: #ffda23;
}Add Estimated Reading Time using WordPress Function
We are going to add Estimated Reading Time into your WordPress posts using a custom snippet based on some WordPress functions. To add the snippet we will editing the functions.php. You can edit the functions.php file directly in the WordPress dashboard under Appearance > Theme Editor > Theme Functions or edit the file offline and upload using your favourite FTP program.
To create the required WordPress function to calculate the Estimated Reading Time, you will need to copy the following code into your functions.php file:
// Estimated Reading Time
function vpsb_estimated_reading_time( $content = '') {
$wpm = 200; // Word Per Minute (200 Average)
$text_content = strip_shortcodes( $content ); // Remove Shortcodes
$str_content = strip_tags( $text_content ); // Remove Tags
$word_count = str_word_count( $str_content );
$readtime = ceil( $word_count / $wpm );
if ($readtime == 1) {
$postfix = " Minute";
} else {
$postfix = " Minutes";
}
$readingtime = $readtime . $postfix;
return $readingtime;
}The above code will calculate the estimated reading time based on 200 words per minute and remove all shortcodes and tags from the calculation.
Note
The code above is using a default words per minute of 200. You can change this figure to any number you want. For example, if you wanted to change the words per minute calculation to 240, you would change the code $wpm = 240;.
Now we need to add the newly created function into your WordPress theme. Simply copy the following code and paste in your post loop where you would like the estimated reading time to be displayed. For example, if you wanted it to be displayed in the post-meta section (where your theme may display post author, published date, etc) you can simply add the code to your post loop usually in content.php file.
Reading Time: <?php echo vpsb_estimated_reading_time( get_the_content() ); ?>
You can now visit your website and you will see the Estimated Reading Time is displayed within the post-meta at the top of the post or page.
As you can see we have added the Font Awesome clock icon before the Estimated Reading Time. If you want to add this to your website you can simply replace the existing code and add the following code into your content.php file depending whether your website uses Font Awesome v4 or v5:
/* READING TIME FONT AWESOME 4*/ <span><i class="fa fa-clock-o"></i>Reading Time: <?php echo vpsb_estimated_reading_time( get_the_content() ); ?></span>
/* READING TIME FONT AWESOME 5*/ <span><i class="fas fa-clock-o"></i>Reading Time: <?php echo vpsb_estimated_reading_time( get_the_content() ); ?></span>
That’s it. You have now successfully added an Estimated Reading Time display to the top fo your posts or pages and customised it using Font Awesome and styled using CSS.
