Add A Reading Progress Bar (PHP)

The Reading Progress Bar snippet allows you to add a sleek reading progress bar across the top of the screen on single blog posts—helping readers visually track how much of the post they’ve read and how much remains. It’s a great way to enhance user experience, especially for longer-form content.

Code Snippet

function gb_reading_progress_bar() {
    if (is_single()) {
        ?>
        <script>
        document.addEventListener('DOMContentLoaded', function() {
            var progressBar = document.getElementById('gb-reading-progress');

            window.addEventListener('scroll', function() {
                var contentWrap = document.querySelector('.content-wrap .entry-content') || document.querySelector('.entry-content') || document.querySelector('article');
                var scrollY = window.scrollY;
                var viewportHeight = window.innerHeight;
                var progress = 0;

                if (contentWrap) {
                    var contentHeight = contentWrap.offsetHeight;
                    var contentTop = contentWrap.getBoundingClientRect().top + window.scrollY;
                    var scrollEnd = contentTop + contentHeight - viewportHeight;

                    if (scrollY >= contentTop) {
                        progress = (scrollY - contentTop) / (scrollEnd - contentTop) * 100;
                        progress = Math.min(progress, 100);
                    }
                } else {
                    // Fallback to full page scroll
                    var docHeight = document.body.scrollHeight - viewportHeight;
                    progress = (scrollY / docHeight) * 100;
                    progress = Math.min(progress, 100);
                }

                if (progressBar) {
                    progressBar.style.width = progress + '%';
                }
            });
        });
        </script>
        <?php
    }
}
add_action('wp_footer', 'gb_reading_progress_bar');

How to Set It Up

⚠️ Note: This feature requires Kadence Pro and utilizes the Elements module.

1. Create a Fixed Kadence Element:
   • Go to Kadence → Elements and create a new element.
   • Set the Element Type to Default.
   • Within the element, add a section, then nest another section inside it (a section within a section).
2. Parent Section:
   • Give it a background color (this acts as the bar container).
   • Set the height to 5px.
   • Add an HTML ID of gb-reading-container.
   • Also set the height to 5px.
   • Add an HTML ID of gb-reading-progress
   • Set the Placement to Fixed Top After Scroll so the bar appears after the user scrolls a little.
   • Assign it to display only on single posts.
   • Set the “Scroll Distance Until Appears” to around 100px (adjust this based on your header height for optimal visibility).
   • Add the custom JavaScript above (via Code Snippets plugin – see below) to animate the progress bar based on scroll position.
3. Child Section:
   • Give it a contrasting background color (this will visually fill as the user scrolls).
   • Add an HTML ID of gb-reading-progress
   • Set the height to 5px.
   • Set the Placement to Fixed Top After Scroll so the bar appears after the user scrolls a little.
   • Assign it to display only on single posts.
   • Set the “Scroll Distance Until Appears” to around 100px (adjust this based on your header height for optimal visibility).
   • Add the custom JavaScript above (via Code Snippets plugin – see below) to animate the progress bar based on scroll position.
4. Assign it to display only on single posts:
   • Set the “Scroll Distance Until Appears” to around 100px (adjust this based on your header height for optimal visibility).
   • Add the custom JavaScript above (via Code Snippets plugin – see below) to animate the progress bar based on scroll position.
5. Add the custom JavaScript:
   • Install the Code Snippets plugin (see below), then the code (see above) to animate the progress bar based on scroll position.

Where to Add This Code

Here are two easy options:

Option 1: Install WPCode Lite Plugin

This is by far the safest method and is beginner friendly if you’re not used to editing theme files.

1. Search for WPCode Lite plugin in your website dashboard.
2. Install the plugin.
3. Go to Snippets > Add New.
4. Give your snippet a name like “Add A Reading Progress Bar.”
5. Paste the code above.
6. Choose “Run snippet everywhere”.
7. Choose PHP, not CSS or any other.
8. Save and activate.

✅ Done! Your readers can now read your content using a progress bar.

Option 2: Functions.php

We don’t advise this option unless you’re a developer or if you feel comfortable editing theme files:

1. Open your functions.php file.
2. Paste the snippet at the bottom.
3. Save and upload if needed.

💡 Tip: Always use a child theme to avoid losing changes when your theme updates.

NOTE: We use WPCode Lite because it’s more flexible than others, there’s no need to upgrade to pro unless you’re a developer, it offers many free snippets, can choose where to run it, won’t publish if the code is wrong so won’t break your site, PHP is included compared to others you have to buy the their pro, and best of all the free version can easily be downloaded from your WordPress Repository.