Reading Progress Bar in Wordpress Without Plugin?

A reading progress bar is a visual tool used on websites and in some apps to show a reader how far they’ve gotten through the content. It typically appears as a horizontal bar that fills up as you scroll down the page.

Table of Contents

Here are some key things to know about reading progress bars:

Functionality: They are based on your scrolling position. As you scroll down the page, the bar fills up, indicating how much you’ve read and how much is left.
Benefits: They can improve user experience (UX) by giving readers a sense of how long the content is and how much time they might invest in reading it.
Placement: These bars are usually found at the top or bottom of the page. They can also be vertical and placed on the side of the content.
Implementation: Often implemented through Javascript or with plugins for platforms like WordPress.

To add a reading scroll progress bar to your WordPress site without using a plugin, you can follow these steps:

Step 1: Add the necessary code to your theme’s footer.php file

You’ll need to add the following code to your theme’s footer.php file:

<div class="reading-meter">
  <div class="progress-bar" style="width: 0%;"></div>
</div>

This code creates a container for the progress bar and an empty progress bar element.

Step 2: Add the JavaScript code to your theme’s functions.php file

You’ll need to add the following JavaScript code to your theme’s functions.php file:

function add_reading_progress_bar() {
  jQuery(document).ready(function($) {
    var progressBar = $('.reading-meter .progress-bar');
    var progressBarWidth = 0;
    var progressBarMaxWidth = progressBar.width();
    var scrollPosition = 0;
    var scrollHeight = $(document).height() - $(window).height();

    $(window).scroll(function() {
      scrollPosition = $(window).scrollTop();
      progressBarWidth = (scrollPosition / scrollHeight) * progressBarMaxWidth;
      progressBar.css('width', progressBarWidth + '%');
    });
  });
}
add_action('wp_footer', 'add_reading_progress_bar');

This code uses jQuery to add an event listener to the window’s scroll event. It calculates the progress bar’s width based on the scroll position and updates the width accordingly.

Step 3: Add the necessary CSS styles to your theme’s stylesheet

You’ll need to add the following CSS styles to your theme’s stylesheet:

.reading-meter {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1111;
  background-color: #f1f1f1;
}

.progress-bar {
  height: 7px;
  background-color: #ccc;
  z-index: 1111;
  transition: width 0.5s;
}

.progress-bar-full {
  width: 100%;
}

These styles position the progress bar at the top of the page, set its background color, and define its height and width. They also add a transition effect to the progress bar’s width.

Step 4: Add the necessary CSS classes to your theme’s stylesheet

You’ll need to add the following CSS classes to your theme’s stylesheet:

.K2progress {
  width: 100%;
  height: 7px;
  z-index: 1111;
  background: #ccc;
}

.progress-bar {
  height: 7px;
  background-color: tomato;
  width: 0%;
}

These classes define the styles for the progress bar and its container.

That’s it! With these steps, you should now have a reading scroll progress bar on your WordPress site without using a plugin.