Add a Reading Progress Bar in WordPress Post Without a Plugin

Adding a reading progress in WordPress posts can significantly improve user engagement and provide a better reading experience. This visual tool shows readers how much content they have consumed and how much is left, making it easier for them to stay on your page. Follow these steps to add a reading progress bar to your WordPress site without relying on plugins.

1. ❓Why Add a Reading Progress Bar?

• Enhanced User Engagement: A progress bar keeps readers engaged by indicating their reading progress.
• Lower Bounce Rate: Visual cues can encourage users to continue reading, reducing the likelihood of them leaving your site prematurely.
• Better Reading Experience: Especially useful for long articles, it helps readers gauge how much content is left.

2. ⚙️Adding a Reading Progress Bar Without a Plugin

To add a reading progress bar manually, follow these steps:

➤1. Create a New Element

• Log in to Your WordPress Dashboard.
• Go to 'Appearance > Elements‘.
• Click 'Add New‘ to create a new element.

➤2. Choose the Type of Element

• Use the ‘Hook‘ element type.
• Add a title.
• Now pase the ‘code‘ which is given below.

⚙︎HTML, CSS & Java Script Code

<style>
        #reading-progress-container {
    position: fixed;
    width: 100%;
    height: 5px;
    background: #f3f3f3;
    top: 0;
    left: 0;
    z-index: 9999;
    transition: opacity 0.5s;
		opacity: 0;
    
}

#reading-progress-bar {
    height: 100%;
    width: 0;
    background: #3b82f6; /* Change this to your preferred color */
    position: relative;
}

#reading-progress-percentage {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    background: #3b82f6; /* Same color as the progress bar */
    color: #fff;
    padding: 2px 6px;
    border-radius: 12px;
    font-size: 10px;
    white-space: nowrap;
}
    </style>

<div id="reading-progress-container">
    <div id="reading-progress-bar">
        <span id="reading-progress-percentage">0%</span>
    </div>
</div>

<script>
        document.addEventListener('DOMContentLoaded', function() {
            const progressBarContainer = document.getElementById('reading-progress-container');
            const progressBar = document.getElementById('reading-progress-bar');
            const progressPercentage = document.getElementById('reading-progress-percentage');

            window.addEventListener('scroll', function() {
                const totalHeight = document.body.scrollHeight - window.innerHeight;
                const progress = (window.scrollY / totalHeight) * 100;
                progressBar.style.width = progress + '%';
                progressPercentage.textContent = Math.round(progress) + '%';

                // Position the percentage bubble correctly within the progress bar
                const bubblePosition = progressBar.offsetWidth - progressPercentage.offsetWidth / 2;
                progressPercentage.style.left = bubblePosition + 'px';

                // Make the progress bar visible when scrolling starts
                if (window.scrollY > 0) {
                    progressBarContainer.style.opacity = '1';
                } else {
                    progressBarContainer.style.opacity = '0';
                }
            });
        });
    </script>

➤3. Configure the Hook:

• Select Hook Position: Choose where you want your hook to be executed. For example, you can select positions like ‘wp_body_open’ and check mark on ‘Execute PHP‘ opyion.
• Display option: Go to ‘Display Rules Tab’ and select location ‘Post’ > ‘All Posts’.

➤4. Now Save or Publish it.

3. 🔎Testing and Optimization

• Test Across Devices: Ensure the progress bar is visible and functions correctly across various devices and screen sizes.
• Optimize Performance: Monitor the performance impact, if any, and adjust the CSS and JavaScript as needed to maintain a smooth user experience.

🎯Conclusion

Adding a reading progress bar to your WordPress posts without a plugin can enhance user engagement and improve the overall reading experience. By following the steps outlined above, you can implement this feature with minimal effort and without additional plugins.