Our Foobar plugin was accepted on CodeCanyon today. After 3 months of developing, refactoring, fine tuning, it is out in the wild. The reason for this post, however, is more for the WordPress people out there, as I wanted to discuss what makes this plugin so special from a WordPress point of view.
Custom Post Types
What type of plugin would this have been if we didn’t use custom post types ? The Foobar custom post type was generated using our very own Custom Post Type code generator. Using the generator saved us a lot of time, as I went back and tweaked the custom post type a few times before I was 100% happy. We also added some custom columns and custom messaging (something I want to add to the code generator at some point). Here is the custom post type in action:
Custom Meta Boxes
What sets this plugin apart from others has to be the AMAZING meta boxes used for the Foobar custom post type. We use color pickers, our very own custom sliders, checkboxes and radio buttons:
We also had to create some complex controls for picking social profile icons:
You can also add unlimited messages and the look and feel fits in perfectly with the WordPress admin. Oh and you can sort with messages using drag and drop:
We built a wrapper around the WordPress settings API that allows you to easily add fields and sections to the Foobar settings page. But what we also added to the mix was tabs! And I’m not talking about jQuery UI tabs (as you can find in dozens of places on the web), I’m talking about WordPress admin styled tabs, so the settings page looks like it was made for WordPress. No weird styling, just plain awesomeness!
In our wrapper for the settings API, we also made sure all our settings are saved as an array in the database, so there are not a dozen entries in the options table. Even for the default social profiles, where you can have an unlimited number of profiles, they just get added as an array to the containing array.
Ah the beloved Admin bar The Foobar plays nicely when the admin bar is visible, but this took some extra careful tweaking. See, the styling added for the admin bar includes a style similar to this : margin-top:28px !important. This caused endless issues, as in some browsers, the !important rule even overrides inline styles. In the end, we had to override the styling using the add_theme_support method passing in a callback. This is how they both play nicely:
Dynamic JS and CSS
Plugin Base Framework
While building this and previous plugins, I started bundling all the common functions and functionality into a base class that I inherit from. This gives me a whack load of cool stuff to use right out the bag, including the settings API wrapper I spoke about above. I will be releasing the base framework free for the WordPress community, and hopefully it will become a really cool plugin framework that we can all use.
So that’s about it. I am really proud of what we achieved with this plugin and I learnt a whole bunch along the way. My main goal with this plugin was to stay true to WordPress. For me, that meant sticking to the built in admin styling and using what WordPress has to offer, rather than reinventing the wheel. So check out the Foobar plugin - it’s only priced at $9 (as apposed to the jQuery version which is $6) so it is a really good deal. Based on the functionality of what you are getting, I think the price will be going up to $12 next week, so get it now while it is still so cheap!