How To Add A Reading Progress Bar In WordPress Post Without Plugin

One method of how adding a reading progress bar to your WordPress site will bring all kinds of positive effects to users is that it informs readers how much of an article they have yet read. And one of GeneratePress For this purpose quickly and without the need for plugins using the Block Elements feature, custom CSS, and PhP Code. This guide shows you how to add a reading progress bar to your WordPress posts by using the block elements provided with GeneratePress itself.

Step 1 Create A New Block Element for GeneratePress

 First, you need to create a block element that will be the container of your progress bar/logs.

1. Log in to your WordPress Dashboard.
2. Go to Appearance > Elements.
3. Click Add New, and choose “Block” as the type of element to create.
4. WriteName of your block something like “Reading Progress Bar.”

Step 2: Add HTML Markup Using the Block Editor

Using the block editor, add a custom HTML block to define the structure of the progress bar.

1. In the block editor, click to add a new block.
2. Code and past the below code in the editor.

Step 3: Set the Display Rules for the Block Element

You also need to specify the display rules for block element (to make sure only posts, or whichever you prefer, include a progress bar).

1. Click the Display Rules dropdown at the foot of Block Element.
2. For location, select the category of Posts: All Posts is best since it will get you more areas on your site where this function can occur.
3. Under Hook, select before_header. This will place the progress bar outside in front of your title bar or generate_after_header if it is placed on top of content below a header (that is frequently where progress bars are put).
4. Save /Publish your element.

Step 4: Testing and Adjusting

For more detailed instructions or help with video tutorial, I have also shown the operation on video. Look at the tutorial above to see how you can include the feature in your own blog!

<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: 10px;  z-index: 1111;
  background: #ccc;
}

.progress-bar {
  height: 10px;
  background-color:tomato;
  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>