How to Add Reading Progress Bar in Generatepress Theme without using Plugin

Do you want to add reading progress bar in Generatepress theme? You’re in the right place. In this article, I’ll guide you on how to add a reading progress bar without using any plugin.

Adding a reading progress bar improves the user interaction with the website because a reading indicator progress bar helps the reader to identify how much has been completed and how much has been left to scroll down. 

Benefits for adding reading progress bar in website

Nowadays, user interaction is one of the most important key points for a good website. Many websites like Daily beast, Bloggerpassion use a progress bar to engage their readers. 

This reading progress bar motivates readers to complete their article while reading the article. 

To add reading progress bar in WordPress you can use several plugins from WordPress repository i.e.: Worth The Read.

How to add reading progress bar in Generatepress theme:

Creating a Progress Bar Hook in Generatepress

Login to your WordPress Dashboard and Navigate to Appearance > Elements.

Now, Navigate to Add New Element and Select Hook as a Choose Element Type.

Give any Hook name. For my case, I have written it as a Progress bar. 

<div class="progress-container">
    <div class="progress-bar" id="myProgressBar"></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("myProgressBar").style.width = scrolled + "%";
}
</script>

Copy the above code and paste this inside of the blank area as the image stated.

Now select wp_head Hook on the Setting tab.

Select Post  – All Post on the Location of Display Rule tab.

Now save this Hook.

Adding CSS on Progress bar 

Now, after adding Hook, it is time to add CSS to look more user attractive. For adding CSS to WordPress website, simply login to your WordPress Dashboard and Navigate to Appearance > Customize. 

Now go to Additional CSS and paste this CSS and hit Publish button.

/*** Progress bar **/
.progress-container {
  width: 100%;
  height: 8px;
  background: #ccc;  /** Change Progress bar background color **/
}

.progress-bar {
  height: 8px;
  background: #a70404; /** Change Progress bar color **/
  width: 0%;
  position:fixed;
  z-index:999;
}

Yaoo! Now, Your readers will know how long they have read your post and how long is left to finish it. However, keep the progress indicator subtle and simple user experience that does not ruin the user experience.

Here’s the reason for not recommending the WordPress plugin to add this reading bar.

Why not to use plugin in WordPress for every function

WordPress plugin is developed by professionals. Sometimes, some of the plugins may affect your website due to some constraints, functions overlapping.

• Sometimes plugins increase the delay time and speed of the website may be affected for this.
• Adding plugins in your website also stores additional space for your web server.
• Sometimes, due to the same function being overridden and the website throws some error or white screen.

Conclusion

This simple method helps you to add a reading progress bar for your website like this website. Hope you have easily implemented this on your website. You can also apply this step to other premium themes like Astra Pro, Neve Pro, Kadance Pro, and Genesis.

If you have any queries regarding this please comment below.