Source: https://divicake.com/blog/reading-progress-bar-divi-blog/ [Blog](https://divicake.com/blog/)/[Blogging](https://divicake.com/category/blogging/) # How to Add a Reading Progress Bar to Your WordPress Divi Blog Post By Divi Cake·26 February 2025·Updated 19 August 2026·3 min read How to Add a Reading Progress Bar to Your WordPress Divi Blog Post We may earn a commission from affiliate links in this post. [Disclosure policy](https://divicake.com/affiliate-disclosure-policy/) On this page - [Step 1: Install the “Reading Progress Bar” Plugin](https://divicake.com#step-1-install-the-reading-progress-bar-plugin) - [Step 2: Configure the Plugin Settings](https://divicake.com#step-2-configure-the-plugin-settings) - [1. Customize the Appearance](https://divicake.com#1-customize-the-appearance) - [2. Select Where to Show the Progress Bar](https://divicake.com#2-select-where-to-show-the-progress-bar) - [Step 3: Test the Reading Progress Bar](https://divicake.com#step-3-test-the-reading-progress-bar) - [Final Thoughts](https://divicake.com#final-thoughts) A reading progress bar helps keep visitors engaged by showing them how far they’ve made it through an article. It’s a simple visual cue that can make a big difference in keeping readers on your page longer, reducing bounce rates, and encouraging them to finish the post. In this guide, we’ll walk you through adding a reading progress bar to your [Divi](https://divicake.com/go/divi/) website using the Reading Progress Bar plugin from the [WordPress](https://divicake.com/blog/wordpress-tutorial/) directory. We’ll also cover how to set it up correctly so it works smoothly with your site’s design and layout. ## Step 1: Install the “Reading Progress Bar” Plugin - Log in to your WordPress Dashboard. - Go to Plugins > Add New. - Search for the “Reading Progress Bar”. WordPress dashboard showing the plugin search for “Reading Progress Bar” under the Add New Plugins section. Searching the Reading Progress Bar Plugin - Click Install Now, then Activate the plugin. Installing and activating the Reading Progress Bar plugin in the WordPress Dashboard Installing and Activating the Reading Progress Bar Plugin ## Step 2: Configure the Plugin Settings Once activated, go to Settings > Reading Progress Bar and adjust the following options: WordPress Reading Progress Bar plugin settings page with options to customize its appearance. Configuring Reading Progress Bar Plugin Settings Read More: [Best Social Media Plugins for Divi](https://divicake.com/blog/best-social-media-plugins-for-divi/) ### 1. Customize the Appearance Adjusting the height, colors, and position ensures it blends seamlessly with your [Divi theme](https://divicake.com/blog/what-is-divi-wordpress/) while remaining noticeable to readers. Let’s go over the key settings to make it both functional and visually appealing. - Progressbar height (pixels): Set to 5px for a subtle yet visible effect. - Foreground color: Select a color that matches your Divi theme (e.g., brand colors). - Background color: Choose a contrasting color to ensure visibility. - Progressbar position: Select Top (recommended) to display the bar at the top of the page. Customizing settings by adjusting height, foreground color, background color, and position options. Customizing the Reading Progress Bar Plugin ### 2. Select Where to Show the Progress Bar Now that you’ve adjusted the basic settings, the next step is choosing where the progress bar should appear. This ensures it’s visible on the right pages without being intrusive. Whether you want it on blog posts, static pages, or archive sections, customizing its placement helps create a smoother reading experience for your visitors. #### 1. Select templates to apply progress bar: - Blog Page – Applies the bar to the main blog page. - Single Post / Page / Custom Post Type – Ensures the bar appears on all blog posts. - Archives and Categories – Optional, if you want the bar on archive pages. Reading Progress Bar plugin settings with options to apply it on blog pages, single posts, pages, custom post types, and archive sections. Choosing Where to Display the Reading Progress Bar on Website #### 2. Select post types to apply progress bar: - Posts – Shows the progress bar on blog posts. - Pages – If you want it on static pages. - Media & Projects – Keep disabled unless needed. After configuring these settings, click Save Changes. Reading Progress Bar Plugin settings with options to enable it on posts, pages, and disable it for media and projects. Set Post Types for the Reading Progress Bar Read More: [18 Best Free Divi Plugins](https://divicake.com/blog/free-divi-plugins/) ## Step 3: Test the Reading Progress Bar - Open a blog post on your Divi website. - Scroll through the page and observe the thin progress bar at the top. - If the bar isn’t visible or needs adjustments, go back to Settings > Reading Progress Bar and modify colors, height, or templates. Reading Progress Bar Plugin displayed at the top of a blog post, showing scrolling progress. Testing the Reading Progress Bar Plugin on Your Divi Website ## Final Thoughts Adding a reading progress bar to your Divi website with the Reading Progress Bar plugin is an easy way to improve the reading experience. It provides a clear visual indicator of progress, helping visitors stay engaged and move through your content more smoothly. Follow these steps to set it up, customize it to match your site’s design, and give your readers a better browsing experience. It’s a small change that can make a noticeable difference try it out and see how it works for your site! Read More: [9 WordPress Security Plugins For Divi](https://divicake.com/blog/wordpress-security-plugins-for-divi/) About the author Written by Divi Cake. ## Submit a comment Comments are read before they appear. Your email is not published. Comment NameEmail Company website Submit commentSubmit commentSubmit comment The comment form needs JavaScript for its spam check. Thanks. Your comment is waiting for review and will appear here once it is approved. ## Do you need help with … - [Divi websites](https://divicake.com/divi-website-development/) - [Divi plugins](https://divicake.com/divi-plugin-development/) - [Fix a site](https://divicake.com/fix-existing-site/) - [Beyond Divi](https://divicake.com/beyond-divi/) - [Technical SEO](https://divicake.com/technical-seo/) - [SEO content](https://divicake.com/seo-content/) ## Save Annually on Divi [Save 69% on Divi VIP](https://divicake.com/go/divi-vip/)[Save 69% on Divi Cloud](https://divicake.com/go/divi-cloud/)[Save 69%, Divi Team](https://divicake.com/go/divi-teams/) ## WordPress Hosting & Tools [100% off on Kinsta for 1 Month](https://divicake.com/go/kinsta/)[Get up to 62% off Bluehost hosting.](https://divicake.com/go/wordpress-hosting-blue-host/)[Save Up to 15% on Rank Math](https://divicake.com/go/rank-math/)[Get 50% OFF on all WPForms plans](https://divicake.com/go/wpforms/) ## More in Blogging [ Selling Divi websites and child themes Blogging10 min read ### How to Make Money Selling Divi Websites and Child Themes How to earn from Divi three ways: building sites for clients, selling finished websites through a brokerage or marketplace, and packaging child themes for sale. 29 September 2026](https://divicake.com/blog/selling-divi-websites-and-child-themes/) [ Top reasons to choose a pre-built theme for your website Blogging10 min read ### Top Reasons to Choose a Pre Built Theme for Your Website Why a pre-built theme is often the faster and cheaper way to launch a site, compared with a custom build on cost, responsiveness, customization, SEO and support. 21 September 2026](https://divicake.com/blog/reasons-to-choose-a-pre-built-theme-for-your-website/) [ Why Web Designers Use Divi Theme to Build Better Websites Blogging7 min read ### Why Web Designers Use Divi Theme to Build Better Websites Design agencies pick Divi for its visual builder, reusable layout packs, and faster client handoff. Here is what Divi for web designers changes day to day. 14 April 2026](https://divicake.com/blog/why-web-designers-use-divi/)