The Skills plugin for WP displays awesome progress bars
What The Skills is this?
I looked around for a bit without being able or happy to find something simple and beautiful enough.
So, sure enough, I had to get my hands dirty, and it is a good starting point for this blog.
The Skills plugin is a WP Plugin (>3.5) that allows you to create multiple progress bars, organise and display them by section, you can actually display them all together, just like I did below.
To render your progress bar it is as simple as pasting the right shortcode in your content.
You can define the bar title, the bar color and the quantity the bar gets filled. Section are defined by titles.
You can define as many titles/sections and separator as you want.
Ok, but listen! This is a beta release, meaning that the administration is not perfect, and that some improvements would be considered. It should be a fairly safe plugin to use (I’m using it), that said I can not guarantee for it, who would? It has been coded in 2 hours last night :)
It is not a multilingual ready plugin, on the other hand, those multicoloured bars will be responsive to your users’ screens, this is something already, isn’t it?
Under the hood of The Skills plugin
As you by now know, this plugin is not perfect, and there is nothing really revolutionary under its hood. It makes use of the Settings API of WordPress, and it actually does the right thing importing jQuery UI Sortable and the WP Color Picker using the WP core in the admin.
If you cast an eye on how it is organised, you’ll see that I love to sandbox frontend and backend. The class handling all the admin stuff does not interact with the frontend and it is even not loaded there. I love that, when things are simple.
Something interesting to point out is that, as advised by WordPress, I’m using a single array option row in the database, and I let the Settings API handle all that.
|
1 2 3 4 5 6 7 8 |
public function register_the_skills_settings() { register_setting( 'the-skills-settings-group', 'the-skills' ); } public function the_skills_settings_page() { settings_fields( 'the-skills-settings-group' ); $the_skills = get_option('the-skills'); // HTML for the settings page (input with the correct name attribute created with JS) } |
Download The Skills
Do you want to try it out? Please, share this post and I’ll give you the download link.