There may be times when we try to read an article from a website, we wonder how much time it’ll take to read the entire post and start scrolling down until the end of the content to get an estimate of the time needed to finish reading it. And once we get it, we start reading for real. And for that moment, we may appreciate a little heads-up on how much time it is going to take before we read it.
Adding an estimated reading time for your blog posts is a great way to help the user who spends a lot of time devouring content on the web. It doesn’t have to be intrusive or distract the user from engaging with the content, maybe a short sentence like “3 min read time” above the content is just suitable for it.
This tutorial will show you how to add an estimated reading time in WordPress without any additional plugin and display it on your blog post whether you’re using Gutenberg, Elementor, Divi, and any editor as long as it supports the use of shortcode.
Adding Estimated Reading Time in WordPress
Once you know the benefit of adding the estimated reading time to your blog posts and you’ve decided to use it for your site, let’s start adding it now!
Before you start, we suggest taking a backup of your site and using a child theme to avoid breaking the parent theme or losing your changes when you update your theme. Once you’re ready, let’s get into the practical steps!
Step 1: Adding the Estimated Reading Time Code
The first step is to add the estimated reading time code to your theme functions.php file. To do so, navigate to Appearance → Theme File Editor from your WordPress admin dashboard to open up the Edit Theme page. And in that page, click on the Theme Function (functions.php) from the Theme Files list to open up its file editor. Once the editor is open, add the following code to the bottom of the file editor.
function reading_time() {
$content = get_post_field( 'post_content', $post->ID );
$word_count = str_word_count( strip_tags( $content ) );
$readingtime = ceil($word_count / 260);
if ($readingtime == 1) {
$timer = " minute read";
} else {
$timer = " minutes read";
}
$totalreadingtime = $readingtime . $timer;
return $totalreadingtime;
}
add_shortcode('wpbread', 'reading_time');
Here is the screenshot of how the code is placed in the file editor.
What the code above do is get the total words from the post content and then divide it by 260 which is the average silent reading time for adult in English according to studies by ScienceDirect. You can update the number and modify the “minute read” text if necessary.
Once the code is in place, save the changes made to the file by clicking the Update File button.
Step 2: Displaying the Estimated Reading Time
The next step is to call the estimated reading time so it will appear before the content of your blog post. This step will guide you to display the estimated reading time on your blog posts for Gutenberg users, Elementor users, Divi users, and more.
Gutenberg
To display the estimated reading time before the blog content on Gutenberg, you just need to place the [wpbread]
As you can see from the above image, we put the shortcode between the title and the content and italicize the text. You can see the result of it in the image below.
Viola, the estimated reading time is there just above our content.
Elementor
If you’re using Elementor Pro as your page builder, you’ll have an easy time displaying the estimated reading time for all of your blog posts. You just need to do the first step of this tutorial and create a single post layout or edit it if you already have one via the theme builder, then add the shortcode element into the layout.
Once you’ve done the first step, start by navigating to Templates → Theme Builder from your WordPress dashboard. Once you’re inside the Theme Builder page, click on the Single Post block then click on the add a new button to create a single post layout.
Once you’re in the Elementor visual editor, add all the elements you need to create your single post layout or you can use one of the single post layouts we made here, then add the Shortcode element before the post content and place the [wpbread] shortcode into it.
Now, the estimated reading time should appear before your post content. Finally, modify the text color and italicize the text using the following CSS snippet to make it more appealing but not intrusive.
selector .elementor-shortcode{color:#969696;
font-style: italic;
}
Once you’re satisfied with your layout, publish your layout then set the condition to Post → All then proceed to see the result on one of your posts from the front end.
Divi
Displaying the estimated reading time for all your blog posts using Divi Builder is just as easy as you add a button module or any other module to your single post layout from Divi Theme Builder. Once you’ve placed the code from the first step to your functions.php file, navigate to Divi → Theme builder to create a single post layout, or if you already have the layout prepared, go ahead to click the pencil icon to edit it.
Once you’re in the Divi editor, add the necessary module for your blog post, then add a code module just above your Post Content module.
Continue by adding the [wpbread] shortcode to the Code editor inside the code module setting.
Once the estimated reading code appears, you may want to change its style a bit by adding a CSS snippet to the module. For example, we turn the text into italic, by adding the following CSS snippet on the Advanced tab → Custom CSS → Main Element.
font-style: italic;
Once you’re done styling, save the changes you just made for your single post layout.
Other Editor
If you are using another editor besides the three we covered, as long as it is support shortcode use, then you always can add the estimated reading time for your website. To do it, just do the first step then place the [ shortcode into any code element or module the editor offered.wpbread]
The Bottom Line
There may be times when we try to read an article from a website, we wonder how much time it’ll take to read the entire post and start scrolling down until the end of the content to get a grasp of the time needed to finish reading it. Adding an estimated reading time for your blog posts is a great way to help the user who spends a lot of time devouring content on the web. This article shows you how to add an estimated reading time on your blog posts for Gutenberg users, Elementor users, Divi users, and more.
