How to Add Reading Time Estimator in Elementor

The adoption of Elementor is getting more massive in the WordPress community. Many users use it to create a wide range of website types in WordPress, including blog.

Elementor has a theme builder feature which is great for blogging. You can use it to create custom templates for every single part of your blog, including the single post (blog post) template. Creating a custom single post template with Elementor theme builder allows you to control everything. From the design to the post elements (post title, post meta, post content, and so on).

One of the elements you can add to your custom single post template is a reading time estimator.

Adding Reading Time Estimator in Elementor

Reading time estimator is not available as a default Elementor feature. Not even WordPress. To add it to your WordPress blog, you need to add a new custom function.

Step 1

To add a new custom function in WordPress itself, you can either edit the functions.php file belongs to your theme or using a plugin like Code Snippets. For the first option, you can go to Appearance -> Theme File Editor on your WordPress dashboard. Select the functions.php file on the right panel to edit it. If you haven't done this before, make sure to back up your website first just in case everything doesn't work the way you expected. If you use a managed WordPress hosting service like Kinsta, Pressable, or Flywheel, manually backup your website is not necessary as they already have a built-in backup feature.

Click the Publish button once you are done editing the file.

Here is the code of the custom function you need to add:

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');

You can add the code above right after the last line of the functions.php file content.

What the above code does is get the total words from the post content and then divide it by 260. The calculation result is converted into a shortcode on the last line. This will make it easy for us to display the calculation result on the frontend.

Step 2

You can display the result of the above calculation on any editor that supports shortcode, including Gutenberg (the default editor of WordPress), Divi, to Brizy.

To display it on the custom single post you created with Elementor theme builder, first, go to Templates -> Theme Builder on your WordPress dashboard and select the custom single post template you want to display the reading estimator on. Edit it.

On the Elementor editor, drag the Shortcode widget to the canvas area and type [wpbread]

Update your custom Elementor template.

Styling Up the Text

The text of the reading estimator inherits the global typography settings on your WordPress site. To style it up, go to the Advanced tab on the settings panel and type selector .elementor-shortcode{} on the Custom CSS block. .elementor-shortcode is the selector of the Shortcode widget of Elementor. You can simply put your custom typography setting between the curly brackets. Here is the example:

selector .elementor-shortcode{
    font-family: helvetica;
    font-size:16px;
}