Themergency fooplugins

Introducing Foobar For WordPress

| 1 Comment

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 :P ? 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: 

Settings API

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.

Admin Bar

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

We include a whole bunch of jQuery code and CSS. Seeing that the whole plugin was built on a stand alone jQuery plugin, the most crucial part about this plugin was the javascript it rendered. And we didn’t want to render the JS inline. Most plugins take the easy route and just render JS inline. This does make your life easier, but your pages get bloated with code that can never be cached by the browser. So I hooked into the parse_request hook. What you then do is build up your JS in a global variable and include a script.js.php file. All that php file does is output the contents of the global var. I think I need to do a post just on this topic, as it seems to be quite a common scenario with WordPress plugins.

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!

Get it now

  • Get Livefyre
  • FAQ

Great news! But why did you release this plugin only a week after I bought the jQuery version..? Buying the plugin again!