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

Download v1.2.1

Version: 1.2.1

Created: 2 years ago

Updated: 1 year ago

34 798

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

34 thoughts on “Skill Bars

  1. virgilio 2 years ago

    Thx a lot for those free shortocdes 😀 You are the best

    1. BrutalDesign 2 years ago

      Thanks for your support :)

  2. katana 2 years ago

    thanks a lot for this plugin release FREE !
    I love it
    thanks , thanks , thanks

    1. BrutalDesign 2 years ago

      You’re welcome 😉

  3. hajer 2 years ago

    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 2 years ago

      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.

  4. Riaz 2 years ago

    Is there any way to change the colors?

    1. BrutalDesign 2 years ago


      You can change the color by editing the css file (css/wolf-skill-bars.css)

  5. Lobo 2 years ago

    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 2 years ago


      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.


    2. BrutalDesign 2 years ago

      Search for h5.wolf-skill-title to modify the title 😉

  6. Andrew 2 years ago

    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 2 years ago


      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.


  7. Simson 2 years ago

    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? 😀

    1. BrutalDesign 2 years ago


      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

  8. Ruben 2 years ago

    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 2 years ago

      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.

  9. Jimmy 1 year ago

    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 1 year ago

      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!

    2. BrutalDesign 1 year ago

      I am glad you found it! thanks for your support.

  10. Rachel 1 year ago

    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?

  11. smi. 1 year ago

    hi,thank you for your bar. I love it,
    can I change the size of the bar?
    can I change the font size ?

    1. BrutalDesign 1 year ago


      You will have to edit the plugin css file (css/skill-bars.css)

  12. smi. 1 year ago

    thank you very much!
    you reply so quickly!!!!

  13. smi. 1 year ago

    also, where can I find the ease-out speed setting?

  14. BrutalDesign 1 year ago

    I think John Grimes has replied above 😉

  15. Jay 1 year ago

    Great plugin and works fine first time, appreciated

  16. Coco 1 year ago

    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 ?

    1. BrutalDesign 1 year ago

      It is the icons with the 3 horizontal lines.
      I hope it will help

  17. Razvan 1 year ago

    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!

    1. BrutalDesign 1 year ago

      You can use the text editor toolbar button to generate the shortcode

  18. Gerry Burke 1 year ago

    Is the Wolf Skill Bar compatible with IE9? We have created a web portal using your plugin within WordPress, however under IE9 the slider bars do not appear.

  19. RhinoSilver 3 months ago

    Great Plugin! Is there any way to get the colors working?