How To Add Reading Progress Bar In WordPress (With Out Plugin)

Writing mind blowing shows the creativity of the writer and it has deep effects. But making it more engaging is is best way to get full attention of visitor. A reading progress bar is the way to make your content more engaging.

Reading Progress Bar helps visitor to know its position on the page as visitor scroll downs the page the progress bar will be filled. In this article, I will guide you how to add a beautiful reading progress bar in your WordPress website without any plugin. Using a dedicated may cause on your website speed or any other ranking factor. Additionally may be plugin will add extra code into your website.

Reading Progress Bar Code

Keeping these thigs in mind we shall use code to do this. Method is very simple just follow the steps but first copy the code below ?.

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; /* Increases thickness of Bar */
            background-color: #277edb; /* Change the color as you want */
            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>';
});

• In your website dashboard go to Appearance > Theme File Editor and open it.
• Now open Function.php and paste the code there and update the file.

• Check that if it is working or not?

Additional Tips To Customize The Code

Here are steps you can follow to customize the progress bar code according to your preferences:

1. Color Customization:
   • Identify the section of the code where the background color of the progress bar is defined in the CSS (background-color property).
   • Replace the hexadecimal color code (#277edb) with the desired color code or use a color picker tool to select a new color.
   • Save the changes and refresh the webpage to see the updated color of the progress bar.
2. Height Adjustment:
   • Locate the CSS property that defines the height of the progress bar (height property).
   • Modify the numerical value associated with the height property to increase or decrease the thickness of the progress bar.
   • Test different height values until you achieve the desired thickness, and save the changes.
3. Positioning:
   • Determine the preferred position of the progress bar on the screen (e.g., top, bottom, or custom position).
   • Adjust the CSS properties related to the positioning of the progress bar, such as position, top, bottom, left, or right.
   • Experiment with different values to position the progress bar where desired and ensure it does not obstruct other elements on the page.
4. Animation Effects:
   • Explore options for adding animation effects to the progress bar, such as transitions or animations when the page is scrolled.
   • Integrate CSS animations or JavaScript functions to create desired animation effects, ensuring they enhance the user experience without being distracting.
   • Test the animation effects across different browsers and devices to ensure compatibility and smooth performance.
5. Visibility Controls:
   • Implement conditional logic or JavaScript functions to control the visibility of the progress bar based on specific criteria.
   • Define conditions under which the progress bar should be shown or hidden, such as scroll depth, page type, or user interactions.
   • Test the visibility controls under various scenarios to ensure the progress bar appears and disappears as intended.
6. Custom Text or Icons:
   • Determine if custom text or icons should be added to the progress bar to provide additional context or branding.
   • Modify the HTML structure of the progress bar to include text or icon elements within the <div> container.
   • Style the custom text or icons using CSS to ensure they blend seamlessly with the progress bar design.
7. Conditional Logic:
   • Implement conditional statements or WordPress hooks to conditionally display the progress bar based on specific criteria.
   • Utilize WordPress functions or plugins to define conditions related to user roles, page attributes, or other dynamic factors.
   • Test the conditional logic across different scenarios to verify that the progress bar appears or disappears as expected.

By following these steps, you can customize various aspects of the progress bar code to align with your website’s design, branding, and functionality requirements.

Working of the Code:

The provided code adds a progress bar to WordPress websites that indicates the scroll progress of the page. Here’s how it works:

1. Initialization: The code hooks into WordPress action hooks (wp_body_open, wp_head, wp_footer) to inject HTML, CSS, and JavaScript necessary for the progress bar.
2. HTML Structure: The progress bar is represented by a <div> element with the ID wpcode-progress-bar. This <div> is initially empty and has no width.
3. CSS Styling: The CSS injected in the <head> section styles the progress bar. It sets its position to fixed at the top of the page, with a height of 5px (adjustable), and a background color of #277edb (adjustable).
4. Media Query: The CSS includes a media query to adjust the position of the progress bar if the WordPress admin bar is present, ensuring it doesn’t overlap with the admin bar.
5. JavaScript Functionality: The JavaScript injected at the end of the page calculates the scroll progress as a percentage based on the current scroll position compared to the total scrollable height of the page. It updates the width of the progress bar accordingly, creating the visual effect of the progress bar filling up as the user scrolls down the page.
6. Event Listeners: The JavaScript adds event listeners to the DOMContentLoaded event to initialize the progress bar and to the scroll event to update the progress bar width as the user scrolls.

Overall, the code dynamically creates a progress bar that visually represents the user’s scroll progress on the page.

FAQs

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; /* Increases thickness of Bar */
            background-color: #277edb; /* Change the color as you want */
            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>';
});