Best WordPress PluginsBlog

How to Add a Progress Bar in Your WordPress Posts

Have you ever ever wished so as to add a progress bar in your WordPress website? You should utilize it to indicate progress on a fundraising marketing campaign, milestones for particular undertaking that you’re engaged on, and many others. Not too long ago certainly one of our readers requested how they’ll add a progress bar in a WordPress publish. On this article, we are going to present you add a progress bar in your WordPress posts, pages, and widgets.

Video Tutorial

Subscribe to WPBeginner

When you don’t just like the video or want extra directions, then proceed studying.

Very first thing you have to do is set up and activate the Progress Bar plugin. It really works out of the field, and there are not any settings so that you can configure.

Merely edit a publish or web page the place you wish to show the progress bar and add the shortcode on this format:

[wppb progress=50]

This may present an animated progress bar to point 50% progress utilizing the default blue coloration.

Default shortcode to display progress bar

Fairly simple proper?

You may as well customise the shortcode to alter colours, add textual content to the progress bar, present forex as a substitute of proportion, and extra. Let’s check out a few of these customization choices.

Including Textual content to the Progress Bar

Within the instance above, you’ll be able to see that our progress bar doesn’t really point out what it’s about. You possibly can change that by including some useful textual content throughout the progress bar utilizing the textual content attribute within the shortcode.

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

This may show your textual content on prime of the progress bar, and it’ll seem like this:

Progress bar in WordPress with text on top of it

Exhibiting Forex As an alternative of Proportion in Progress Bar

By default, the progress bar reveals completion proportion, however you’ll be able to change that to a forex should you’re utilizing it for a fundraising marketing campaign.

Right here is how you’d use the shortcode to show the forex and point out each the goal quantity and the quantity collected up to now.

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

It can seem like this in your web site:

Showing a progress bar with currency

If you wish to present the textual content outdoors the progress bar, then you’ll be able to modify the shortcode like this:

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

Altering Progress Bar Colours and Look

Progress Bar plugin comes with just a few colours and look choices that you should utilize. The built-in coloration choices are blue, pink, yellow, orange, and inexperienced. Nevertheless, you should utilize any coloration that you really want. You possibly can add a flat or animated progress bar.

Right here is how you’ll use the shortcode to make use of every choice:

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

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

Sweet stripe progress bar in inexperienced coloration
[wppb progress=50 option="candystripe green"]

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

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

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

That is how these progress bars will look in your website:

Using colors and changing appearance of progress bar

Including Progress Bar in WordPress Sidebar Widgets

First you will have to allow shortcodes for textual content widgets in WordPress. You are able to do this by including the next line of code in your theme’s features.phpfile or in a site-specific plugin.


Now you can go to Look » Widgets web page and add a textual content widget to your sidebar. Use the progress bar shortcode within the textual content widget identical to you’d use it in a publish or web page. Here’s a code we used on our demo website:

[wppb progress="$2500/$4500" option="animated-candystripe red" fullwidth=true]
Raised: $2500
Aim: $4500
<a href="">Donate right here</a>

That is the way it regarded on our take a look at website:

Adding progress bar in a WordPress text widget

We hope this text helped you add lovely progress bar in your WordPress posts or pages. You may additionally wish to see our information on How you can Add a PayPal Donate Button in WordPress.

Download The WPSaviour App Now

Related posts
Best WordPress PluginsBlog

How to Easily Insert Amazon Affiliate Products in WordPress Posts

Best WordPress PluginsBlog

How to Reference a Specific Paragraph or Sentence in WordPress Posts

Best WordPress PluginsBlog

How to Add Read it Later Buttons to Your WordPress Posts

Best WordPress PluginsBlog

How to Allow Users to Share Quotes from your WordPress Posts

Leave a Reply

Your email address will not be published.

Pay in your preferred currency
Indian rupee