A reading progress bar and post share bar for WordPress

September 27, 2016 3 mins to read
Share

Adding a reading progress bar to WordPress enhances the user experience for your readers. You can get more social shares with it, too.

To me, these bars are a great way to enhance the usability of your website. They give your readers an idea of how far they’ve got to scroll to read your entire piece of content – and thus allows them to estimate how much more time they’ll spend on your site.

Recently, I’ve added a reading progress bar on WP Mastery, and I’m getting positive feedback on it. That’s why I decided to write this short tutorial.

The plugin I use is called Easy Social Sharing Buttons. It’s a paid plugin from CodeCanyon and – as you can see – it’s priced at affordable $19.

Easy social share buttons

It’s well worth the money as it comes with countless options to add social sharing buttons to your site. One of which is placing them in a reading progress bar at the bottom of your page.

Here’s how I’ve configured the plugin on WP Mastery:

1. I’ve set the button template to „Metro.“

Metro button template
In „Templates“, select „Metro“.

2. Since I only want the reading progress bar to show on my blog posts (and not on the entire site), I’ve selected only „Posts“ in the Display Settings.

Only show the reading progress bar on posts

3. To hide the social sharing buttons from anywhere but the bottom bar (which we’re adding in step 4), select „Manual display with shortcode only“ in the „Display Positions“ menu.

Display only on manual shortcode use

4. Now finally, we’re adding the reading progress bar by selecting „Post Share Bar“ as additional button display option. This option will insert the sticky reading progress bar to the bottom of the website.

Select "Post Share Bar"
Select „Post Share Bar“ to add the progress reading bar & social share bar.

And that’s it already.

Of course, you have to select the social media icons that should go into the share bar from the „Social Buttons“ menu. Click on the Social Buttons tab and then go to „Social Networks.“ It’ll show you a list of networks you can add.

Select the social networks to show

 

Let me give you a word of warning:

The user interface of Easy Social Share Buttons is not the most beginner-friendly. Everything is just point-and-click, and you won’t have to deal with code, but it feels crowded.

Take your time and go through the options one at a time. Then you’ll work your way through it.

If you experience issues following this tutorial, reach out on Facebook or Twitter. I’m happy to help!

Lass uns KI einfach machen

In nur 20 Minuten zu Deinem eigenen KI Bot – ich zeige Dir wie es geht. Trage Deine E-Mail Adresse unten ein und ich schicke Dir die Video-Anleitung zu!