Today, we will talk about how to add a reading progress bar in the GeneratePress WordPress theme. This feature is useful if you want to enhance the style of your blog posts. It is a simple process, and you can complete all the steps within a minute.
Read: How to make a sticky header in WordPress
Previously, I searched everywhere for this feature. I tried various WordPress plugins, but none of them worked well. Just when I was about to give up, I found this code online. So, I gave it one last try, and the code worked like magic. You can see the result yourself in this blog—I am using the same code on my website.
Read: How to add author box in GeneratePress
With this code, you won’t face any problems with your blog’s performance. Unlike plugins, this method is super clean and lightweight. You just need to add the code below to your new element. I will explain the entire process later in this article.
Why Use a Reading Progress Bar?
There are many reasons to use a reading progress bar. One of them is to make your blog page look visually appealing. Another reason is to display how much content a user has scrolled through. This reading progress bar will automatically calculate your blog post’s length and show progress as users scroll through your page. Adding a reading progress bar will help visitors understand how much content remains in your post.
How to Add a Reading Progress Bar in the GeneratePress Theme
If you are already familiar with its benefits, let’s move ahead. Before we dive into the process, check out: How to make stylish headings in WordPress. You can create stylish headings to improve the default appearance of your blog.
To add a reading progress bar, you must have GeneratePress Premium. It is a WordPress plugin that supports GeneratePress premium features. If you have the budget, you can purchase it from their website. For those who can’t afford it, you can find alternative options online.
Contact me if you need the GP Premium plugin. I will provide it to you at no cost. After installing the GP Premium plugin, go to the GeneratePress settings and enable the “Elements” option. Once you do that, you are ready to proceed. Find me on LinkeDin.
Steps to Add a Reading Progress Bar:
- Go to Appearance > Elements.
- Create a new element.
- Select Hook.
- Give your Hook page a name.
- In the Hook bar, select wp_body_open.
- Turn on Execute PHP mode.
- Go to Display Rules. In the location bar, select Posts > All Posts.
- Copy the code below and paste it into your Hook page.
- Hit Save
- Refresh your site and go to a post page. You will see your new reading progress bar.
<style>
#site-navigation{
margin-top:10px!important;
}
.web-insights-reading-meter {
position: fixed;
top: 0!important;
z-index: 1111;
width: 100%;
background-color: #f1f1f1;
}
.web-insights-progress {
width: 100%;
height: 7px; z-index: 1111;
background: #ccc;
}
.progress-bar {
height: 7px;
background-color:#10b98e;
width: 0%;
}
</style>
<div class="web-insights-reading-meter">
<div class="web-insights-progress">
<div class="progress-bar" id="myBar"></div>
</div>
</div>
<script>
window.onscroll = function() {myFunction()};
function myFunction() {
var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
var scrolled = (winScroll / height) * 100;
document.getElementById("myBar").style.width = scrolled + "%";
}
</script>Note: I do not own this code. All credit goes to WebInsights.
You can customize the color according to your brand or site’s color. Additionally, you can modify the height of the progress bar to suit your preferences.
Final Thoughts
That’s how you can add a reading progress bar in the GeneratePress theme. If you need any help, do not hesitate to contact me. I will do my best to assist you as soon as possible. Until then, have a great day, and happy blogging!