Add a Reading Progress Bar to Your WordPress Blog – Step by Step Guide

by

Introduction:

Ever felt a little lost while reading a long article online?
Your visitors feel that too.

Let’s fix it—by adding a reading progress bar to your WordPress site. It’s a small touch, but it makes your blog feel smooth, modern, and thoughtful. ❤️

And the best part? You can do it in minutes, even if you’re not a developer.

What We’ll Build

A horizontal progress bar at the top of the page that fills as the reader scrolls down the post.

Step 1: Add the HTML Container (Optional)

If you want full control, you can add a custom container to your theme, or skip this step and add it via JavaScript.

Add this just inside the <body> tag of your header.php file (in your child theme):

<div id="reading-progress"></div>

Step 2: Add the CSS for Styling

In your theme’s style.css file (child theme recommended), add:

#reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 4px;
  background: #3498db;
  width: 0%;
  z-index: 9999;
  transition: width 0.25s ease-out;
}

This creates a smooth, flat progress bar that stays at the top of the page.

Step 3: Add the JavaScript

Now enqueue your JavaScript file, or directly add this into your footer.php before </body>:

<script>
  document.addEventListener('scroll', function () {
    const scrollTop = window.scrollY;
    const docHeight = document.documentElement.scrollHeight - window.innerHeight;
    const scrollPercent = (scrollTop / docHeight) * 100;
    document.getElementById('reading-progress').style.width = scrollPercent + '%';
  });
</script>

This script calculates how far the user has scrolled and updates the bar width accordingly.

Alternative Method: Inject the Progress Bar via JavaScript

No need to touch your theme files. Just add this JavaScript (in progress-bar.js or enqueue it via functions.php):

<script>
  document.addEventListener("DOMContentLoaded", function () {
    const progressBar = document.createElement("div");
    progressBar.id = "reading-progress";
    document.body.prepend(progressBar);
    window.addEventListener("scroll", function () {
      const scrollTop = window.scrollY;
      const docHeight = document.documentElement.scrollHeight - window.innerHeight;
      const scrollPercent = (scrollTop / docHeight) * 100;
      progressBar.style.width = scrollPercent + "%";
    });
  });
</script>

Then inside functions.php, add this to enqueue the script:

wp_enqueue_script('progress-bar-js'
  , get_theme_file_uri('./progress-bar.js')
  , NULL
  , '1.0'
  , true
);

Done! Try It Out

Reload your blog post and scroll. You’ll see a beautiful, helpful progress bar guiding your reader through the content.

It makes reading easier. More intuitive. And honestly—it just feels good.

Let’s Talk

Want to make it fancier? Add gradient colors, animate it, or only show it on blog posts?

What would you love to improve in your blog’s reading experience?

Leave a comment below or shoot me a message—I’d love to hear your ideas.

Leave a Comment