A progress bar is used to display the current rate of progress for anything that you are working on. That makes the complete status of a task clear at a glance. This guide is made for webmasters who want to add a progress bar in WordPress posts or pages. No coding stuff is needed here. The methods selected in this guide are two plugins.
Method 1: Use Responsive Progress Bar Plugin
This method is a simple-to-use plugin, which is great for users who wish to keep all things simple. That makes is easy to add a progress bar in any post or page as you want. All you need to do is installing this plugin on website and then inserting the given shortcode in anywhere as planned.
Let’s start with the plugin installation and activation. Once accessing to WordPress dashboard, go to Plugins > Add New and search for this plugin. Install it and then activate it in real time.
Nothing will be changed unless you use the shortcode [rprogress] in the targeted post or page. Note that, this shortcode indicates that the progress is 100% complete. The default color for your progress bar is blue. If there is a need to make some changes to progress status and progress bar appearance, you should take a good use of some attributes listed as below.
For example, the shortcode [rprogress value=60] shows a progress bar with value of 60%. The shortcode [rprogress value=60 color=”#ff0000″] displays the progress bar in red, which should be like the following example. Add a progress in any post/page according to your personal needs and customize it if needed.
Method 2: Use Progress Bar Plugin
Progress Bar is the most popular WordPress progress bar plugin, which allows users to display a progress using shortcode. Besides posts and pages, this plugin also makes it possible to add a progress bar widget to web page sidebar. First of all, install and activate this plugin, and then get started to display the progress bar in WordPress.
Add Progress Bar in a Post/Page
Use the shortcode [wppb progress=60] to display a progress bar with 60% value. Customize the number included in the shortcode and show a progress bar with any value as you need. By the way, if you have knowledge of CSS, you are encouraged to style the progress bar with CSS. That makes the progress bar unique and attractive. The progress bar should be like the following example.
Besides the shortcode mentioned above, there are more examples used to display progress bar.
- [wppb progress=”60/100″] – Progress bar is 60/100 complete
- [wppb progress=”$30/$50″] – Progress bar is $30/$50 complete
- [wppb progress=110] – Progress bar goes over 100%
Add Progress Bar Widget in Sidebar
Go to Appearance > Widgets and target widget named as Progress Bar. Drag and Drop this widget to the right sidebar.
A list of settings for the customization of Progress Bar widget is shown as below. It is optional to change the widget title. The “Progress” box is is where to set the progress complete status. Type a numeric value, like 4/5 and 50%, which will be shown on the progress bar. And then, select a suitable color for your progress bar.
Make a decision on whether the progress bar should have a candy stripe. You can display the progress inside or outside the progress bar. That depends. It is optional to add a custom text to progress bar. Finally, click “Save” button to confirm all settings.
By complying with the above guide, the progress bar should be set as below.
To sum up, the first method is great for users who just need to display progress bar in a page or post and prefer to use shortcode. The second method enables more possibilities, which allows users to set a progress bar with great looking and place it in anywhere as needed.