How To Add Reading Scroll Progress Bar In WordPress (Without Plugin)

Websites fight for your attention online, so making things easy is key.

Visitors should find navigation intuitive and engaging, and one way to enhance this experience is by adding a scroll progress bar to your WordPress website.

A scroll progress bar keeps users informed about their position on a page and adds a touch of modernity to your site. In this guide, we’ll walk you through the simple steps to seamlessly integrate a scroll progress bar.

There are a few ways to add a Reading scroll progress bar to your WordPress website. The easiest way to add a scroll progress bar to your WordPress website is to use a plugin.

But, It is not wise to use a dedicated plugin for a simple task like this. As we don’t know if the plugin will add extra lines of code to our website and cause speed-related issues.

That’s why We will use the custom code method for this. Don’t worry, the process is very Easy.

Steps for Adding Reading Progress Bar

Here, you can directly paste the code into the theme’s functions.php file or use a code manager plugin.

You need to use the Below code to add the Scroll Progress Bar or you can add the reading progress bar to your Wordpress website.

add_action('wp_body_open', function() {
    echo '<div id="wpcode-progress-bar"></div>';
});

add_action('wp_head', function() {
    echo '<style>
        #wpcode-progress-bar {
            position: fixed;
            top: 0;
            left: 0;
            width: 0%;
            height: 5px; /* Increase thickness of Bar */
            background-color: #007bff; /* Change the color as needed */
            z-index: 99;
        }
		@media( min-width: 769px ) {
		.admin-bar #wpcode-progress-bar {
			top: 32px;
		}
		}
    </style>';
});

add_action('wp_footer', function() {
    echo '<script>
        document.addEventListener("DOMContentLoaded", function() {
            document.addEventListener("scroll", function() {
                var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
                var scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
                var clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
                var scrolled = (scrollTop / (scrollHeight - clientHeight)) * 100;

                document.getElementById("wpcode-progress-bar").style.width = scrolled + "%";
            });
        });
    </script>';
});

First of all, Install and activate the WP code Plugin on your Wordpress website. This is a free plugin and it will help you manage all of your custom codes from your dashboard.

Now you can Go to the plugin settings and add the custom code on it. Select the Use snippet option as shown in the below image.

How to add Code snippet in WP code plugin in WordPress

Now, You need to paste the provided code and choose the code type to PHP snippet. Assign a name and activate the snippet.

Now the Reading Progress bar will be added to your Wordpress website.

YOu can further adjust the scroll bar, You can change the thickness of the bar, and change its color by changing the CSS value on the code. (Check comments Line)

I hope you have successfully added a Reading Progress Bar to your Blogger website. If you have any doubts, do let me know in the comment section.