How To Add Reading Progress Bar In WordPress?

One Day I was reading a post on another blog but the new thing I saw there that was a Progress Reading Bar in the Blog Post. The bar was moving forward when I scrolled down the page and the bar was also moving backwards when I scroll up the page. This is movement is depends on how much we have read the post.

A Progress Reading Bar is basically a bar which shows how much you have read. Its Movement totally depends on scrolling when you scroll down it goes forward and when you scroll up it goes backwards.

That day when I saw progress reading bar first time it attracts me a lot and I decided to place the bar on my blog so did this. It gives my posts a user-friendly interface and also motivates users to read the post till the end.

I hope you also like this and want to add this to your blog so I going to show you how I add this to my blog and you also can do this same as I did…

How To Add Progress Reading Bar

First, you need to go to your WordPress Admin Panel and login you as admin to WordPress. You will see Dashboard.

Second Thing you have to download a WordPress plugin called Worth the Read plugin. You can simply download this plugin by clicking here. And install it carefully. there is two simple way to add a new plugin is to download it and upload it in zip format. If you have downloaded the plugin so go to Plugins>Add New>Upload Plugin and Choose file and click on Install it takes some time then click on activate button which will appear when plugin installed successfully.

Worth The Read

And the second ways is the simplest ways just click Plugins>Add New then you will see a search box type the Worth the Read, You Will see plugin click on install and then Activate.

Now find the Worth The Read section in the Dashboard it will be after settings tab as shown in Image. Click on the Plugin Tab then Click on Reading Progress. You will see two tabs functionality and style.

Functionality

Worth the read,staymeonline

Choose Display On: You can choose both but I recommend to choose posts because it looks better on posts. you can select this by your own choice.

Custom Post Type: You can show the progress bar on custom post types, too. Select the By you choice we want to display the progress bar in Custom Post Type.

Include Comments: This is for if you want to include comments in the post length basically it should be off or you can choose by your own wish.

Placement: Choose where you want to show the bar you can select from the top, bottom, left and right. I have select it for the top.

Offset: If you don’t want to cover up the menus and header so select it according to your choice.

Fixed Opacity: On this option then opacity will never change when the page will scroll. Opacity will be fixed.

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

and the other two options are same as you have seen above you can choose it by your own choice but I recommend to set it like you selected for above.

Style

worth the read style, staymeonline

Now you have created the body of your Progress Bar now this is the time to give a look to your Progress Bar means how it will look on the site.

Here you have to select the thickness of the Progress Bar and the Color. I recommend choosing the color by matching your theme color. and Thickness should be low because it will look good and do not cover your content.

After these settings click on Save Changes and Visit your Site to test the Progress Bar.

If you have any query yet so watch this video for step by step tutorial.

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

  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.

Leave a Comment

Share
Tweet
Pin
+1
Share