In this post you’ll discover and learn about some free simple WordPress plugins you can use that will allow you to add a reading progress bar to your WordPress site or blog.
One of my obsessions as a web designer is ensuring that I do everything that I can to make a site as user-friendly as possible.
I recently added a new feature to the Magnet4Blogging blog, which I’m sure some of you will have noticed.
What’s this new feature?
Well, I’ve added a (hopefully, nonobstructive) reading progress bar above the site header.
Why add a reading progress bar to your blog?
You may have noticed the trend some websites are following, in particular, blogs.
Many blog owners are providing some type of animated indicator feature to give their readers an indication of how far along they have read a blog post or page article.
Personally, I think the idea of adding a non-obstructive interactive feature like this, particularly on your blog, is brilliant. And, especially if you value your readers time.
I’ve heard some folks argue that using any kind of reading progress indicator feature can be distractive for blog readers. What do you think?
Adding a progress bar
OK, so originally I was searching for a tutorial on how to actually hard code this into my WordPress site or theme, however, I’ve yet to find a solution that doesn’t actually end up breaking my site.
So, in the meantime, I found a couple of really nifty little plugins that can do the job quite well.
One of these plugins and the one I’m currently using is called ‘Reading Position Indicator’ by Marcin Pietrzak,.
If you’ve been looking for a really simple way to add a reading progress bar to your WordPress blog yourself, then I recommend you check this plugin out.
Here’s how to install it and configure it on your WordPress blog.
Installing Reading Position Indicator
OK, so just do a quick search for the plugin ‘Reading Position Indicator’ via your plugins page in your WordPress dashboard, or, just head over to this page to download it.
I always recommend installing any WordPress plugin directly from the repository, or downloading it first then uploading it to your dashboard.
Or, if you prefer to use an FTP client, you can also do it that way. Which ever method you prefer.
Configuring the plugin
Once you have installed and activated the plugin, just head over to Appearance > Progress to change the visual and functional preferences to suit your website.
Here’s what you can do with this plugin –
- You can choose which pages to display the reading indicator, for instance, posts or pages, or both.
- You can choose where on the page you want the indicator to show up, top of the page or bottom.
- Change color style, solid, gradient, or indeterminate.
- Change the progress bar thickness.
- Change foreground color and opacity.
- Change secondary color and opacity.
- Change background color and opacity.
- Change progress bar radius.
Check out the screen shot below.
Once you have everything in place, check to make sure it’s looking and working great on your blog.
Other plugins available for adding a reading progress bar.
If for what ever reason you don’t like the plugin above, you might also want to check out these other great plugins.
Options include –
- Progress bar’s height.
- Foreground color.
- 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).
Worth The Read – is another lightweight, minimal-distractive reading progress bar that comes with a cool reading time commitment feature that you can control separately.
Like the other plugins mentioned above, you can change the color and placement of the progress bar on your posts or pages, as well as have control over width, offset values, and transparency.
So there you have it, three simple plugins and three simple solutions for adding a great user-friendly feature to your WordPress blog.
Over to you
- Are you using any type of reading progress feature or reading time counter feature on your blog?
- Do you think a feature like this is useful for users or not?
Leave me your comments below as always.
In the meantime, enjoy.