When you visit a website, you’ll sometimes see a Progress bar on top of the website. And that bar Provides information about the content or the article length.
If you’ve already seen this kind of Progress bar before and are a website owner, this kind of question appears in your mind: How to Add a Reading Progress Bar in WordPress?
If you want to add a timer Progress bar on the top of your website, then you’re in the right place. This article will teach you how to add a reading Progress bar on your WordPress website. And we divide this article into two parts. First One: We’ll show you how you can add a reading timer on your WordPress website without a plugin, and the Second One is to add a timer Progress bar with a WordPress plugin. Get Blogging Tips, Tools, Article & Much More
Why do You need To Use Reading Progress Bar?
Reading Progress Bars is lots of benefits. For those reasons, many website owners have the reading Progress bar on their websites.
A Reading Progress Bar provides extra uniqueness for a website. This Progress bar tells your audience how many words they have already read and how much content they are left to read.
Most visitors, when they come to a website to read content, then most of the users have left the content without thoroughly reading the article. Lots number readers left the content before completing 70% of the article. This will increase your website bounce rate very severely. And bounce rate is very harmful to a growing website; if you’re a website owner, you must know how dangerous the website’s bounce rate is. In this case, the reading Progress bar helps decrease your website bounce rate.
YouTube Video Tutorial
Different methods to add a reading progress bar
Two different ways help you to Add a Reading Progress Bar in WordPress. If you’re a person who likes a new thing to learn, then I suggest you go with by script method.
On this method, you need to add a few lines of code on your theme footer.php section But don’t worry; we provide all of that code you need to paste on your theme footer section.
But if you want a simple method, I suggest you use a WordPress Plugin. Just install a plugin from your WordPress dashboard; with a few clicks, you’ll get the Reading timer Progress bar on the front end of your WordPress website. Read: How To Change WordPress Admin URL
Adding a Reading Progress Bar Manually to the WordPress
In this step, we’ll teach you how to add a Reading Progress Bar in WordPress without a plugin. We add a few lines of code to our theme footer section. If you want to go with Plugin to add Reading Progress Bar in WordPress, you can skip this step.
Step 1. Dashboard Login
If you want to add Reading Progress Bar without a WordPress plugin, you first need to login to your WordPress dashboard.
Step 2. Go to Theme Editor
After logging into your WordPress dashboard, you need to go to your website Theme File Editor. You can go on your Theme File Editor By following this process. Go to Appearance >> Theme File Editor when you’re in your WP dashboard. When you click the Theme file editor, then you complete this Step. Now jump into the next Step.
Step 3. Add Code On your footer.php Section
When you click on the Theme File Editor, you’ll see the footer.php file on the right side of your website. Then you need to click on the footer.php file.
When you click on the footer.php file, you’ll see the same view of the image we provide. Then paste this code before the </body> section on the footer.php file.
Copy The Script
When you paste the code on your footer.php file, then don’t forget to click on the Update file button.
Step 4. Check the Results
When you successfully add the following code on your footer.php file, then it’s time to check the Reading Progress Bar on your WordPress Website.
If any cases, you don’t see the Reading Progress Bar on your website, then try to visit your website on Incognito Window To see the final results.
Adding a Reading Progress Bar using a WordPress Plugin
Adding a Reading Progress Bar with the help of a plugin is more accessible than the previous process. If you’re a non-techy or a beginner in WordPress, I highly suggest you use a plugin method. Because this process is entirely safe to apply, but if you go with the script method, it can be dangerous for your website if you don’t put the code correctly on your theme footer.php file. If, by any chance, you put the script in the wrong file or delete a single line or a single comma, then it can cause your website to crash.
For this reason, I suggest you go with a WordPress Plugin to Add a Reading Progress Bar.
Step 1. Dashboard login
On the first step of a plugin method, firstly, you need to log in on your WordPress Dashboard. Then go to the Plugin >> Add New.
Step 2. Plugin Install & Activated
Then Search for Read Meter – Reading Time & Progress Bar for WordPress. Then you’ll find this plugin. Then you need to click on the Install Now button. When you click the Install button, you’ll see that the Install Now converted into Active Now.
Step 3. Add a Reading Progress Bar with a plugin
After installing & Activated the plugin, if you don’t find the plugin setting, you need to follow this step: Click on Settings & Then Read Meter. When you click the Read Meter, you’ll see the option to add Progress Bar. Then you need to click on this.
Step 4. Plugin Setting
You’ll come to the Progress bar section when you click on the Progress Bar. In this step, you must complete a few tasks to customize the reading Progress bar.
- Set the display position where you want to display your Progress bar.
- Then you select your Progress bar styles, like the Normal or Gradient Progress bar.
- Then select the Progress bar’s background color and the Progress bar color. You’ll see one extra color option if you choose a gradient color. One for primary color and the second one for secondary color.
- Then choose your bar thickness, but I suggest you use 7-8 px or your bar thickness. And save the changes.
Step 5.Final Results
When you save the changes, then it’s time to check your reading Progress bar, which you just created with a WordPress plugin. If you don’t see any changes, you can try to see your changes in an incognito window. Read: Top 5 Best WordPress Coupon Code Plugin
Conclusion
In this tutorial, we detail how to Add a Reading Progress Bar in WordPress with the help of a plugin and without a plugin. If you are still getting familiar with reading content, you can go with our video content. We embedded a video tutorial in this article to help you know better. If you have a friend or something facing a problem with any kind of issue, then share our website with him. And don’t forget to subscribe to our youtube channel.
