Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPB Cup
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

How to Add a Reading Progress Bar in WordPress Posts (3 Easy Ways)

Adding a reading progress bar to WordPress posts is a great way to enhance your reader’s experience.

Long blog posts can sometimes feel intimidating, and a progress bar offers a visual cue that shows readers exactly how far they’ve come and how much is left.

We have written over 3000 blog posts at WPBeginner, so we know the importance of keeping your readers engaged. That’s why we are here to share our top tips for improving your blog.

In this article, we will show you how to easily add a reading progress bar to your WordPress posts.

How to Add a Reading Progress Bar in WordPress Posts

When to Add a Reading Progress Bar to Your WordPress Blog Posts

For longer blog posts, adding a reading progress bar can be a valuable tool to make people stay on your WordPress website. It can let readers know how much they’ve read and how much is left.

Readers are more likely to keep scrolling if they see they’re nearing the end of the article. A progress bar can motivate them to finish reading.

Plus, having a read meter adds a touch of interactivity to your content. It can make reading feel more like a journey with a clear destination.

However, it’s important to consider your content. A progress bar might be unnecessary if you primarily write short, scannable articles. Similarly, some readers might find it distracting.

Note: Do you want to add a generic progress bar instead? We recommend using SeedProd and its built-in progress bar block.

For more information on how to use SeedProd, just check out our guide on how to create a custom WordPress theme.

With that in mind, let’s see how to easily add a reading progress bar to your WordPress posts. You can use the quick links below to skip to your preferred method:

Method 1: Design a Custom Theme With Reading Progress Indicators

One way to add a reading progress bar in WordPress posts is to use a theme builder with a progress bar feature. This way, the progress bar design will integrate seamlessly with the rest of your theme, making it more pleasing to the eye.

Keep in mind that this method will involve changing your theme, so we don’t recommend it if you are already happy with your theme and aren’t looking to switch it any time soon. If that’s the case, then you should go with method 2 instead.

For this method, we will use the Thrive Theme Builder. Besides having a reading progress bar, the Thrive Theme Builder has dozens of theme templates for various purposes, from blogs to corporate websites.

Best of all, the drag-and-drop builder is easy to use, making it great for complete beginners.

You can learn more about the platform in our Thrive Themes review.

One downside of Thrive Themes is there is no free version. That being said, you can use our Thrive Themes coupon code to get up to 50% off of your first purchase.

Step 1: Install the Thrive Theme Builder

The first step is to set up the Thrive Theme Builder. You can get access to this plugin by logging in to your account on the Thrive Themes website.

Then, download and install the Thrive Product Manager plugin. For more information, check out our beginner’s guide on how to install a WordPress plugin.

Install Thrive Product Manager

Once the plugin is active, click Product Manager in your WordPress admin area.

Then, click the ‘Log into my account’ button to connect your WordPress website with your Thrive Themes account.

Log into your Thrive Themes account

After that, you should now see a list of all the available Thrive Themes products inside your account.

Here, go ahead and select ‘Thrive Architect‘ and check the ‘Install Product’ box.

This page builder plugin works together with the theme builder, so that’s why we need to activate it.

Installing Thrive Architect

Next, scroll down to the ‘Thrive Theme Builder’ section and tick the ‘Install Theme’ box.

Now, simply click ‘Install selected products.’

Installing the Thrive Theme Builder

On the next page, you will see that Thrive Product Manager is installing and activating the Thrive Theme Builder.

Once the process is done, click ‘Go to the Theme Builder Dashboard.’

Activating Thrive Architect and Thrive Theme Builder

Now, go ahead and choose a WordPress theme.

If you are not sure which one to pick, just click the ‘Preview’ button to see what the theme looks like first. Then, click ‘Choose’ once you have made your decision.

Choosing a Thrive Theme Builder theme

You should now arrive at the Theme Builder Wizard.

This setup wizard will walk you through uploading your own logo, choosing brand colors to add to your theme, and setting up the different structures and templates of your theme.

Go ahead and complete the setup wizard before moving on to the next step.

Thrive Theme Builder's setup wizard

Step 2: Add a Reading Progress Bar to Your Single Post Template

With your theme set up, let’s now add a reading progress bar to your theme template. Since we just want to display the read meter bar in WordPress posts, then we will just need to edit the single post template.

To do this, switch to the ‘Templates’ tab in the Thrive Theme Builder. Then, find the ‘Default Post’ template and click ‘Edit.’

Editing a Thrive Theme's single post template

You should now be inside the theme builder. There should be a left sidebar for editing your template, a preview of the template itself, and a small toolbar on the right side for adding more blocks or changing the template’s style.

To add the read meter, scroll down the left sidebar and find the ‘Reading progress indicator’ setting. Simply click on the toggle to activate it.

Adding a reading progress indicator with Thrive Theme Builder

