Wolf Skill Bars is a skill bars shortcode generator WordPress plugin.

Download Skill Bars v1.2.1

Installation Instructions

  1. Upload the plugin zip folder by clicking on the "Download" button above.
  2. In your WordPress admin, go in plugins -> add new, and choose the "upload" option.
  3. Upload the plugin zip folder and click on "Activate plugin".

Being a free product, this plugin is distributed as-is without official support. Verified customers however, who have purchased a premium theme will have access to support for this plugin in the forums.


18 February 2014 - Version 1.2.1

  1. Enqueue CSS file conditionally to save bandwidth

28 August 2013 - Version 1.2

  1. Added color options
  2. Now uses the WordPress update system

08 June 2013 - Version 1.1

  1. Improved update notification system

15 April 2013 - Version 1.0

  1. Initial Release

33 thoughts on “Skill Bars

  1. hajer

    thanks for this Free plugin,
    but i need some help; i install and activate it, but i can’t find it in my administration panel, so can you give me some explanation to use it?

    1. BrutalDesign

      There is no admin panel for this plugin. But you will find a new button in your text editor to be able to generate skill bars shortcodes easily.
      I hope it will help.

  2. Lobo

    Hey there! first let me say, This is exactly what I was looking for when i searched skill bars.

    I got the coding down for changing the colors and such, I just had 2 questions about the spacing between the Title and the Percent bar. As well as how to go about changing the Font of the titles to a font I installed in my theme.

    1. BrutalDesign


      I don’t provide support for free plugins, as I have already a lot to do with my premium themes on themeforest. I am sorry.
      However, you can dig the css file included in the plugin. With a few google searches and using the google chrome/safari inspector or firebug (for firefox), you should be able to customize the style a little bit.

      Anyway, soon or later, I plan to add styling options for this plugin.
      Sorry if I can’t help you further.


  3. Andrew

    Just a general question for everyone using these – what do you guys base your skill level on? For example, if you claim to be 94% at web design, where are you getting that number? I want to use these on my site, but I just can’t figure out the best way to evaluate my skills.

    1. BrutalDesign


      Totally true!
      I guess nobody will set 2%

      It is more about showing in which field you are specialized.

      A designer will set 60% PHP and 90% in graphic design, and a dev guy will set 90% PHP and 60% in Photoshop for example.


  4. Simson

    Can I customize different bars with different colors?
    So for example I have one red and one green bar?

    I only see the possiblity to set all bars to the same color…and is it possible to move the title text so it’s not positioned above the bar but within in the bar – I only get it positioned behind the bar? :D

    1. BrutalDesign


      The styling option allows you to customize the color for all bars.

      However, there is a tip to customize each skill bar by adding a CSS rule for each skill.

      For exemple, if your skill name is “My Skill” you can use this code


      I hope it will help

  5. Ruben

    Hello, is it possible to adjust the speed of the bars? they are a little slow for me.

    Thanks for the great plugin!

    1. John Grimes

      You can change the speed in the shortcode’s CSS. Change this:

      -moz-animation: ‘.$css_id.’ 2s ease-out;
      -webkit-animation: ‘.$css_id.’ 2s ease-out;

      To this:

      -moz-animation: ‘.$css_id.’ 1s ease-out;
      -webkit-animation: ‘.$css_id.’ 1s ease-out;

      That will cut the time to one second instead of two.

  6. Jimmy

    Hey guys. Sorry as it might be a childish questions, but how do I implement the bars themselves. Is there a shortcode I’m missing? :) Thanks in advance.

    1. Jimmy

      I knew it was somewhere in front of my eyes. :) Found it.
      I’m really grateful for the author of this! This is definitely what I need. Keep up the good work!

  7. Rachel

    Hello there. I love this plugin, but I’m having some difficulty. When I have more than one on a page, they don’t reflect the right percentages. What can I do to fix this?

  8. Coco

    Hi ! First thank you for this great plugin. Sorry but I don’t see the “added button” in the text editor to add the bars in my page/section. Where is the button ? What is its name ?

  9. Razvan

    Hey. The plugin looks awesome. But please give me an example of how to generate and put this in one of my pages. I don`t find the shortcodes generator in order to use them further. I can only change Thanks!

Leave a Reply

RT @davidwalshblog: How I Stopped WordPress Comment Spam http://t.co/pHJnZNJtG7
about 1 week ago | @wp_wolf