Elementor Pro has a Theme Builder feature which you can use to create a custom single post template on your WordPress site. You have absolute control over the elements you want to add.
There is one element you can't add, though. It is estimated reading time.
If you want to add the estimated reading time element to your single post template, this post will show you how.
I will use the no-plugin approach in this post. So, a little code snippet is required. No worries, I will provide the snippet as well as how to add it.
Jump to sections ⤵️
Want to add a premium vibe to your Elementor design? Use our button hover effects collection.
Is It Really Necessary to Add Estimated Reading Time?
You can create a custom single post template for two main reasons: to increase reading experience and to boost conversion.
For the first reason, other than a clean design, you can add additional elements such as reading progress indicator and estimated reading time.
Elementor already has a built-in feature to add the reading progress indicator. While for estimated reading time, you need a little extra effort because the feature is not available yet by default.
Adding estimated reading time is not required, but it will be a great move to improve reading experience on your website. You will earn a good first-impress from your readers by doing this little trick.
How to Add Estimated Reading Time in Elementor
As mentioned, I will show how to add estimated reading time in Elementor without using a plugin. Instead, I will use a custom snippet approach which involves two core steps:
Step 1: Add a New WordPress Function
The first step you need to do is to add the function that will automatically add the estimated reading time to your blog posts. Be it new blog posts or existing blog posts.
Here is the PHP snippet of the function that you need to add:
function reading_time() {
// Access the global post object to get the current ID
global $post;
$content = get_post_field( 'post_content', $post->ID );
$word_count = str_word_count( strip_tags( $content ) );
$readingtime = ceil($word_count / 260);
// Using a ternary operator for cleaner pluralization
$timer = ($readingtime == 1) ? " minute read" : " minutes read";
return $readingtime . $timer;
}
add_shortcode('readingtime_display', 'reading_time');How does the code work?
First, it gets the total words from a blog post then divides it by 260.
Why 260?
According to ScienceDirect, it is the average silent reading time for adult in English
If you have a casual audience, you can lower the number down to, for instance, 200.
The "minute read" text and "minutes read" are the texts that will show up next to the minute number. "minuted read" will show up if the estimated reading time is one minute or slower.
Conversely, the "minutes read" will show up if the estimated reading time is above one minute.
You can change them per your preference.
Where to Add the Code?
If you are new to WordPress, this step is a bit tricky. Before doing this step, I highly recommend you to backup your website just in case.
If your hosting provider already has a daily backup feature (like Cloudways, for instance), you don't need to backup your website manually. You can simply restore the previous version of your website if everything doesn't go as planned.
So, where to add the code?
First, you need to understand that when you are adding the code, you are adding a new custom function in WordPress.
In WordPress, there are several methods to add a new custom function.
The easiest way is by editing the functions.php file of your theme and adding your code here. But I don't recommend this method because the code may get overridden in the future when you update your theme.
Instead of editing the functions.php file, you can create a custom plugin dedicated to hosting custom functions.
In the future, if you want to add a new custom function, you can simply edit the plugin file and add your code here.
Creating a Custom Plugin to Host Custom Functions
You will need a file manager in this step. If your hosting provider offers one, you can simply use it. If it does, you can use one of the following file manager plugins:
In this post itself, I will use WP File Manager because it is the file manager plugin I personally use.
After installing and activating the file manager plugin, go to WP File Manager -> WP File Manager on your WordPress dashboard.
Go to the plugins folder under the wp-content folder and add a new folder. You can give any name to this folder. Something like "custom-functions" would be good as it represents the purpose of the plugin.
Go to the newly created folder and add a new plain text file.
Give your file a name. Replace the .txt file extension with .php.
Edit the file by clicking the pencil icon and paste the following code to the editor. Don't forget to save the changes.
<?php
/*
Plugin Name: Custom Functions
Plugin URI: https://pagebuildertemplates.com/
Description: Custom Plugin for adding custom code
Version: 1.0.0
Author: Your Name
*/
Your plugin is now installed but not activated yet. To activate it, go to Plugins -> Installed Plugins. Find the newly installed plugin and click the Activate link.
Adding the Custom Function
Your custom plugin is now ready. You can use it to host custom functions on your WordPress. Including the function to show the estimated reading time in Elementor.
A custom function itself is a PHP code snippet that adds a certain functionality or feature on your WordPress site.
In many cases, using a custom function makes more sense than installing a new plugin as it requires no maintenance and keeps your site neat.
In many cases, a certain functionality can be added using several lines of code. Like the one you are about to add, for instance.
So, how to add the custom function.
First, go to Plugins -> Plugin File Editor. If you don't see this menu item, check the settings on your security plugin if you have one.
Select the plugin you want to edit the file of from the dropdown menu on the upper-right corner and click the Select button.
Paste the code snippet to the editor and click the Update File button.
The custom function is now ready to use. Before we step into the next step, copy the shortcode readingtime_display. You will need this shortcode in the next step below.
Step 2: Create/Edit the Single Post Template and Add the Shortcode
In this step, you need to create a new custom template for the single post. Or, if you already have one, you can simply edit it.
In this post, I will edit one of my existing single post templates.
By the way, we have a collection of professionally designed single post templates for Elementor in case you need one.
Go to Elementor -> Theme Builder to access the Elementor Theme Builder feature where you can edit and create custom templates.
In the Elementor Theme Builder screen, select a single post template you want to add the estimated reading time to and edit it.
Once the Elementor editor opens, select the Post Info widget to edit it. If your single post template doesn't have it yet, you can simply add it.
Add a new meta data item and set the data type to Custom. Click the database icon and select Shortcode.
Click the wrench icon and paste your shortcode. Make sure to include to square brackets.
As you add the shortcode, you should see estimated reading time shows up on your single post template design.
That's how to add estimated reading time in Elementor without using an extra plugin. Not that hard. Right?
Video Version
I have also created the following video to make it easy for you to implement the tutorial.
Summary
Elementor Theme Builder offers absolute control over the design of the single post template on your WordPress website. You can also add any element you want for the sake of reading experience. One of which is estimated reading time.
This element is quite helpful to increase user experience. Especially if you run a content heavy website with lots of lengthy articles.
By adding estimated reading time, readers will have a clear clue over the time they need to finish an article, which gives a good first impression on your website.