There should now be some more settings for you to edit the reading position indicator.

First, you can choose to add the progress bar underneath the header or on top of the viewport (right above the header). If you pick the first option, then you will have to make sure the header is set to sticky, which we will show you how to do later.

Changing the reading progress bar location in Thrive Theme Builder

Next, you can change the color of the progress bar. Simply click on the color picker to do that.

Now, you can either choose one of the theme colors, which is your theme’s pre-defined color scheme. Or, you can click ‘Unlink from theme color’ to pick an entirely different color that is not a part of your theme.

Changing the reading progress bar's color with Thrive Theme Builder

If you choose the ‘Unlink from theme color’ option, then you can also adjust the color’s opacity.

This way, you can adjust how opaque the progress bar looks against its background. That being said, it’s best to make the color of the progress bar not so vibrant that it distracts users from reading.

Once you’re happy with the color, just click ‘Apply.’

Changing the reading progress bar's opacity with Thrive Theme Builder

Finally, you can adjust the height of the progress bar.

The theme builder lets you resize the bar to up to 10 pixels. This ensures the progress bar doesn’t look too big. With that in mind, we recommend going for a size between 5 and 10 so that the progress bar is clearly visible.

Changing the height of the reading progress bar with Thrive Theme Builder

When you are happy with how the bar looks, just click ‘Save Work’ to keep your changes.

Step 3: Make Your Header Sticky (Optional)

If you choose to display your reading progress bar underneath the header, then you will have to follow this step. Otherwise, you can skip it.

First, scroll up the left sidebar and click ‘Header.’

Editing the header section with Thrive Theme Builder

A different set of settings to customize the header should now appear on the sidebar.

Go ahead and scroll down to the Header Section and click ‘Edit.’

Editing the default header with Thrive Theme Builder

Now, open the Scroll Behavior tab.

Then, you need to select ‘Sticky.’ Depending on your theme, you may also need to change the distance from the top of the screen to 1 px so that the progress bar appears.

You can leave the rest of the settings as they are and click ‘Done’ at the bottom.

Making the header sticky with Thrive Theme Builder

Step 4: Add a Reading Time Indicator (Optional)

Another thing you can do with Thrive Theme Builder is show the estimated reading time to go through a post from start to finish. This helps users see how long it will take to read an article, letting them choose content that fits their available time.

First, click on the block that is responsible for showing your post meta data.

This is the part of your single post template that displays information like the blog post’s author, categories, tags, and so on.

Selecting the post meta in Thrive Theme Builder

Then, click on the ‘Dynamic text‘ icon in the toolbar.

Here, you must select ‘Content’ in the first dropdown menu and ‘Reading time remaining (in minutes)’ in the second one.

After that, click ‘Insert.’

Adding a dynamic reading time indicator in Thrive Theme Builder

You should now see new text that says, ‘0 minutes remaining’ in the post meta. You can go ahead and adjust this text to your liking.

In our case, we decided to remove the word ‘remaining.’

Editing the reading time indicator in Thrive Theme Builder

When you are done, don’t forget to click ‘Save Work.’

Step 5: Preview Your Reading Progress Indicators

Now that you have configured your progress bar settings, you can visit your blog post to see the bar in action.

If you want to do a preview instead of seeing the bar live on your site, then you can just click the ‘Preview’ button at the bottom. Thrive Theme Builder lets you preview your website on desktop, tablet, and mobile.

Previewing a website on Thrive Theme Builder

Feel free to make as many changes as necessary.

Here’s what our reading progress bar looks like:

Reading progress bar made with Thrive Theme Builder

Method 2: Add a Reading Progress Bar With a Free Plugin

If you just want to add a simple reading progress bar to your WordPress posts for free, then you can use the Catch Scroll Progress Bar plugin.

This reading progress bar plugin will automatically show a read meter on your pages and posts, and you can easily customize it to your preferences.

First, install the plugin in your WordPress admin area. For more information, read our beginner’s guide on how to install a WordPress plugin.

Once that’s done, go to Catch Scroll Progress Bar on your WordPress dashboard. You will now see some progress bar settings to set up.

With this plugin, you can change the progress bar position from the top to the bottom. That said, you can just leave it as it is if you prefer the normal top position.

Editing the Catch Scroll Progress Bar settings

Another thing you can customize is the background color and the foreground color.

The background color refers to the progress bar’s default color when the reader has not scrolled through the page. Meanwhile, the foreground color is the color that will appear as the reader scrolls down the page.

Next is opacity, which controls the transparency of the background and foreground colors. The range is between 0 and 1, with 1 being opaque and 0 being transparent or invisible.

Feel free to play around with the numbers until you find the opacity level you like.

Next, you can adjust the progress bar’s height and border radius.

For the height, we’ve found that the best number is between 1 and 8, but not more than that. Otherwise, the progress bar may look too big.

