fbpx

How To Add Reading Progress Bar In WordPress? Simplest Method

Have you ever seen reading progress bar on any website you visited?

I did, one day I was reading a blog post on a blog. I saw that a bar on the top of my screen is moving forward as I scroll down the page.

It filled entirely when I finished reading the post.

It was showing me how much I read and how much I need to read more. It encouraged me to read the entire post.

It was reading progress bar… Don’t know you what is that?

What Is Reading Progress Bar?

Reading progress bar is like a loading bar that shows on the top of the screen that moves ahead as you scroll down to read the post. And when you scroll up it moves back.

It shows you how much you have read and how much remaining to read…

Reading progress bar is good for user experience… as it shows the time to read a complete blog post and encourage readers to read the entire post.


Why Should You Add Reading Progress Bar?

It is good for blogs that publish long-form articles. Usually, readers skip reading long articles because of time.

But if you are using a progress bar on your blog then it will encourage readers to read your blog post.

Having a bar which shows estimates the gauge you need to read more. It shows that you value your readers’ time.

Adding a reading progress bar is very easy to add in the WordPress blog and you can add it for FREE.

There are many reading progress bar WordPress plugins which you can use.


How To Add Progress Reading Bar In WordPress?

There are many useful reading progress bar WordPress plugins available but I am using the Worth The Read for this tutorial.

For adding the reading progress bar using Worth The Read plugin. First, you need to download and install Worth The Read by going to Plugins>Add New.

How To Add Reading Progress Bar In WordPress? Simplest Method

Once it Installed, activate to make it LIVE on your WordPress site.

Now find the Worth The Read section in the Dashboard, You can find it after the settings tab on left-side menus.

Go to Worth The Read>Reading Progress. You will see two tabs functionality and style.

Functionality

Worth the read,staymeonline

Choose Display On: Choose where you want to show your Reading Progress bar, you have three options Posts, Pages and Homepage.

Custom Post Type: If you have added any Custom Post type on your WordPress website, you can select that from here if you want to show the progress bar on custom post type.

Include Comments: The reading progress bar is for the length of the entire post if you want to include the comments in its length then On it. I recommend you to make it OFF.

Placement: Choose where you want to show the bar, you can select from the top, bottom, left and right. Mostly bloggers place it on the TOP.

Offset: If you don’t want to cover up the menus and header then select it according to your choice. I recommend keeping it Zero.

RTL(Right to Left): Progress bar usually moves from left to right. but if you want it to move vice-versa then make it On.

Fixed Opacity: On this option, the opacity will not change when readers will scroll the page, it will be fixed.

Non-Touch Devices: Your sites also visited by users who uses non-touch devices. Turn this option On if you want to show a reading progress bar on non-touch devices like desktop and computers.

Touch Devices: A site mostly visited by the Android phone. Choose this option to show your progress bar for touch devices like tablet and Android phones.

Touch Offset: You can set different Offset for touch devices.

Content Offset: You can offset where the progress bar thinks the content begins. This is handy if you have a large image at the beginning of your content that you want the progress bar to ignore, for instance.

Style

worth the read style, staymeonline

Thickness: You can set the Thickness of your reading progress bar from this option.

Foreground: Select the colour of the part which moves.

Foreground Opacity: Select the opacity of the foreground colour using this option.

Background: Choose the background colour of your reading progress bar.

Comments Background: This is only for if you include comments in your bar, you can select a different colour than background for comments part which will move.

Transparent Background: If you want to make your background transparent then On this option.

Once you set all the options according to your needs and to match your theme style. Click on the Save Settings and visit your live website to check.

You can watch this video also to enable reading progress bar in WordPress…

I hope now you got how you can add a reading progress bar on your WordPress website. Worth The Read is a simple plugin for this task.

But there are many other plugins also for the same task, here are some of them.


Other Reading Progress Bar WordPress Plugins

As WordPress has tons of plugins in the WordPress plugin directory where you can find plugins of every task you do in WordPress.

Reading Progress Bar

How To Add Reading Progress Bar In WordPress? Simplest Method

Another simple plugin for adding a progress bar, this will help you to add a progress bar for your readers to let them know how far along they read and how much remaining.

Options of Reading Progresbar:

  • Progress bar’s height
  • Foreground colour
  • Background color
  • Position (top, bottom, custom)
  • Class/ID of HTML element to fix the bar (if custom position selected)
  • Page templates
  • Post types (natives or custom)

Check Out Reading Progressbar here…

Reading Progress Indicator

Reading Progress Indicator is a popular plugin with 5 start rating and 1000+ active installs.

It helps in creating a vertical reading progress bar on your blog that will inform your readers about their reading position.

Check Out Reading Progress Indicator here…

WP Reading Progress

How To Add Reading Progress Bar In WordPress? Simplest Method

WP Reading Progress helps you in adding reading progress bar that helps your readers in knowing how much more they need to read the post.

It is great for blogs that have a long post, it encourages readers to read the entire blog post.

Check Our WP Reading Progress here…

Read Meter – Reading Time & Progress Bar

How To Add Reading Progress Bar In WordPress? Simplest Method

The read meter will display an estimate reading time along with an attracting progress bar that will encourage your readers to read the entire blog post.

Readers usually skip the post because they found it very long to read but if you are using Read Meter plugin then it will show them the estimated time and a progress bar that will encourage them to read.

Check Out Read Meter here…


Try It Yourself

Reading Progress bar will help you to encourage your readers to read the entire blog post. It displays the gauge and the estimated reading time to your readers.

Now you know how to add reading progress bar and the plugins you can use to add one for your blog.

I hope you liked this post and if you did then must share it with others.

How to add reading progress bar in Wordpress, staymeonline, ravi dixit, reading progress bar, reading bar, wordpress

🙏 One Humble Request!

I’ve put a lot of effort and done lots of research in writing this post to provide value to our blogging community. I will be glad if you share this post on social media. Sharing is caring 🤗

Share on facebook
Share on twitter
Share on telegram
Share on pinterest
Ravi Dixit

Ravi Dixit is a Blogger and Affiliate Marketer, He is the founder of StayMeOnline Who Loves to help others. Travelling and learning new things online are his first love. "I only want a life without any boundaries- Ravi Dixit"


Affiliate Disclosure: Some of the links on this page are affiliate links. If you buy any product using an affiliate link placed on this blog, it will not add any extra cost in the total price of the product rather I will get some commission from the company. This will show me 💖 from your side, for more details read this...

Join Community Of Like-Minded People

StayMeOnline Community For Bloggers (2)

24 thoughts on “How To Add Reading Progress Bar In WordPress? Simplest Method”

  1. This post is very helpful, I got lots of help by other posts too, Lots of blessing for you .Thanks for sharing Hello this website is very helpful for me and articals was very unique and owsume this great idea with us.keep up the good work.

    Reply

Leave a Comment

Share via
Copy link