Enhance the reading experience by displaying a progress bar at the top of your website that fills as visitors scroll through a post. This feature is commonly found on news, blog, and documentation websites.
Steps
- Open your active theme’s
functions.phpfile or a custom functionality plugin. - Add the code below.
- Save the file.
- Open any single post and start scrolling to see the reading progress bar.
Benefits
- Displays a live reading progress bar.
- Improves user engagement.
- Helps readers track article progress.
- Works automatically on all single posts.
- Lightweight solution without additional plugins.
/**
* Display a reading progress bar on single posts.
*/
function wpfolks_reading_progress_bar() {
if ( ! is_singular( 'post' ) ) {
return;
}
?>
<style>
#wpfolks-reading-progress{
position:fixed;
top:0;
left:0;
width:0;
height:4px;
background:#0073aa;
z-index:999999;
transition:width .1s linear;
}
</style>
<div id="wpfolks-reading-progress"></div>
<script>
document.addEventListener('scroll', function () {
const scrollTop = window.scrollY;
const docHeight = document.documentElement.scrollHeight - window.innerHeight;
const progress = (scrollTop / docHeight) * 100;
document.getElementById('wpfolks-reading-progress').style.width = progress + '%';
});
</script>
<?php
}
add_action( 'wp_footer', 'wpfolks_reading_progress_bar' );
