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.
  1. 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>
  1. Open WordPress customizer from Appearance -> Customize.
  1. Click on Additional CSS.
  1. 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!

About the Author

Muhammad Qasim

Muhammad Qasim

Muhammad Qasim is an Electrical Engineer, Solo Entrepreneur, and Web Developer who loves troubleshooting gadgets and making cool things for the internet.

You can contact him on Email, LinkedIn, Twitter, or GitHub.

Leave a Comment