How To Add A Reading Progress Bar In WordPress Without Plugin

Do you want to Add a reading progress bar to your WordPress website, but don’t want to add an additional plugin for that. Then this video is going to help you in that.

Here, I will tell you how you can add the reading progress bar in WordPress without using plugin. You just need a small coding inside your footer.php file.

Follow the below steps to enable the reading progress indicator.

First of all, Login to your WordPress dashboard and go to Appearance > Theme file editor.

Now under the right side find the footer.php option and than find the line </body> tag.

Paste the given code above this line and update the code. Now the reading progress bar will start show in the front-end.

reading progress bar in wordpress without plugin

<style>
#site-navigation{margin-top:10px!important;}
.reading-meter {position: fixed;top: 0!important;z-index: 1111;width: 100%;background-color: #f1f1f1;}
.K2progress {width: 100%;height: 7px;  z-index: 1111;background: #ccc;}
.progress-bar {height: 7px;background-color:tomato;width: 0%;}
</style>
<div class="reading-meter"><div class="K2progress"><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>

If the reading progress indicator is not showing after the code placement than clear your browser cache and try opening the site in an incognito mode.

You can also use the same code in Blogger website. Although I have already posted a tutorial on Reading progress bar in Blogger.

Benefits of Reading Progress Bar

Reading Progress bar is very helpful to grab user attention and gives continuous feedback in terms of how far he or she has completed the reading of article so far. So, it helps encourage users to scroll through the whole article.

In this way you can improve your dwell time and reduce the bounce rate. It also improve the ad viewability and you will get more clicks and impressions on your ads. Indirectly it can help you in boosting the earning as well as SEO.

So, it is an easy way to improve user experience on the website.

If you don’t want to add the coding and do it by plugin than you can install the read meter plugin. You can watch this video tutorial to learn more.