The border radius controls how rounded the corners of your progress bar look. If you don’t like how that looks, then you can just enter ‘0.’

Now, this plugin also lets you decide which templates to display the progress bar in: on your homepage, blog page, archives and categories, and/or single posts or pages.

Typically, you only need to add a reading progress bar on your WordPress blog posts. In this case, we only chose ‘Single page/post’ in the ‘Select the Template Condition to progress bar’ setting.

We also checked the ‘Posts’ option in the ‘Select the Post type to apply progress bar’ because we only want the bar to appear in blog posts.

That said, feel free to check the conditions that suit your website best.

Saving the Catch Scroll Progress Bar plugin settings

Once you are happy with your progress bar settings, go ahead and click ‘Save Changes.’

Now, if you preview your blog post on mobile or desktop, you should see a progress bar.

Reading progress bar made with Catch Scroll Progress Bar

Method 3: Add a Reading Progress Bar With Code

You can also use custom code to add a reading progress bar to your WordPress site.

Often, tutorials will ask you to add code directly to your theme’s functions.php file. But, we don’t recommend doing this because the smallest mistake can break your site.

Instead, we recommend using the WPCode plugin. It’s the easiest and safest way to add custom code in WordPress without needing to edit any core WordPress files.

Plus, you don’t even need to be familiar with coding to use it because it comes with a library of ready-made code snippets you can add to your site in a couple of clicks, including one for a reading progress bar.

To get started, you need to install and activate the free WPCode plugin. If you need help, see our tutorial on how to install a WordPress plugin.

Once the plugin is activated, go to Code Snippets » Library from the WordPress dashboard.

From there, search for the ‘Scroll Progress Bar’ in the library, hover your mouse over it, and click the ‘Use snippet’ button.

Select the Scroll Progress Bar snippet from the WPCode library

WPCode will then automatically add the code for you, as well as select the proper insertion method.

WPCode automatically adds the code for the reading progress bar

After that, all you need to do is toggle the switch from Inactive to Active. Then, click on the ‘Update’ button.

Make the snippet active and click the Update button

Now, you can view a blog post on your website, and a simple progress bar will appear.

Reading progress bar example with WPCode

Bonus Tips to Keep Your WordPress Blog Readers Engaged

Want to turn casual visitors into loyal readers? We’ve got you covered!

Check out these expert WordPress tutorials packed with tips to keep your audience hooked:

We hope this article helped you add a reading progress bar in WordPress. You may also want to see our complete guide on how to edit a WordPress website and our expert picks of the best Canva alternatives for website design graphics.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. See how WPBeginner is funded, why it matters, and how you can support us. Here's our editorial process.

Editorial Staff

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

The Ultimate WordPress Toolkit

Get FREE access to our toolkit - a collection of WordPress related products and resources that every professional should have!

Reader Interactions

15 CommentsLeave a Reply

  1. Syed Balkhi

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Jiří Vaněk

    For websites where the articles are longer than, for example, 1000 words, this is really useful so that the user knows what part of the content he is already in and how much is left. I assume that it can also very well reduce the bounce rate and it helps to “force” people to read the article to the end.

  3. Vikash Pareek

    How to Add a Reading Progress Bar in WordPress Posts without plugin, Because more plugins affect page speed, plugins cannot be installed for every task.

  4. Durga Thiyagarajan

    I was looking for this one ! Thank you so much and it worked out. Will this affect the page speed?

  5. AmiF

    Hi, thanks for sharing this awesome plugin, in the horizontal way, how to make it fill starting from right to the left? Which part should I change to make it “rtl”? Please someone help me…

  6. Abhijeet

    Plugin ‘worth the read’ has changed its settings…Please update this post

  7. Jonathan Nabais

    Hello there,

    It works on my site but it’s invisible because it’s under the background.
    How make it visible on the page and not under the page ?

  8. Nirmal Kumar

    Thanks for sharing this awesome plugin. This worked out. Cheers!

  9. Stanley

    It worked, very awesome.
    Thanks

  10. K T Bowes

    Works on my pages but not on my blog posts – which is where I really wanted it. Looks good on my pages though.

  11. Tony Abbott

    I followed every step but my posts do not display the progress bar. Also the article states that this plugin does not support pages but the plugin screen does offer you the option to use the plugin on posts and pages.

    I received this tutorial by email from yourselves on 6/9//16 so I am assuming you should have checked the validity of the article before you sent it out.

  12. Tim Coe

    Didn’t work for me. The enable box has been replaced by posts and pages boxces but after trying it 3 times I’m giving up.

  13. Marcus

    This is pretty neat. I have a site that primarily works through a Custom Post Type, so I’ll look for another resource for that as many of my articles are long-for reading!

    Thanks for sharing!

Leave A Reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.