How to Add Scroll Reading Progress Bar for WordPress [Beginner’s Guide]

Have you ever found yourself scrolling through a long article, wondering how much more there is to go? That’s exactly why a reading progress bar WordPress can be a game-changer for your website.

It is a simple and effective way to keep your visitors on the website, as it helps them keep track of their reading process when navigating long pieces of content.

This will keep them motivated to reach the end and improve the overall experience by demonstrating that you value the reader’s time and interest.

The good thing is that you can easily add a reading progress bar in WordPress using plugins and custom code.

Let’s dive in.

What is a Reading Progress Bar?

A reading progress bar is a visual indicator that shows how much of an article or page a user has read. Typically displayed at the top or side of the screen, it fills up as the user scrolls down, providing a clear sense of progress.

It is a simple and thoughtful design element, which can help improve the dwell time on your website because the readers know exactly how long it takes to go through the content.

Simply put, if you want your readers to stay on your website, the WordPress progress bar is a useful addition.

Benefits of Adding a Scroll Reading Progress Bar

Adding a reading progress bar in WordPress can have a positive impact on the website and its visitors-

• Enhances user engagement: A progress bar visually motivates readers to continue scrolling, making them more likely to finish reading your content. This can help reduce the bounce rate and increase the dwell time on your website.
• Encourages users to read till the end: When users see their progress in real time, they’re less likely to abandon the page halfway, and it enhances the reading experience, especially for long-form content.
• Elevates website design: It enhances your website design and functionality, leaving a better impression on the visitors and building trust.

Want to build a simple and minimal website? Learn How to Create WordPress One Page Navigation website for your business.

How to Add a Scroll Reading Progress Bar in WordPress

If you’re looking to add a scroll progress bar in WordPress, there are 3 simple ways to do so. Let’s understand them.

Method 1: Using a WordPress Plugin

A WordPress plugin is one the easiest and simplest ways to add a reading progress indicator to your WordPress website.

These plugins are user-friendly, with plenty of features and customization options available to help you design a functional reading progress bar.

Here are some of the best plugins you can use to add a reading progress bar in WordPress-

A. Reading Progressbar

Reading Progressbar is a popular plugin that lets you configure a reading position indicator on your website. It is lightweight and flexible, and it can be designed with a fully customized reading progress bar and flexible positioning.

You can also display your progress bar on certain templates in addition to post types.

B. Read Meter

With Read Meter, you can place a reading progress bar at the very top or bottom of your page. You can opt to add the progress bar for only certain post types and also customize the color to match your website design.

Further, the plugin also lets you add the estimated reading time to your post.

C. Catch Scroll Progress Bar

Catch Scroll Progress Bar is another lightweight plugin to add a basic reading progress indicator to your site.

You get access to simple customization options to keep the design minimal, as well as post type and template targeting, so you can use the progress bar based on your requirements.

D. WP Reading Progress

WP Reading Progress is a user-friendly plugin that allows you to add a customized reading progress bar wherever you want on the site.

You can automatically stick it at the top or bottom of the page or use CSS to display it anywhere else. The plugin also offers post-type targeting and basic style options.

Now let’s understand how you can add a WordPress progress bar on your website using the Reading Progressbar plugin-

Step 1: Install the Reading Progressbar plugin

On your WordPress admin dashboard, go to Plugins > Add New Plugin and search for Reading Progressbar.

Install and activate the plugin to get started.

Step 2: Configure the settings

Once you have activated the plugin, you can quickly configure the settings to set up the progress bar.

Go to Settings > Reading Progressbar to set the Progressbar height, foreground and background color, Progressbar position, or HTML ID if you want to place the bar manually.

Next, scroll down to select the templates and the post types where you want to apply the progress bar.

Step 3: Save and view the progress bar on your website

Click on Save Changes to add the progress bar.

Now, go to your live website to see the progress bar in action.

Make website navigation seamless with a professional sticky header on your website. Know How to Create Sticky Header Navigation in WordPress.

Method 2: Adding a Progress Bar Using Custom Code

You can also apply a progress bar to your posts using a custom code. Now, you can do this in two ways. First, add the code directly to your theme’s functions.php file. But while it is easy, even the smallest mistake when editing the theme’s core files can break the website.

So, instead, you can use a second way to add a progress indicator using a code- use the WPCode plugin. It is a safe way to add custom code in WordPress without editing the core files.

Once you install and activate the WPCode plugin, go to Code Snippets > Library from the WordPress dashboard.

Search for Scroll Progress Bar in the library.

Click on the Use Snippet button, and the plugin will automatically add the code for you. Then, toggle the switch from Inactive to Active and click on the Update button.

Now, you can see the reading progress bar on your website.

Method 3: Adding a Reading Progress Bar Using Gutenberg Blocks

If you’re using the Gutenberg page editor to build your website, an excellent way to add the reading progress bar is using Nexter Blocks.

Nexter Blocks is a lightweight, user-friendly plugin that offers you tons of design and functional blocks to enhance your website. The plugin also helps you add a fully customized reading progress bar with access to tons of design options.

To get started, install and activate Nexter Blocks from the WordPress plugin library. Now, go to Nexter > Nexter Blocks on your WordPress dashboard, search for the Progress Bar block, and turn on the toggle to activate it.

Click on Save Changes. This will activate the block for your website.

Customizing Your Reading Progress Bar

Once the block is activated, you can take advantage of amazing features such as multiple styling options, linear and circular bars, or multiple image options to customize the progress bar.

Add the block to your Gutenberg editor and select an appropriate layout from the Select Layout section. Here, you can display the progress bar as a linear or circular bar based on your design requirements.

Here are the other customization options you can check out

• Progress bar style: In the Style section, you can select a style for your linear or circular progress bar, add the title and subtitle, add a symbol, or choose to show or hide the value from the progress bar with the Display Number toggle. In the Value field, set a value between 0 and 100 to control how much of the progress bar is filled in.

• Image/Icon: From the Icon/Image section, choose the type of visual you want to display and select where to position it.

• Customize the progress bar: Under the Style tab, you can adjust the top margin, icon style, text style, and the background color of the progress bar.

When styling the scroll progress bar in WordPress, make sure the design is responsive and mobile-friendly to ensure a seamless experience across devices.

Further, you can also add smooth animations using Nexter Blocks for better website aesthetics.

Help your website visitors search through your blog content easily. Check out How to Add WordPress Ajax Search Using a Plugin on your website.

Wrapping Up

Adding a reading progress bar in WordPress enhances user engagement and improves the reading experience. You can easily do so using a plugin, custom code, or the Nexter Blocks and display a creative progress bar on your website.

Nexter Blocks provides an easier, no-code solution to add a Gutenberg reading progress bar along with 90+ customizable blocks to enhance your WordPress site. Try Nexter Blocks to simplify your WordPress editing experience!

FAQs on Adding a Scroll Reading Progress Bar in WordPress