Have you ever wanted to add a progress bar to your WordPress blog ?

You can use it to show the progress of a fundraising campaign, or for a specific project you are working on.

Recently, a subscriber was looking for a method he could use to quickly add a progress bar to his WordPress blog.

In this tutorial, I will show you how to add a progress bar to your WordPress blog with ease.

The first thing to do is to install and activate the plugin « Progress Bar »Available on WordPress.org, this plugin works without configuration.

progress-bar plugin

All you need to do is add the shortcode to a page or article (and even to a sidebar) to see how it works. The shortcode to add is as follows:

« [Wppb progress = 50] »

This will display a progress bar

how add-a-bar-in-progress

Pretty simple is not it?

You can also customize this code by adding colors, text on the progress bar, displaying a currency instead of a percentage, and more. Let's try together to explore the different possibilities

How to add text to the progress bar

In the previous shortcode, we posted a progress bar with no mention. To modify this with a text that may be indicative for users, we will add the "text" parameter to the shortcode this way:

"[Wppb progress = 76 text =" Work progress "]"

For this result

evolution-of-work

How to add a currency to the progress bar

By default, the progress bar shows a percentage change, but you can change this by a currency of your choice, which can be very useful if you want to show the evolution of a fundraiser.

"[Wppb progress =" 50 € / 400 'text = '50 € / 400 surveys "]"

For a result similar to this one

fundraising

How to change the color and appearance of the evolution bar

This plugin offers some colors that you can use to customize the progress bar. The default colors are "red", "blue", "orange" and "green", however, you can use the color you want. It is also possible to add animated progress bars.

Here's how you can use the shortcode for each option:

Progress bar orange

[Wppb progress = 50 option = orange]

Animated red progress bar with stripes

[wppb progress = 50 option = "animated-candystrip red"]

Green Progress Bar with Scratches

[wppb progress = 50 option = "candystrip green"]

Flat progress bar with stripes

[wppb progress = 50 option = "flat candystrip" color = brown]

How to add a progress bar in a sidebar

We will use the widget " texts " to succeed. All you need to do is use the following filter "widget_text" this way:

"Add_filter (" widget_text "," do_shortcode "); "

Add this line to your theme's “functions.php” file. Then visit the "Appearance> Widgets" location and add the "text" widget in one of the widget areas of your theme. You can even customize it to your liking, this way:

"[Wppb progress =" 2500 € / 4500 € "option =" animated-candystripe red "fullwidth = true]"

Levels: 2500 €
Goal: 4500 €

Make a donation »

For a result similar to this one:

meta-widget

That's all for this tutorial, I hope it will be of great use, do not hesitate to share it with your friends or on your favorite social networks.