A reading progress bar and post share bar for WordPress

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!

Share this post with your friends & followers:

Hey, I'm Jan!

I run KCONSULT and publish the AI Marketing Minute to help busy business owners use AI to accelerate growth. It's great to have you here!

Master AI-Powered Content Marketing And Create Content In A Fraction Of The Time

Learn the basics of AI marketing in B2B, even if you're not tech-savvy and never used ChatGPT. 

Get proven prompts that create engaging content and help you fight writer's block. The AI Marketing Minute comes out every Monday.
    envelope linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram