optimize seo, security and theme development
with these functions.php code snippets

How To Create WordPress Percent Bar Shortcode

A Percentage or Progress Bar is modern & efficient way to present the progress of an entity in a certain process. For example, Skills of an Individual Professional/Company, Status of a Project, etc.

Here we are going to discuss how we can utilize ultimate benefits of CSS3 in combination with PHP function to create a dynamic CSS3 Percentage Bar on our WordPress posts or pages. You can write a simple PHP Percent Bar Function in our favorite WordPress code file ‘functions.php” and use the shortcode in WordPress page editor to call and make this function work for you like you want. There are many possibilities which we shall go through in the following.

What is a shortcode and how do I use it?

WordPress shortcode API allows us to create our own shortcodes by adding functions to our theme’s ‘functions.php’ file. As name describes, it is a short code which has functionality behind it that we can reuse on our posts or pages by just placing this code in editor. It saves us time!

Tip to use: While using a shortcode in WordPress Post Editor, you should take care of one thing that same attribute names in same sequence are being used as defined in its associated PHP function otherwise it wouldn’t work. So you must read the guide of using a particular shortcode carefully and then use it.

For example, if it has been said that you should use the testimonial shortcode like this:
[testimonial title=”title is here” size=”small”]
then you cannot use it like [testimonial size=”small” mytitle=”title is here”]
Attribute name and order SHOULD be as defined for a shortcode.

How do I create a PHP function for my percent bar shortcode?

You can follow these simple steps to add a PHP function for Percent Bar Shortcode.

Step-1: Go to your theme’s functions.php file at this location “/wpcontent/themes/yourtheme/functions.php”

Step-2: Add this code in that file, probably in the end if you don’t have any custom made shortcode functions in it before.

We have named our function as “mypercentbar” and passed 2 variables to it, one is array of attributes $atts and second one is the text content we want to use over the progress bar $content.

We can use multiple attributes to our shortcode like the percentage, color and animation. We shall have to define inline styles accordingly then. In this example, we have used only 1 attribute to explain the basic percentage bar function you can create.

Inside the function, we have generated an HTML code to be added as a result of adding this shortcode to our page. This Percent Bar Shortcode is basically encapsulating this dynamic HTML code to display the styled percentage bar. We are using the function variables $percentage and $content to create the bar. In order to keep things super flexible and dynamic, we have used inline styles instead of defining separate classes for width so always follow this practice until necessary to define individual classes.

Step-3: After defining the functionality, it is time to add this function in WordPress shortcodes library by using this function add_shortcode ("shortcode_name_here", "function_name_here");

First variable being passed to this function defines the shortcode name we want to use while adding this to our pages and second variable defines the function name that is to be associated with this shortcode.

Add this code after closing your function code.

How do I add CSS to style my percent bar shortcode?

Our next step is to give a look and feel to our Percent Bar. As you can see above, we have used 2 classes in our HTML ‘progressbar’ and ‘percentage’ so we have to define these classes in CSS now.

Now in these classes you can define many styles and animations you want. In CSS3, you have huge possibilities to style your content; we have used only basic styles in this example in order to present you how it would look like.

How do I use the percentbar shortcode in my posts and pages?

You do not need to have any knowledge of programming in order to add percentage bar to your pages because the programmer has made this job easier for you. Simply add shortcodes like the examples given below and you are done. Voila!

[percentbar percentage="100"]100% Shortcode[/percentbar]

100% Shortcode

[percentbar percentage="75"]75% Shortcode[/percentbar]

75% Shortcode

[percentbar percentage="50"]50% Shortcode[/percentbar]

50% Shortcode

[percentbar percentage="25"]

[percentbar percentage="0"]