What's WP
Our everything is about WordPress - best choice of WordPress users!
How to Add a Progress Bar in WordPress Posts Using Plugin

How to Add a Progress Bar in WordPress Posts Using Plugin

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.

Install Responsive Progress Bar Plugin

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.

Attribute Default Value

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.

Responsive Progress Bar Example

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.

Install Progress Bar Plugin

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.

Progress Bar 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.

Add Progress Bar Widget

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.

Progress Bar Widget Settings

By complying with the above guide, the progress bar should be set as below.

Progress Bar Sample

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.

Author

Lucy has been a very experienced SEOer, technical writer, web developer, c# developer since 2002. Now she owns a startup in San Francisco, CA, focusing on running a couple of blogs to share knowledge and experience with global readers and deliver exceptional results to global sponsors by leveraging the power of Internet.

Close

Want to Learn More About WordPress?

Get Our Free Themes, Plugins, Support, SEO Tips, and Other Tutorials!

Email *