Thursday, 11 August 2016

How to Embed Reading Progress Bar in WordPress post

Isn't it great if you're busy reading the article, but there is a Reading Progress Bar on top of your article indicating how much is left to scroll down? Has it not encouraged you reading the article? If you wish the same Reading Progress Bar in your WordPress post, then here in this post I have discussed the same.

Why do you need to add Reading Progress Bar in your WordPress

When you're involved in WordPress website development, then you must know, that the users decide in not more than 3 seconds to stay or leave your website. To keep your users engaged with your WordPress web pages, you should avoid using a long scrolling pages or long scrolling articles.

Many a times, the wesite owners add inline related posts or use videos or image galleries to enagage users on the page. In this case, a reading progress bar may add a little user interface enhancement which may encourage the user to stay longer on that page, as they have an idea how much page is left to scroll. Not only this, it also motivates the users to finish reading the article.

How to embed Reading Progress Bar 

To begin with, it install and activate the Worth The Read plugin. You may even hire a WordPress developer for its professional assistance. After activation visit Settings > Worth The Read page to setup your progress bar indicator.

Enable the reading progress bar by checking the ‘Enable’ option. Now you can select the location of your progress bar, i.e., where you want to show. There is one default option, which is displayed at the top of your WordPress website. You can change it to display either at the right or left or bottom of the page.

After deciding the location, you can choose the foreground and background colors of your progress bar to match your WordPress theme. The background color is used to fill the empty progress bar, and the foreground colour will be used to show progress as a user scrolls down.

The best part here is that the website owner can also include comments in the total length of the progress bar by revising the comments option. You can also provide here with the background color options in the comments progress area.

Last but not the least, page also gives leverage to the website owner to use a transparent background for the progress bar. However, checking this color option will overrule the background color options and will display the foreground colour option for the users while scrolling down an article. And of course, do not forget to save your changes in your store setting.

That’s all; you can now visit any single post on your website to see the progress bar in action.

Wrapping up

The reading progress bar works only for the single posts. Currently, it does not support pages and custom post types. We hope you have found the article interesting and informative too.