Add a Reading Progress Bar Indicator to Your WordPress Blog Posts

In Web Designing Skills, Webmaster Skills
Reading Progress Bar Indicator

You probably often visit some popular sites to read articles, and you might see a reading indicator on the top side of a site’s screen view. The reading indicator is also called as “Reading Progress Bar Indicator” or “Scroll Progress Bar“.

Every Reading Progress Bar Indicator on a site may look different to the other sites or blogs. Some websites or blogs use a horizontal reading progress bar. But for some other sites or blogs, the reading progress bar is vertical which is similar to scrollbar of your web browser. The reading progress bar is useful to show the blog visitors or readers how length the remaining text on the web page to read or to scroll down. This feature will encourage visitors to continue reading the whole article on a web page.

So, if you have a WordPress site or blog and want to add a reading indicator on the web pages, this article will show you how to install a reading progress bar on your WordPress site or blog. However, it would be useful to know the benefits of adding a reading progress bar in your WordPress blog. So, here’s the benefits us adding a reading indicator in WordPress blogs or sites.

The Benefits of Adding Reading Progress Bar Indicator on a Site Template

Usually, blog visitors are just spending a few seconds on the web pages before they decide whether to stay on the blog or go. So, for whatever reason, most of the blog visitors will keep reading a long article on a blog as long as they get what they are looking or perhaps the find something interesting in the article. However, after comparing before and after having a reading progress bar indicator on a blog, the result is that most of the blog visitors stayed longer and read the first article they visited until the end of the article.

Besides that, installing a reading progress bar indicator will also allow the readers to determine how length the remaining page is left. So they would know how long roughly the remaining time to finish reading the article. Also, by adding such little user-interface enhancement would encourage your blog readers to keep scrolling down and would also motivate them to complete reading your article until the finish.

Many popular websites also use such reading indicator. However, you need to ensure whether or not a reading progress bar indicator can be run smoothly on your WordPress blog or site. So, it would not ruin the user experience of your site.

How to Install the Reading Progress Bar in WordPress Blog or Site

The first thing you need to do in adding a reading progress bar in WordPress is to install the reading indicator plugin and activate it. In this article, we suggest you use Worth The Read plugin. It’s a lightweight plugin and can run smoothly on most WordPress themes. Read the following guidelines.

Worth The Read Plugin for WordPress

After you install and activate the plugin, then log in and go to the settings of the plugin Settings » Worth The Read. Then, you can configure the progress bar indicator.

You’ll find two parts on the settings page of the plugin. The first one is the “Progress Indicator“. In this part, you need to activate the reading progress bar indicator by checking it to select the “Display On” option. You may want to select all of the options or perhaps just activating this indicator on your posts. The following preview shows just to add it on the posts only.

You may want also to include comments in the total length of the reading progress bar indicator by checking the “Include Comments” option. If you include the comments to the total length of the reading progress indicator, you can choose a different color of the background for the part of the indicator when on the front end it comes to scroll to the comments area.

After that, you can adjust where the indicator position will appear. To do so, there are four options to choose, whether on the top, bottom, left or right side of your blog front end. Additionally, you’ll find also other settings such as the color of the indicator and the opacity settings. Feel free to customize these settings to design the reading indicator as beautiful as possible.

Worth The Read Settings

Furthermore, at the bottom of the settings page, you’ll see the setting for the “Time Commitment“. The time commitment setting will enable the rough length of the reading time would be spent by the readers. It’s shown in the sign of minute and you can display it before or after the title of your article.

After finish configuring the reading progress indicator plugin, then you need to save your settings by clicking the “Save Changes“.

Time Commitment Settings of Worth The Read Plugin in WordPress

Finally, check the front end of your WordPress theme by reading one of your articles. Find out whether or not the reading progress indicator has already activated. In case you don’t like this reading progress indicator plugin, you can try using another free reading progress indicator plugin such as “Reading Progressbar” plugin.

Tips: If you are using a premium or free WordPress theme which is frequently updated, don’t forget to create a Child Theme for your WordPress blog after the installation and setting. This way is very important to avoid automatically reset the theme to its default settings after you update your premium WordPress theme. The theme update on WordPress will remove all of your theme’s configurations and customizations. So, making a child theme for your WordPress blog will be helpful to avoid any change.

Subscribe to Our Newsletter!

Love Skillonpage? Get exclusive personalised content right in your Inbox. It's free!

You may also read!

How to make a text reveal effect in Premiere Pro

How to Make a Text Reveal Effect in Premiere Pro CC

This article will guide you how to make a text reveal effect in Premiere Pro. Text Reveal effect is

How to Crop Video in Premiere Pro

5 Methods How to Crop Video in Premiere Pro CC

To begin how to crop video in Premiere Pro CC, add the video clip to the timeline by dragging

How to reduce video file size without losing quality.

How to Reduce a Video File Size Without Losing Quality in Premiere Pro

Hello guys! This tutorial will discover how to reduce video file size without losing quality through Premiere Pro export.


Leave a reply:

Your email address will not be published.

Mobile Sliding Menu