Phone: 1(877) 215.8104
Login
If you’re working on raising funds or have another reason why you would like to add a progress bar to a page or post in WordPress site, you need the right steps. This is a pretty easy process and you can customize the bar to fit your specific needs. Here are the steps to add a progress bar to any WordPress page, post or widget.
The Progress Bar Plugin
This is a very simple plugin and it does one things for your WordPress website: creating a simple to use progress bar with your CSS. The progress bar will work with a very simple shortcode, which you can customize the color of and the gradients.
The first step in getting a progress bar on your WordPress website is to download, install and activate the Progress Bar Plugin. Once you have activated it, you won’t have to do anything else with the plugin. The rest is done with the shortcode it works with.
Shortcode for the Progress Bar
The next step in the process is to choose the color and other options for your progress bar. If you just want to put in the default blue progress bar, you can use the shortcode:
This code will create a progress bar that looks like this:
BasicProgressBar
That’s all it takes. you can easily adjust the number in the code to match your progress.
Add Text to your Progress Bar
After you have decided to put your progress bar into your post or page, you can adjust the code to add text. The code for a progress bar with text is:
[wppb progress=35 text=”Our Progress”]This will give you a progress bar that looks like this:
Change the text to anything you want and it will display within your progress bar.
Changing the Color
Maybe you don’t want to use the default blue progress bar. You can easily change the color and even add other customizations. Here are a few examples.
Code for a Yellow Progress bar:
[wppb progress=35 option=yellow]
Code for a Candystripe Progress Bar:
[wppb progress=35 option=candystripe]
Code for a Flat Orange Progress Bar:
[wppb progress=35 option=flat color=orange]
You can combine these options to use the color and design you prefer for your progress bar.
Adding Currency
Maybe you want to display the amount raised and the total amount. This is very easily done with the code below:
[wppb progress=”$450/1500″ text=”$450/$1500 Raised”]
You can also show the text outside the progress bar with this code:
[wppb progress=”$450/1500″ text=”$450/$1500 Raised” location=”after”]
Either way, you can display the amount raised and the amount you are trying to raise.
Putting it all Together
The final step in the process of getting a progress bar on your website is customizing it to your specific needs. You can combine the different codes and variables to use the color you want, the design of your choosing and display the text or currency of your choice.
The code works with a number of different colors and there are even more variables you can add in, as well. This is just a sampling of some of the many things you can do with the progress bar plugin to get a progress bar up on your website.
If you’re doing some fundraising or you plan to in the future, the progress bar plugin can make it easier to display your goal and your progress. It’s a great tool, it’s free and it will work within any WordPress post, page or widget.
Leave a Reply