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: 1)
<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>⚙︎HTML, CSS & Java Script Code (Style: 2)
<style>
/* Container for the circular progress bar with a black border */
#reading-progress-container {
position: fixed;
bottom: 30px;
right: 30px;
width: 70px;
height: 70px;
background: #ffffff;
border-radius: 50%;
border: 4px solid #000000; /* Black border */
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
display: flex;
align-items: center;
justify-content: center;
z-index: 9999;
transition: opacity 0.5s, transform 0.3s;
opacity: 0;
transform: scale(0.9); /* Scaled down initially */
overflow: hidden;
}
/* Inner circle to simulate water filling */
#water-fill {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 0;
background: linear-gradient(135deg, #3b82f6, #1d4ed8); /* Gradient to mimic water */
border-radius: 50%;
transition: height 0.2s ease;
}
/* Text for the percentage progress inside the circle */
#reading-progress-percentage {
position: relative;
font-size: 14px;
color: #000000; /* Black text */
font-weight: bold;
z-index: 1;
text-shadow: 1px 1px 3px rgba(255, 255, 255, 0.3); /* Light shadow to improve readability */
}
/* Hover animation */
#reading-progress-container:hover {
transform: scale(1);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}
</style>
<div id="reading-progress-container">
<div id="reading-progress-percentage">0%</div>
<div id="water-fill"></div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const progressBarContainer = document.getElementById('reading-progress-container');
const progressPercentage = document.getElementById('reading-progress-percentage');
const waterFill = document.getElementById('water-fill');
window.addEventListener('scroll', function() {
const totalHeight = document.body.scrollHeight - window.innerHeight;
const progress = (window.scrollY / totalHeight) * 100;
// Adjust water fill height based on scroll progress
waterFill.style.height = `${progress}%`;
// Update percentage text
progressPercentage.textContent = Math.round(progress) + '%';
// Show and scale the progress bar when scrolling starts
if (window.scrollY > 0) {
progressBarContainer.style.opacity = '1';
progressBarContainer.style.transform = 'scale(1)';
} else {
progressBarContainer.style.opacity = '0';
progressBarContainer.style.transform = 'scale(0.9)';
}
});
});
</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.
