Have you ever noticed how some popular sites display a progress bar reading over articles? This small bar tells users the remaining length to reach the end of an article.
In this tutorial, we will show you how to add a reading progress bar to your WordPress blog.
When to use a playback progress bar
Users spend only a few seconds on a webpage before deciding whether to leave or not. Keeping users engaged becomes difficult especially when one has long items because they are all brought to scroll down, which for some can be boring.
Some site owners add similar articles, others use videos or image galleries to retain users.
A reading progress bar adds a bit of the UI enhancement that encourages users to scroll down. It also motivates users to finish the article they are reading.
Many popular websites like " The Daily Beast Use the reading progress indicators to engage their readers. However, you also need to make sure that the reading progress indicator is subtle and doesn't ruin the user experience on your site.
That said, we'll see how easily add playback progress indicator for your WordPress items.
How to add a progress bar on WordPress
The first thing you need to do is to install and activate the plugin " Worth The Read ". For more details, check out our step by step guide on how to install a WordPress plugin.
After activation, you must visit " Settings> Worth The Read To configure the plugin.
First of all, you need to activate the reading progress bar by checking the option " Enable (Enable) After that, you must select the location where you want to display the progress bar.
The default option displays the bar above, it is the choice of several websites. You can change this to show the progress bar on the right, left or bottom of the page.
The plugin lets you choose the foreground and background colors of the progress bar to match your WordPress theme. The background color is used to fill the empty progress bar and the foreground color will be used to show the progress the user is making by scrolling the page.
You can also include comments on the total length of the progress bar by checking the option " Include comments ". If you include comments, you can also choose a different background color for the comment progress area.
The last option on the page allows you to use a transparent background for the progress bar. Checking this option will override the background color and only the foreground color will be displayed, when users scroll the page. Remember to save your settings when you have completed the configurations.
That's it for this tutorial. I hope you can manage to add a progress bar on your WordPress blog.
This plugin works only on articles. You can not use this feature on custom pages or publication formats.
If you have any questions, do not hesitate to ask us.
