How to Add Reading Progress Bar to WordPress without Plugin

A reading progress bar can be a valuable addition to your WordPress blog as it improves the overall user interface.

Here’s a simple way to add it to your WordPress blog without using any plugins:

1. Open Theme File Editor from Appearance.
2. Select the footer.php file.

3. Before the closing tag, paste the following code and click on Update File:

<div id="progress-bar"></div>
<script>
  document.addEventListener('scroll', function() {
    var maxScroll = document.body.scrollHeight - window.innerHeight;
    var currentScroll = window.scrollY;
    var progressWidth = (currentScroll / maxScroll) * 100;
    document.getElementById('progress-bar').style.width = progressWidth + '%';
  });
</script>

Now its time to customize the progress bar using CSS.

4. Open WordPress customizer from Appearance -> Customize.

5. Click on Additional CSS.

6. Add the following CSS and click on Publish button.

#progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 0;
    height: 5px;
    background-color: #267905;
    z-index: 9999;
}

This will show the progress bar at the top. If you want it at the bottom, simply replace the top: 0; (2nd line in CSS) with bottom: 0;. Here’s how the modified CSS will look like:

#progress-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 0;
    height: 5px;
    background-color: #267905;
    z-index: 9999;
}

---

That’s it. If you have any questions, feel free to ask me!