Hosting Tutorial & Guide

How to Add a Progress Bar to WordPress Posts

updated on Nov 01, 2016
How to Add a Progress Bar to WordPress Posts Progress bar is a common element on the checkout page of many websites that accept payments. When used properly, it increases the engagement and encourages the users to complete the purchase or the thing they are doing.

The benefits of a progress bar, however, apply to many other types of WordPress sites, too, no matter those sites sell or not. For example, if you have launched a milestone or a fundraising campaign, a progress bar lets your visitors know what you have achieved, and how they can help you reach your goal. Also, if you run a blog and often publish long posts, a good progress bar helps to keep the readers stay and finish the reading.

Considering these situations, we will discuss how to add a dedicated reading progress bar to WordPress posts, and how to add a progress bar for the activities launched on your site respectively. You can select the solution based on your real condition.

Add a Reading Progress Bar to WordPress Posts to Increase Engagement

It is fairly hard to make sure that readers finish your long posts before leaving because most people would only spend a few seconds reading a post. A small trick for enhancing the engagement, then, is to add a reading progress bar that indicates how much content is left and encourages the readers to scroll down.

Many popular sites have utilized this method by placing a good progress bar on the top of the page, while some other sites have also chosen the left or right side of the page.

If your WordPress site includes many long posts, you can install a plugin named Worth the Read to add a reading progress bar. This plugin is lightweight, and it allows you to control the placement and color of the progress bar.

Add a Reading Progress Bar with Worth the Read

Configure the plugin and customize the progress bar

After activating the plugin, you need to go to Settings > Worth the Read to deal with the settings. Below are the important things to deal with.
  • Choose the post type that the reading progress bar applies to. Currently, posts and pages are supported, while the custom post types are not.
  • Choose whether to include the comments section into the progress bar. If your posts usually come with a large number of comments, make sure not to include the comments for the sake of the user experience.
  • Select the placement of the progress bar from "Top", "Left", "Right" and "Bottom".
  • Define a width if you want.
Configure Progress Bar

Besides, you are also able to change the color of the foreground, background, comments background and transparent background to match your site's design. For the foreground, the opacity can be changed, too. After handling these things, save the changes.

Customize Progress Bar

Test the reading progress bar

If the plugin works properly, you will see the reading progress bar shown with the colors and placement you have selected when you read a post on your site. You can now check it carefully and adjust the colors in WordPress admin area if you are not completely satisfied.

Test Progress Bar

Add a Progress Bar for a Fundraising Campaign or Other Activity

If you have launched a campaign or any other activity that comes with a goal of achievement, you may want to show a small progress bar in a post, page or sidebar to tell visitors what you have achieved and how they can help. In this case, the plugin – Progress Bar – provides the feature you need.

This plugin offers a shortcode which you can use to place a progress bar anywhere you want, and it supports the customization of the text on the progress bar. Besides, there are some pre-made colors and styles. Also, you are able to further customize the progress bar with CSS.

Progress Bar

After installing Progress Bar, you don't have to deal with any setting because the plugin doesn't come with one. Therefore, you can add a progress bar to a post or page immediately with a shortcode like this: [wppb progress=75]. "75" in this example means that the progress is 75% complete.

Add a Standard Progress Bar

If you think the progress bar is too simple for you to use, don't worry, because there are some customization options. Below are the examples.

Add text to progress bar

Proper text makes your progress bar more understandable. So if there is a need, you can add a "text" parameter to the shortcode to display the text you want. By default, the text is placed right on top of your progress bar. Here is our test of the shortcode [wppb progress=80 text="You are almost done"].

Add Text to Progress Bar

Show currency in the progress bar

As an alternative to the default percentage, currency is also allowed in the progress bar, which is quite good for those accepting a donation or working on a fundraising campaign. You only need to enter the current amount and target amount in this format: [wppb progress="200/500" text="$200/$500 Donated"].

Show Currency on Progress Bar

Change the appearance of the progress bar

You may have wondered whether there is the possibility to change the look of the progress bar, and the answer is yes. The plugin has prepared several customization options. For the color, the available options include blue, orange, green, red and yellow, and the available styles include flat and animated progress bar.

For an example, below is a progress bar in green. The shortcode we use is [wppb progress=40 option=red].

Show Progress Bar in Red

And here is a progress bar in purple with candy stripe. The corresponding shortcode is [wppb progress=40 option="candystripe purple"].

Show Progress Bar in Purple with Candy Stripe

For more options and the examples, read this page.