How to Add a Reading Scroll Progress Bar in WordPress (Without a Plugin) 2024

WordPress is a fantastic platform for building websites and sharing your thoughts with the world. If you're a blogger or a content creator, you might want to enhance your readers' experience by adding a reading scroll progress bar to your WordPress site. This handy feature helps your audience track their progress as they scroll through your content. The best part? You can do this without using any plugins! In this guide, we'll walk you through the simple steps to add a reading scroll progress bar to your WordPress website using basic code.

What is a Reading Scroll Progress Bar?

Before we dive into the steps, let's understand what a reading scroll progress bar is. This is a visual indicator that appears on your webpage, showing readers how much of the content they've scrolled through. It's a small, unobtrusive bar that sits at the top of the page and gradually fills up as readers scroll down. This not only helps users understand their position in your article but also adds a touch of interactivity to your site.

Why Add a Reading Scroll Progress Bar?

Adding a reading scroll progress bar to your WordPress site can offer several benefits:
  • User Engagement: It keeps your readers engaged by providing a visual cue about their progress in the article.
  • Improved Navigation: Readers can easily navigate through long articles, knowing how much content is left to explore.
  • Enhanced User Experience: It adds a subtle but effective element to your site, enhancing the overall user experience.

Now, let's get started with the steps to add a reading scroll progress bar without using any plugins:

Step 1: Access Your WordPress Dashboard

Log in to your WordPress dashboard to access the backend of your website. You'll need to make changes to your theme files, so proceed with caution and consider backing up your site before making any modifications.

Step 2: Locate Your Theme's Files

In the WordPress dashboard, go to "Appearance" and then click on "Theme Editor." Look for the file named header.php on the right-hand side. This file is responsible for the header section of your website.

Step 3: Edit the header.php File

Click on the header.php file to open it for editing. Look for the closing </head> tag in the file. This is where we'll add our code to create the reading scroll progress bar.

Step 4: Add the HTML and CSS Code

Paste the following HTML and CSS code just before the closing </head> tag:
  #scroll-progress-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 5px;
    background-color: #3498db; /* Choose your preferred color */
    z-index: 1000;

  #scroll-progress-bar {
    height: 100%;
    width: 0;
    background-color: #e74c3c; /* Choose a contrasting color */

This code sets up the styling for your reading scroll progress bar. You can customize the colors to match your website's theme by modifying the values after background-color.

Step 5: Add the JavaScript Code

Now, still within the header.php file, add the following JavaScript code just before the closing </head> tag:
  window.onscroll = function() { updateProgressBar() };

  function updateProgressBar() {
    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    var scrollHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight;
    var scrollProgress = (scrollTop / scrollHeight) * 100;
    document.getElementById("scroll-progress-bar").style.width = scrollProgress + "%";

This JavaScript code makes the progress bar dynamic, adjusting its width based on the user's scroll position. It calculates the percentage of the page scrolled and updates the progress bar accordingly.

Step 6: Save Changes

After adding the HTML, CSS, and JavaScript code, click on the "Update File" button to save your changes to the header.php file.

Step 7: Preview Your Website

Visit your WordPress site and scroll through a long article to see the reading scroll progress bar in action. The progress bar should fill up as you scroll down, giving you and your readers a visual representation of the reading progress.


Adding a reading scroll progress bar to your WordPress site without using a plugin is a straightforward process. By following these simple steps, you can enhance the user experience on your website and make it more engaging for your readers. Customizing the colors and styles allows you to match the progress bar with your site's design, giving it a personalized touch. Enjoy improving your readers' journey through your content!

Post a Comment