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

How to Add a Progress Bar in Your WordPress Posts

Editorial Note: We earn a commission from partner links on WPBeginner. Commissions do not affect our editors' opinions or evaluations. Learn more about Editorial Process.

Have you ever wanted to add a progress bar in your WordPress site? You can use it to show progress on a fundraising campaign, milestones for specific project that you are working on, etc. Recently one of our readers asked how they can add a progress bar in a WordPress post. In this article, we will show you how to add a progress bar in your WordPress posts, pages, and widgets.

Video Tutorial

Subscribe to WPBeginner

If you don’t like the video or need more instructions, then continue reading.

First thing you need to do is install and activate the Progress Bar plugin. It works out of the box, and there are no settings for you to configure.

Simply edit a post or page where you want to display the progress bar and add the shortcode in this format:

[wppb progress=50]

This will show an animated progress bar to indicate 50% progress using the default blue color.

Default shortcode to display progress bar

Pretty easy right?

You can also customize the shortcode to change colors, add text to the progress bar, show currency instead of percentage, and more. Let’s take a look at some of these customization options.

Adding Text to the Progress Bar

In the example above, you can see that our progress bar does not actually mention what it is about. You can change that by adding some helpful text within the progress bar using the text attribute in the shortcode.

[wppb progress=75 text="Progress so far"]

This will display your text on top of the progress bar, and it will look like this:

Progress bar in WordPress with text on top of it

Showing Currency Instead of Percentage in Progress Bar

By default, the progress bar shows completion percentage, but you can change that to a currency if you’re using it for a fundraising campaign.

Here is how you would use the shortcode to display the currency and indicate both the target amount and the amount collected so far.

[wppb progress="$250/1000" text="$250/$1000 Raised"]

It will look like this on your website:

Showing a progress bar with currency

If you want to show the text outside the progress bar, then you can modify the shortcode like this:

[wppb progress="$250/1000" text="$250/$1000 Raised" location="after"]

Changing Progress Bar Colors and Appearance

Progress Bar plugin comes with a few colors and appearance options that you can use. The built-in color options are blue, red, yellow, orange, and green. However, you can use any color that you want. You can add a flat or animated progress bar.

Here is how you will use the shortcode to use each option:

Orange progress bar
[wppb progress=50 option=orange]

Animated candy stripe progress bar in red
[wppb progress=50 option="animated-candystripe red"]

Candy stripe progress bar in green color
[wppb progress=50 option="candystripe green"]

A default blue progress bar with candy stripe
[wppb progress=50 option=candystripe]

A flat progress bar in purple color
[wppb progress=50 option=flat color=purple]

A flat candy stripe progress bar in brown
[wppb progress=50 option="flat candystripe" color=brown]

This is how these progress bars will look on your site:

Using colors and changing appearance of progress bar

Adding Progress Bar in WordPress Sidebar Widgets

First you will need to enable shortcodes for text widgets in WordPress. You can do this by adding the following line of code in your theme’s functions.php file or in a site-specific plugin.


You can now visit Appearance » Widgets page and add a text widget to your sidebar. Use the progress bar shortcode in the text widget just like you would use it in a post or page. Here is a code we used on our demo site:

[wppb progress="$2500/$4500" option="animated-candystripe red" fullwidth=true]

Raised: $2500
Goal: $4500

<a href="">Donate here</a>

This is how it looked on our test site:

Adding progress bar in a WordPress text widget

We hope this article helped you add beautiful progress bar in your WordPress posts or pages. You may also want to see our guide on How to Add a PayPal Donate Button in WordPress.

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

2 CommentsLeave a Reply

  1. Syed Balkhi says

    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. Sachiko Ishikawa says

    Hello! I have a question :) How can I adjust the size (width) of the progress bar? I’m putting it on my sidebar menu, but unfortunately, it’s too wide…

    Apologies for the inconveniences.

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.