Have you ever experienced the frustration of reading a lengthy online article without knowing how much is left? Reading progress bars address this issue for your WordPress audience.
These helpful visual cues inform readers about their progress through an article, motivating them to continue reading and remain on your page. They provide a sense of accomplishment similar to finishing any task with a defined conclusion.
At CanadaCreate, we don’t utilize progress bars since our tutorials are crafted for easy scanning. Most users prefer to jump directly to the section they need instead of reading everything from beginning to end.
However, if you are publishing longer blog posts, comprehensive guides, or detailed articles, incorporating a reading progress bar can significantly enhance reader engagement.
In this guide, we will explore three effective methods to add a reading progress bar to your WordPress site, whether you prefer a straightforward plugin or a more tailored solution.
Quick Answer: What are the quickest ways to implement a reading progress bar in WordPress?
If you’re short on time, here’s a concise overview of the three methods and the scenarios in which each is most beneficial:
- Utilize a Theme Builder (Best for complete theme customization):This option is perfect if you are revamping your site or desire the progress bar to seamlessly blend with your theme.
- Utilize a Free Plugin (Ideal for beginners and quick installation):This option is great if you want a straightforward, lightweight reading progress bar without needing to change your theme.
- Incorporate Custom Code (Best for those who prefer not to use an additional plugin):This approach is excellent if you want a clean solution without plugins. You can either add it directly to your theme file or use a code snippet plugin like WPCode.
When to Implement a Reading Progress Bar in Your WordPress Blog Posts
For lengthy blog posts, a reading progress bar can be an effective tool to encourage visitors to remain engaged with your WordPress site.
However, they are not essential for every website. Based on our experience, reading progress bars are most effective in the following scenarios:
- In-Depth Articles:If you publish comprehensive guides or narratives, a progress bar motivates users to continue scrolling to the conclusion.
- Sequential Content:They are ideal for content that should be read in order rather than skimmed.
- Engaging Design:A reading progress meter adds an element of interactivity, enhancing the user experience by making it feel like a journey with a clear endpoint.
Let’s explore how to easily incorporate a reading progress bar into your WordPress posts. You can use the quick links below to jump to your preferred method:
- Method 1: Create a Custom Theme Featuring Reading Progress Indicators
- Method 2: Implement a Reading Progress Bar Using a Free Plugin
- Method 3: Integrate a Reading Progress Bar Through Code
- Bonus Tips to Enhance Reader Engagement on Your WordPress Blog
Important Note: Looking to add a standard progress bar instead? We suggest using SeedProd, which includes a built-in progress bar block.
For detailed instructions on using SeedProd, check out our guide on creating a custom WordPress theme.
Method 1: Create a Custom Theme Featuring Reading Progress Indicators
One effective way to implement a reading progress bar in your WordPress posts is by using a theme builder that includes a progress bar feature. This ensures that the progress bar design harmonizes with your theme, enhancing its visual appeal.
Please note that this approach requires changing your theme, so it may not be ideal if you are satisfied with your current theme and do not plan to switch soon. In that case, consider using method 2 (plugin) or method 3 (code) instead.
In this guide, we will utilize the Thrive Theme Builder. This tool not only features a reading progress bar but also offers a variety of theme templates suitable for different needs, including blogs and corporate sites.
The best part is that the user-friendly drag-and-drop interface makes it perfect for beginners.
To discover more about this platform, check out our comprehensive Thrive Themes review.
A drawback of Thrive Themes is the absence of a free version. However, you can apply our Thrive Themes coupon code to receive up to 50% off your initial purchase.
Step 1: Install the Thrive Theme Builder
Begin by setting up the Thrive Theme Builder. Access this plugin by logging into your account on the Thrive Themes website.
Next, download and install the Thrive Product Manager plugin. For detailed instructions, refer to our beginner’s guide on installing a WordPress plugin.
Once the plugin is activated, click Product Manager in your WordPress admin dashboard.
Then, click the ‘Log into my account’ button to link your WordPress site with your Thrive Themes account.
After this step, you will see a list of all available Thrive Themes products linked to your account.
Select ‘Thrive Architect’ and check the box for ‘Install Product.’
This page builder plugin integrates with the theme builder, which is why it needs to be activated.
Next, scroll down to the ‘Thrive Theme Builder’ section and check the box for ‘Install Theme.’
Now, simply click on ‘Install selected products.’
On the next page, you will see the Thrive Product Manager installing and activating the Thrive Theme Builder.
Once the installation is complete, click ‘Go to the Theme Builder Dashboard.’
Now, choose a WordPress theme.
If you’re unsure which theme to select, click the ‘Preview’ button to see a preview of the theme. Once you’ve made your choice, click ‘Choose.’
You should now be in the Theme Builder Wizard.
This setup wizard will guide you through uploading your logo, selecting brand colors for your theme, and configuring the various structures and templates.
Complete the setup wizard before proceeding to the next step.
Step 2: Add a Reading Progress Bar to Your Single Post Template
Now that your theme is configured, let’s proceed to integrate a reading progress bar into your theme template. Since our goal is to display the reading meter in WordPress posts, we will edit the single post template accordingly.
To begin, navigate to the ‘Templates’ tab in the Thrive Theme Builder. Locate the ‘Default Post’ template and click on ‘Edit.’
You should now be in the theme builder interface. On the left, you will see a sidebar for template editing, a preview of the template, and a small toolbar on the right for adding additional blocks or modifying the template’s style.
To incorporate the reading meter, scroll down the left sidebar and locate the ‘Reading progress indicator’ option. Simply toggle it on to enable the feature.
Once the progress bar is added, you will have additional settings available for customization.
First, you can choose to position the progress bar either beneath the header or at the top of the viewport (just above the header). If you select the first option, ensure that the header is set to sticky, which we will guide you on later.
Next, you can customize the color of the progress bar. Click on the color picker to select your desired shade.
You can select one of the predefined colors from your theme’s color palette, or you can opt to ‘Unlink from theme color’ to choose a completely different color that is not part of your theme.
By selecting the ‘Unlink from theme color’ option, you can also modify the opacity of the color.
This allows you to control how transparent the progress bar appears against its background. However, it’s advisable to choose a color that is not overly bright, so it doesn’t distract readers from the content.
Once you are satisfied with the color selection, simply click ‘Apply.’
You can also customize the height of the progress bar.
The theme builder allows you to resize the bar up to 10 pixels, ensuring it doesn’t appear too large. We suggest a height between 5 and 10 pixels for optimal visibility of the progress bar.
When you are content with the appearance of the bar, click ‘Save Work’ to preserve your changes.
Step 3: Make Your Header Sticky (Optional)
If you want to position your reading progress bar below the header, you need to complete this step. Otherwise, you can skip it.
First, navigate to the left sidebar and click on ‘Header.’
A new set of options for customizing the header will now be visible in the sidebar.
Scroll down to the Header Section and click on ‘Edit.’
Next, access the Scroll Behavior tab.
Select ‘Sticky.’ Depending on your theme, you might also need to adjust the distance from the top of the screen to 1 px to ensure the progress bar is displayed.
You can keep the remaining settings unchanged and click ‘Done’ at the bottom.
Step 4: Add an Optional Reading Time Indicator
With Thrive Theme Builder, you can display the estimated reading time for your post. This feature allows users to see how long it will take to read an article, helping them choose content that fits their schedule.
First, select the block that displays your post’s metadata.
This section of your single post template shows details such as the author, categories, tags, and more.
Then, click on the ‘Dynamic text’ icon in the toolbar.
In the first dropdown menu, choose ‘Content’ and in the second dropdown, select ‘Reading time remaining (in minutes).’
Finally, click ‘Insert.’
You will now notice a new message that reads, ‘0 minutes left’ in the post metadata. Feel free to modify this text to suit your preferences.
In our example, we chose to eliminate the word ‘left.’
Once you are finished, remember to click ‘Save Changes.’
Step 5: Preview Your Reading Progress Bar
After setting up your progress bar, you can check your blog post to see the bar in action.
If you’d like to preview the bar without displaying it live on your site, simply click the ‘Preview’ button at the bottom. Thrive Theme Builder allows you to view your website on desktop, tablet, and mobile devices.
Feel free to make any necessary adjustments.
Here’s how our reading progress bar appears:
Method 2: Implement a Reading Progress Bar Using a Free Plugin
If you’re looking to add a straightforward reading progress bar to your WordPress posts at no cost, consider using the Catch Scroll Progress Bar plugin.
This plugin will automatically display a reading progress meter on your pages and posts, and it can be easily customized to fit your needs.
First, install the plugin from your WordPress admin dashboard. For detailed instructions, refer to our beginner’s guide on installing a WordPress plugin.
After completing that step, navigate to Catch Scroll Progress Bar in your WordPress dashboard. You will now find various settings to configure the progress bar.
This plugin allows you to adjust the position of the progress bar from the top to the bottom of the page. However, you can keep it at the default top position if you prefer.
You can also customize the background and foreground colors.
The background color represents the empty section of the bar before scrolling, while the foreground color indicates the progress as the reader scrolls down the page.
Next, you can modify the opacity, which determines the transparency of both the background and foreground colors. The opacity ranges from 0 to 1, where 1 is fully opaque and 0 is completely transparent.
Feel free to experiment with the values until you discover the opacity level that suits your preference.
Next, you can set the height and border radius of the progress bar.
For height, we recommend a value between 1 and 8, as anything higher may make the progress bar appear too large.
The border radius adjusts how rounded the corners of your progress bar appear. If you prefer sharp corners, simply enter ‘0.’
This plugin allows you to choose where to display the reading progress bar, including your homepage, blog page, archives, categories, and individual posts or pages.
Generally, you only need to add a reading progress bar to your WordPress blog posts. In this instance, we selected ‘Single page/post’ in the template condition settings.
We also enabled the ‘Posts’ option in the ‘Select the Post type to apply progress bar’ setting to ensure the bar only appears in blog posts.
Feel free to select the conditions that best fit your website’s needs.
Once you’re satisfied with your progress bar settings, click ‘Save Changes’ to apply them.
Now, when you preview your blog post on either mobile or desktop, the progress bar should be visible.
Method 3: Implement a Reading Progress Bar Using Code
You can also incorporate custom code to add a reading progress bar to your WordPress site.
Many tutorials suggest adding code directly to your theme’s functions.php file, but we advise against this, as even a minor error can disrupt your site.
Instead, we recommend using the WPCode plugin. It provides the simplest and safest method to add custom code in WordPress without modifying any core files.
We have extensively tested WPCode and found it to be a trustworthy and user-friendly option.
It features a comprehensive library of pre-made code snippets that you can easily add to your website, including one for a reading progress bar. Check out our complete WPCode review to discover more about its features and why we endorse it.
To begin, install and activate the free WPCode plugin. If you need assistance, refer to our tutorial on how to install a WordPress plugin.
Once the plugin is activated, navigate toCode Snippets » Libraryin the WordPress dashboard.
From there, look for the ‘Scroll Progress Bar’ in the library, hover over it, and click the ‘Use snippet’ button.
WPCode will automatically insert the code for you.
The plugin will also select the appropriate ‘Auto Insert’ method for you in the background.
After that, simply switch the toggle from Inactive to Active.
Then, click the ‘Update’ button.
Now, you can view a blog post on your website.
A simple progress bar should now be visible, like this:
Additional Tips to Keep Your WordPress Blog Readers Engaged
Looking to transform casual visitors into dedicated readers? We have the perfect solutions for you!
Explore these expert WordPress tutorials filled with strategies to keep your audience engaged:
- Customize the style of each WordPress post to enhance the visual appeal of your content.
- Design unique shape dividers to separate your text and help guide readers through your material.
- Incorporate emojis to reflect your personality and add a playful element to your blog.
- Feature new posts prominently for returning visitors to encourage them to return for more.
- Emphasize important points by highlighting text in your WordPress posts for better reader engagement.
- Include simple and elegant footnotes in your blog posts to showcase your research effectively.
- Impress your visitors by displaying rotating testimonials on your WordPress site.
- Implement a font resizer on your WordPress site to make your content accessible to all users.
We hope this article has helped you add reading progress bars in WordPress. You might also want to check out our comprehensive guide on editing a WordPress website and our top recommendations for the best Canva alternatives for website design graphics.
If you enjoyed this article, please subscribe to our YouTube Channel for WordPress video tutorials. You can also connect with us on Twitter and Facebook.
