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.
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:
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:
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:
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.
|
1 |
|
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:
|
1 2 3 4 5 6 |
|
That is the way it regarded on our take a look at website:
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.
