{"id":12382,"date":"2025-01-20T11:04:12","date_gmt":"2025-01-20T09:04:12","guid":{"rendered":"https:\/\/creativethemes.com\/blocksy\/?p=12382"},"modified":"2025-05-22T17:57:19","modified_gmt":"2025-05-22T14:57:19","slug":"wordpress-reading-progress-bar-and-read-time","status":"publish","type":"post","link":"https:\/\/creativethemes.com\/blocksy\/blog\/wordpress-reading-progress-bar-and-read-time\/","title":{"rendered":"How to Add a WordPress Progress Bar &amp; Read Time (+ 3 Best Plugins)"},"content":{"rendered":"\n<div class=\"wp-block-group is-layout-constrained wp-block-group-is-layout-constrained\">\n<p>Do you want to add a reading progress bar and read time to your WordPress website?<\/p>\n\n\n\n<p>A reading progress bar helps readers <strong>track their progress<\/strong>, which is especially important when navigating long pieces of content, as it keeps them engaged and motivated to reach the end.<\/p>\n\n\n\n<p>Similarly, an estimated read time helps visitors <strong>decide if they can commit the necessary time<\/strong> upfront, reducing the likelihood of them leaving halfway through.<\/p>\n\n\n\n<p>Adding these elements is particularly valuable for content-heavy websites like news platforms, e-learning sites, or blogs with tutorials and case studies because such platforms often have lengthy or information-dense articles.<\/p>\n\n\n\n<p>By integrating these elements into your blog posts, you improve the overall user experience and build trust by demonstrating that you value your readers&#8217; time and engagement. This helps <strong>foster loyalty<\/strong> and ensures your site attracts a <strong>relevant audience<\/strong> who will appreciate the thoughtful design and continue to return for more.<\/p>\n\n\n\n<p>Since WordPress doesn\u2019t offer these features by default, you\u2019ll need a third-party tool to implement them. So, in this article, we\u2019ll show you how to easily add a reading progress bar and read time to your WordPress posts using <a href=\"https:\/\/creativethemes.com\/blocksy\/\" target=\"_blank\" rel=\"noreferrer noopener\">Blocksy Pro<\/a> (our product).<\/p>\n\n\n\n<p>But before we dive into the tutorial, let&#8217;s first take a deep dive into the benefits of adding a reading progress bar and read time.<\/p>\n\n\n\n<p>Let\u2019s get started!<\/p>\n\n\n\n<div class=\"wp-block-rank-math-toc-block\" id=\"rank-math-toc\"><h2>Table of Contents<\/h2><nav><ul><li><a href=\"#benefits-of-adding-a-reading-progress-bar-read-time\">Why Add a Reading Progress Bar &amp; Read Time to Your WordPress Site?<\/a><\/li><li><a href=\"#the-3-best-reading-progress-bar-read-time-plugins\">Best Reading Progress Bar &amp; Read Time Plugins for WordPress<\/a><ul><li><a href=\"#3-wp-reading-progress\">3. WP Reading Progress \u2013 Simple &amp; Free Option<\/a><\/li><li><a href=\"#2-read-meter\">2. Read Meter \u2013 Customizable Reading Progress &amp; Read Time<\/a><\/li><li><a href=\"#1-blocksy-pro\">1. Blocksy Pro \u2013 Best All-in-One Solution for WordPress Progress Bar<\/a><\/li><\/ul><\/li><li><a href=\"#how-to-add-the-reading-progress-bar-read-time-in-word-press-with-blocksy-pro\">Step-by-Step: How to Add a Reading Progress Bar &amp; Read Time in WordPress<\/a><ul><li><a href=\"#step-1-install-activate-blocksy-pro\">Step 1: Install &amp; Activate Blocksy Pro<\/a><\/li><li><a href=\"#step-2-add-the-reading-progress-bar\">Step 2: Add the Reading Progress Bar<\/a><\/li><li><a href=\"#step-3-add-read-time\">Step 3: Add Read Time<\/a><\/li><\/ul><\/li><li><a href=\"#conclusion\">Final Thoughts: Boost Engagement with a Reading Progress Bar<\/a><\/li><\/ul><\/nav><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-group is-layout-constrained wp-block-group-is-layout-constrained\">\n<h2 class=\"wp-block-heading\" id=\"benefits-of-adding-a-reading-progress-bar-read-time\">Why Add a Reading Progress Bar &amp; Read Time to Your WordPress Site?<\/h2>\n\n\n\n<p>The main <strong>benefits of adding a reading progress bar<\/strong> to your WordPress website are as follows:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Encourages readers to stay on the page and complete the article by visually showing their progress.<\/li>\n\n\n\n<li>Readers can quickly gauge how much content is left without scrolling, improving usability.<\/li>\n\n\n\n<li>Elevates your website&#8217;s design with an element that leaves a better user impression and contributes to your website\u2019s overall trust factor.<\/li>\n<\/ul>\n\n\n\n<p>The main <strong>benefits of adding a read time<\/strong> to your WordPress website are as follows:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>It helps visitors quickly determine if they can commit the time needed to read the content.&nbsp;<\/li>\n\n\n\n<li>Offers transparency about content length, reducing the likelihood of frustration.<\/li>\n\n\n\n<li>People who see the read time and choose to engage are more likely to be genuinely interested in the topic.<\/li>\n\n\n\n<li>An estimated read time helps set clear expectations, making visitors more likely to stay and complete the content rather than leave prematurely.<\/li>\n<\/ul>\n\n\n\n<p>Adding these elements to your WordPress blog posts will increase reader retention, enhance the overall user experience on your site, and foster better engagement with your content.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-group is-layout-constrained wp-block-group-is-layout-constrained\">\n<h2 class=\"wp-block-heading\" id=\"the-3-best-reading-progress-bar-read-time-plugins\">Best Reading Progress Bar &amp; Read Time Plugins for WordPress<\/h2>\n\n\n\n<p>We tried out nearly all the reading progress bar and read time plugins available online, and the best ones are as follows:<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>Feature<\/th><th>WP Reading Progress<\/th><th>Read Meter<\/th><th>Blocksy Pro<\/th><\/tr><\/thead><tbody><tr><td>Price<\/td><td>Free<\/td><td>Free<\/td><td>Paid<\/td><\/tr><tr><td>Reading Time<\/td><td>\u2705 Yes<\/td><td>\u2705 Yes<\/td><td>\u2705 Yes<\/td><\/tr><tr><td>Progress Bar<\/td><td>\u2705 Yes<\/td><td>\u2705 Yes<\/td><td>\u2705 Yes<\/td><\/tr><tr><td>Customization<\/td><td>Basic<\/td><td>Moderate<\/td><td>Advanced<\/td><\/tr><tr><td>Theme Integration<\/td><td>\u274c No<\/td><td>\u274c No<\/td><td>\u2705 Yes (Built-in)<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"3-wp-reading-progress\">3. WP Reading Progress \u2013 Simple &amp; Free Option<\/h3>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"3456\" height=\"1999\" src=\"https:\/\/creativethemes.com\/blocksy\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-16-at-22.28.55.png\" alt=\"\" class=\"wp-image-12383\"\/><\/figure>\n\n\n\n<p>As the name suggests, you can add a reading progress bar using the <a href=\"https:\/\/wordpress.org\/plugins\/wp-reading-progress\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">WP Reading Progress<\/a> plugin, but it also lets you display estimated reading time (ERT) on your posts, pages, attachments, and products.<\/p>\n\n\n\n<p>You can position the reading progress bar at the top, or bottom or attach it to sticky elements like menus, customizing its color, thickness, and starting point to align with your site\u2019s design. It can be enabled globally for specific post types or activated individually for particular posts.<\/p>\n\n\n\n<p>The ERT feature estimates how long it will take users to read an article based on an adjustable reading speed, measured in words per minute.<\/p>\n\n\n\n<p>You can set this speed to match your audience&#8217;s reading habits\u2014for example, 200 words per minute for average readers or 300 words per minute for faster readers. The plugin uses this speed, along with the word count of your content, to calculate and display the estimated reading time.<\/p>\n\n\n\n<p>You can also customize the text that accompanies the reading time, such as &#8220;Estimated Reading Time: 5 minutes,&#8221; and choose where this information appears on your blog post. <a href=\"https:\/\/creativethemes.com\/blocksy\/blog\/how-to-start-a-wordpress-blog-in-15-minutes\/\">How to start a blog for beginners<\/a> may be your next stop.<\/p>\n\n\n\n<p><a href=\"https:\/\/wordpress.org\/plugins\/wp-reading-progress\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">WP Reading Progress<\/a> is a free plugin.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"2-read-meter\">2. Read Meter \u2013 Customizable Reading Progress &amp; Read Time<\/h3>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"3456\" height=\"1999\" src=\"https:\/\/creativethemes.com\/blocksy\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-16-at-22.28.47.png\" alt=\"\" class=\"wp-image-12384\"\/><\/figure>\n\n\n\n<p>The <a href=\"https:\/\/wordpress.org\/plugins\/read-meter\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Read Meter<\/a> plugin displays an estimated reading time and a reading progress bar on posts and pages.<\/p>\n\n\n\n<p>The plugin offers extensive customization options. You can control the reading time display, choosing its position above or below the content, and personalize it with prefixes, postfixes, and styling options, including font size, margins, and colors.<\/p>\n\n\n\n<p>Reading time can also be displayed on single posts, blog pages, and archive pages, providing flexibility to match site layout and design preferences.<\/p>\n\n\n\n<p>The plugin calculates reading time based on an adjustable words-per-minute setting, with options to include text from comments and time for viewing images.<\/p>\n\n\n\n<p>The reading progress bar\u2019s position and style are also fully customizable, allowing color, thickness, and placement adjustments at the top or bottom of the page.<\/p>\n\n\n\n<p>Shortcodes provide additional flexibility, enabling reading time to be displayed anywhere on the site, even for specific posts.<\/p>\n\n\n\n<p><a href=\"https:\/\/wordpress.org\/plugins\/read-meter\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Read Meter<\/a> is a free plugin.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-group is-layout-constrained wp-block-group-is-layout-constrained\">\n<h3 class=\"wp-block-heading\" id=\"1-blocksy-pro\">1. Blocksy Pro \u2013 Best All-in-One Solution for WordPress Progress Bar<\/h3>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;69ea0b9017324&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"69ea0b9017324\" class=\"wp-block-image size-full wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"3456\" height=\"2055\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/creativethemes.com\/blocksy\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-16-at-22.32.44.png\" alt=\"\" class=\"wp-image-12385\"\/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\taria-label=\"Enlarge\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.imageButtonRight\"\n\t\t\tdata-wp-style--top=\"state.imageButtonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n<p><a href=\"https:\/\/creativethemes.com\/blocksy\/\" target=\"_blank\" rel=\"noreferrer noopener\">Blocksy Pro<\/a> (our product) offers <strong>reading time estimates<\/strong> and a <strong>dynamic reading progress bar<\/strong> designed to enhance user engagement and improve the reading experience on your website.<\/p>\n\n\n\n<p>Setting up the reading progress bar and reading time feature is straightforward (covered in the tutorial below). You can enable these features across individual posts or archive pages. The customization options also let you configure where the reading time appears (e.g., above the content or post title) and adjust the reading progress bar\u2019s height, visibility across devices, and auto-hide functionality once the article is complete. These options ensure the features seamlessly integrate with your site\u2019s layout and design.<\/p>\n\n\n\n<p>Beyond displaying a reading progress bar and read-time, <strong>Blocksy Pro can help you create a fully customized and engaging website with advanced design options.<\/strong><\/p>\n\n\n\n<p>Blocksy Pro is a package that includes a theme and a companion plugin. With the package:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>You can build unlimited <strong>headers and footers<\/strong> tailored to specific pages and quickly add dynamic content using content blocks. These blocks can be displayed based on conditions such as user roles, time, or specific pages, allowing you to create a personalized experience for your visitors.<\/li>\n\n\n\n<li>You can have extensive control over your <strong>site&#8217;s menus<\/strong>, including creating mega menus with dropdowns, inserting content blocks, and adding icons to menu items.<\/li>\n\n\n\n<li>For <strong>WooCommerce sites<\/strong>, it provides powerful features like floating carts, quick view popups, off-canvas filters, and enhanced product layouts to improve your online store\u2019s functionality and conversion rates.<\/li>\n\n\n\n<li>With <strong>advanced typography options<\/strong>, you can upload custom fonts, integrate Google Fonts and Adobe Typekit, and manage all your font choices from one place.&nbsp;<\/li>\n\n\n\n<li>The theme also includes the ability to create <strong>custom sidebars<\/strong> for different pages and display them conditionally.<\/li>\n<\/ul>\n\n\n\n<p>All of these features work seamlessly together in the Blocksy Pro environment, ensuring a <strong>cohesive design and optimized performance<\/strong>, all easily managed through the intuitive WordPress Customizer. <a href=\"https:\/\/creativethemes.com\/blocksy\/\" target=\"_blank\" rel=\"noreferrer noopener\">Learn more<\/a>.<\/p>\n\n\n\n<p>Blocksy Pro is available with <a href=\"https:\/\/creativethemes.com\/blocksy\/pricing\/\" target=\"_blank\" rel=\"noreferrer noopener\">three license plans<\/a>, starting at $69 per year for a single-site license and lifetime plans for extended use.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"how-to-add-the-reading-progress-bar-read-time-in-word-press-with-blocksy-pro\">Step-by-Step: How to Add a Reading Progress Bar &amp; Read Time in WordPress<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"step-1-install-activate-blocksy-pro\">Step 1: Install &amp; Activate Blocksy Pro<\/h3>\n\n\n\n<p>We mentioned earlier that the Blocksy Pro package includes the Blocksy theme and the Blocksy Companion Pro plugin.<\/p>\n\n\n\n<p>So, to install and activate the Blocksy Pro package, you need to <a href=\"https:\/\/creativethemes.com\/blocksy\/pricing\/\" target=\"_blank\" rel=\"noreferrer noopener\">purchase it<\/a> and then <strong>download the Companion plugin<\/strong> to your local computer.<\/p>\n\n\n\n<p><strong>Install and activate the plugin<\/strong> on your WordPress website.<\/p>\n\n\n\n<p>You will be immediately asked to install and activate the Blocksy theme when that&#8217;s done.&nbsp;<br>Select the <strong>Install &amp; Activate the Blocksy Theme<\/strong> button, and the theme will be installed.<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;69ea0b9017aed&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"69ea0b9017aed\" class=\"wp-block-image size-full wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"3456\" height=\"2058\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/creativethemes.com\/blocksy\/wp-content\/uploads\/2024\/11\/Screenshot-2024-11-26-at-22.14.33.png\" alt=\"\" class=\"wp-image-11958\"\/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\taria-label=\"Enlarge\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.imageButtonRight\"\n\t\t\tdata-wp-style--top=\"state.imageButtonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n<p>Now, you have the Blocksy Pro package installed on your WordPress website. Before we show you how to add the reading progress bar and read time, let\u2019s first add your Blocksy license to ensure the package runs smoothly on your website.<\/p>\n\n\n\n<p>You will find your license key in your Blocksy account. <\/p>\n\n\n\n<p>Copy that license key, then go to <strong>Plugins \u2192 Installed Plugins \u2192 Blocksy Companion (Premium) \u2192 Add License<\/strong> and paste the license key.<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;69ea0b901804a&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"69ea0b901804a\" class=\"wp-block-image size-full wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"3456\" height=\"2058\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/creativethemes.com\/blocksy\/wp-content\/uploads\/2024\/11\/Screenshot-2024-11-26-at-22.18.15.png\" alt=\"\" class=\"wp-image-11960\"\/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\taria-label=\"Enlarge\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.imageButtonRight\"\n\t\t\tdata-wp-style--top=\"state.imageButtonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"step-2-add-the-reading-progress-bar\">Step 2: Add the Reading Progress Bar<\/h3>\n\n\n\n<p>To add the reading progress bar, go to <strong>Blocksy<\/strong> on your WordPress dashboard menu, then navigate to <strong>Extensions \u2192 Post Types Extra<\/strong> and toggle on the <strong>Read Time<\/strong> module.<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;69ea0b9018595&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"69ea0b9018595\" class=\"wp-block-image size-full wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"3456\" height=\"2060\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/creativethemes.com\/blocksy\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-16-at-22.47.04-1.png\" alt=\"\" class=\"wp-image-12394\"\/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\taria-label=\"Enlarge\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.imageButtonRight\"\n\t\t\tdata-wp-style--top=\"state.imageButtonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n<p>Next, go to <strong>Appearance \u2192 Customize<\/strong> and navigate to <strong>Post Types \u2192 Single Post<\/strong>, scroll down to the Page Elements section, and toggle on the <strong>Read Progress<\/strong> option.<\/p>\n\n\n\n<p>Now, refresh a blog post, and you\u2019ll notice a reading progress bar when you scroll down the post.<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;69ea0b90188a8&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"69ea0b90188a8\" class=\"wp-block-image size-full wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"3456\" height=\"2055\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/creativethemes.com\/blocksy\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-16-at-22.32.44.png\" alt=\"\" class=\"wp-image-12385\"\/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\taria-label=\"Enlarge\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.imageButtonRight\"\n\t\t\tdata-wp-style--top=\"state.imageButtonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n<p>You can adjust the reading progress design by clicking the <strong>\u201c&gt;\u201d sign<\/strong> adjacent to the toggle button.&nbsp;<\/p>\n\n\n\n<p>It will take you to the Read Progress window, where you can:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Adjust the height of the indicator.<\/li>\n\n\n\n<li>Choose to hide the bar once the reader arrives at the bottom of the post.<\/li>\n\n\n\n<li>And control whether the bar appears on all or only a few devices.<\/li>\n<\/ul>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;69ea0b9018f98&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"69ea0b9018f98\" class=\"wp-block-image size-full wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"3456\" height=\"2060\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/creativethemes.com\/blocksy\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-16-at-22.45.48.png\" alt=\"\" class=\"wp-image-12390\"\/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\taria-label=\"Enlarge\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.imageButtonRight\"\n\t\t\tdata-wp-style--top=\"state.imageButtonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n<p>You can also alter the indicator&#8217;s color and the reading progress bar&#8217;s background color.<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;69ea0b901958c&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"69ea0b901958c\" class=\"wp-block-image size-full wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"3456\" height=\"2060\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/creativethemes.com\/blocksy\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-16-at-22.46.00.png\" alt=\"\" class=\"wp-image-12391\"\/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\taria-label=\"Enlarge\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.imageButtonRight\"\n\t\t\tdata-wp-style--top=\"state.imageButtonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"step-3-add-read-time\">Step 3: Add Read Time<\/h3>\n\n\n\n<p>To add read time to your posts, open the <strong>Customizer \u2192 Single Post<\/strong> and select the <strong>&#8220;&gt;&#8221; sign<\/strong> adjacent to the <strong>Post Title<\/strong> toggle button.<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;69ea0b9019ade&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"69ea0b9019ade\" class=\"wp-block-image size-full wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"3456\" height=\"2060\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/creativethemes.com\/blocksy\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-16-at-22.49.46.png\" alt=\"\" class=\"wp-image-12395\"\/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\taria-label=\"Enlarge\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.imageButtonRight\"\n\t\t\tdata-wp-style--top=\"state.imageButtonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n<p>Next, go to <strong>Post Meta<\/strong>, open the dropdown menu, and enable <strong>Read Time<\/strong> by clicking the <strong>eye icon<\/strong>. Immediately, the read time will appear on your blog posts.<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;69ea0b9019fd1&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"69ea0b9019fd1\" class=\"wp-block-image size-full wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"3456\" height=\"2060\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/creativethemes.com\/blocksy\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-16-at-22.49.59.png\" alt=\"\" class=\"wp-image-12396\"\/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\taria-label=\"Enlarge\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.imageButtonRight\"\n\t\t\tdata-wp-style--top=\"state.imageButtonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n<p>You can also add read time to your site\u2019s archive pages by going to <strong>Post Types \u2192 Blog Posts \u2192 Card Options \u2192 Post Meta \u2192 Read Time<\/strong>.<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;69ea0b901a544&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"69ea0b901a544\" class=\"wp-block-image size-full wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"3456\" height=\"2060\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/creativethemes.com\/blocksy\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-16-at-22.51.17.png\" alt=\"\" class=\"wp-image-12397\"\/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\taria-label=\"Enlarge\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.imageButtonRight\"\n\t\t\tdata-wp-style--top=\"state.imageButtonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n<p>Don\u2019t forget to hit the <strong>Publish<\/strong> button when you are ready.&nbsp;<\/p>\n\n\n\n<p>That\u2019s it, folks! You have now added a reading progress bar and read time to your WordPress blog posts.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-group is-layout-constrained wp-block-group-is-layout-constrained\">\n<h2 class=\"wp-block-heading\" id=\"conclusion\">Final Thoughts: Boost Engagement with a Reading Progress Bar<\/h2>\n\n\n\n<p>Adding a reading progress bar and estimated reading time to your WordPress website is a powerful way to boost user experience and reader engagement.<\/p>\n\n\n\n<p>With plugins like <a href=\"https:\/\/creativethemes.com\/blocksy\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Blocksy Pro<\/strong><\/a><strong>, WP Reading Progress, and Read Meter<\/strong>, adding these features is straightforward and customizable to suit your website&#8217;s design.&nbsp;<\/p>\n\n\n\n<p>It\u2019s worth mentioning that while dedicated plugins like WP Reading Progress and Read Meter focus on adding a reading progress bar and read time, they offer limited functionality beyond those features.&nbsp;<\/p>\n\n\n\n<p><a href=\"https:\/\/creativethemes.com\/blocksy\/\" target=\"_blank\" rel=\"noreferrer noopener\">Blocksy Pro<\/a>, on the other hand, goes a step further by integrating these elements into a comprehensive package that includes both a theme and a companion plugin. This integration <strong>minimizes the risk of compatibility issues while providing advanced design tools and customization options<\/strong> to build an engaging and modern WordPress website.&nbsp;<\/p>\n\n\n\n<p>Whether you run a blog, e-learning platform, or news site, integrating these elements can significantly elevate your site\u2019s usability and foster greater user loyalty.<\/p>\n\n\n\n<p>Any questions about the WordPress reading progress bar and read time? Let us know in the comment section below.<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Do you want to add a reading progress bar and read time to your WordPress website? A reading progress bar helps readers track their progress, which is especially important when navigating long pieces of content, as it keeps them engaged and motivated to reach the end. Similarly, an estimated read time helps visitors decide if [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":12417,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[23],"tags":[51],"class_list":["post-12382","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-how-to","tag-plugin"],"blocksy_meta":{"header_scripts":"<style>figure > img {\nbox-shadow: 0px 0px 50px -10px rgba(0,0,0,0.1);\n}<\/style>","styles_descriptor":{"styles":{"desktop":"","tablet":"","mobile":""},"google_fonts":[],"version":6}},"acf":[],"_links":{"self":[{"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/posts\/12382","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/comments?post=12382"}],"version-history":[{"count":16,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/posts\/12382\/revisions"}],"predecessor-version":[{"id":13318,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/posts\/12382\/revisions\/13318"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/media\/12417"}],"wp:attachment":[{"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/media?parent=12382"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/categories?post=12382"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/tags?post=12382"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}