Step-by-Step: Adding Reading Time in Elementor
Elementor is one of WordPress’s most popular page builders. If you want to display reading time on blog posts built with Elementor, you have two main approaches: using a dedicated plugin with Elementor compatibility, or building a custom solution with HTML and shortcodes. This guide covers both methods so you can choose the one that fits your workflow best.
Method 1: Using a Plugin with Elementor Support
The simplest way to add reading time to Elementor posts is through a plugin that integrates seamlessly with the page builder. ReadyGo Reading Time is a free WordPress plugin that works with Elementor and automatically displays reading time on posts. Here is how to set it up properly.
First, install and activate the plugin from your WordPress dashboard. Go to Plugins, click Add New, search for “ReadyGo Reading Time”, and click Install Now followed by Activate. The plugin works immediately without configuration, calculating reading time based on your post’s word count and displaying it above or below the post title depending on your theme and settings.
If you want to customize where the reading time appears in Elementor, you can use shortcodes or custom code. The plugin provides a shortcode that you can place anywhere in an Elementor post: [rgt_reading_time]. Add a Text Editor widget to your Elementor template, paste this shortcode, and the reading time will display on every post using that template. This gives you full control over placement and styling.
Method 2: Creating a Custom Elementor Reading Time Widget
If you prefer a more hands-on approach and want full control, you can create a custom Elementor widget to display reading time. This requires adding code to your theme or a code snippets plugin like Code Snippets. Here is the basic structure to get started with your implementation.
First, install and activate Code Snippets from the WordPress plugin repository. Go to Plugins, Add New, search for “Code Snippets”, and activate it. This plugin allows you to add PHP code to your site without editing theme files directly, which is much safer for beginners. Then add this PHP code to create a custom shortcode that calculates reading time based on post content.
In the Code Snippets dashboard, click Add New and paste the following PHP function:
function rgt_reading_time_calc() {
$post_content = get_post_field(‘post_content’, get_the_ID());
$word_count = str_word_count(strip_tags($post_content));
$reading_time = ceil($word_count / 200);
return $reading_time . ‘ min read’;
}
add_shortcode(‘reading_time_custom’, ‘rgt_reading_time_calc’);
Save and activate this code snippet. Now you can use the shortcode [reading_time_custom] anywhere in Elementor. Add a Text Editor widget to your Elementor post template, insert the shortcode, and it will display something like “5 min read” on every post automatically based on the actual word count.
Customizing Reading Time Display in Elementor
Once you have reading time displaying on your posts, you can style it to match your design system perfectly. In Elementor, add a Text Editor widget where you want the reading time to appear. Insert the shortcode, then use Elementor’s design panel to adjust the styling completely. Adjust font size, color, weight, and spacing to match your post title and other typography on the page.
For a more integrated look, create an Elementor template that includes reading time as part of your post header section. Build a dedicated section above your post title that contains the reading time, publication date, and author name. Use Elementor’s flexbox options to align these elements horizontally or vertically depending on your design preference and layout goals.
Adding a Progress Bar Below Reading Time
Reading time is most effective when paired with visual feedback during the reading experience. Many users also want to show a scroll progress bar to motivate readers to scroll to the end of the article. You can add this by using a plugin that provides both features, or by combining a reading time plugin with a separate progress bar plugin.
The ReadyGo Reading Time plugin includes a built-in scroll progress bar option that works with Elementor templates. If you have already installed that plugin, navigate to its settings from the WordPress dashboard and enable the progress bar feature. You can choose between a linear bar at the top of the post or a circular ring that rotates as the user scrolls down the page.
Testing Your Reading Time Display
After setting up reading time in Elementor, preview your post on the front-end to make sure it displays correctly across all devices. Check the appearance on desktop, tablet, and mobile screens. Verify that the reading time number is accurate by counting the words in your post manually or using an online word counter tool. If the reading time seems off, check if the plugin is excluding certain content types like tables, code blocks, or embedded media from its calculation.
Also test that the reading time updates when you change post content. Edit a published post, add 500 words, and check if the reading time increases automatically. Most plugins recalculate on save, but some cache the value and require a manual cache clear through your caching plugin settings or WordPress cache purge options.
Elementor Template Best Practices for Reading Time
When creating an Elementor template for your blog posts, place reading time in the post meta section where it naturally belongs alongside the author name, publication date, and category. This is where readers expect to see meta information. Do not place it in the middle of the content or in the footer, as that disrupts the reading flow.
Make sure your reading time estimate uses the same font and size as other post meta elements for visual consistency. Consider adding an icon next to the reading time (like a clock icon) to make it visually distinct from other meta information.
Frequently Asked Questions
Can I display reading time on archive pages with Elementor?
Yes, if you use Elementor’s Theme Builder, you can create a custom post list or archive template that includes reading time. This requires using post meta shortcodes or a plugin that supports Elementor’s theme builder functionality. Check your plugin’s documentation to see if it works with custom post loops and dynamic content.
Does displaying reading time in Elementor slow down the page?
No, reading time calculations are lightweight operations. Most plugins cache the result so the calculation happens once and is reused on every page load. The overhead is negligible and will not impact your Core Web Vitals or overall site speed metrics.
What if my Elementor theme already shows reading time?
Many Elementor-powered themes have built-in reading time in the pro or premium versions. Check your theme settings first under Customizer or theme options. If it is already there, you do not need to add another plugin. If you want to customize its appearance or move it to a different location, then a separate plugin or shortcode solution is helpful.