A few months back I have been talking about building some sort of a template builder framework for WordPress themes. I don’t get around to focus too much on the project, so things has been going pretty slow with it. The last few weeks however, after much throttling of my sleeping schedules and passing a few client works; Voilà, the Aqua Page Builder.
So what is it exactly?
The original plan was to build a simple “layout builder” or “template editor” or something like that, which basically just a simple way to divide the content into some nice columns, then use it as a template so people can use it over and over again. But that was too simple, and people hate simple, so I ditched simple and be complicated instead.
Here’s a copy of the description for the plugin. I think I summarised it quite well in a few sentences there:
Aqua Page Builder is a powerful WordPress plugin that allows you to create an unlimited number of template variations for use in your WordPress themes. It follows the same user interface used by the Menus & Widgets admin pages – making you feel right at home with the UI.
Similar to the Widgets &s Menus, Aqua Page Builder features the drag and drop interaction to build its templates.
At this point you should just head over to its Github page, download it and install it as a plugin to your theme. Anything else below this line is just me documenting some details about its mechanics and probably sharing a few tips on developing themes with the Aqua Page Builder.
Why Should I Use it?
1. It’s free
Do whatever you want with it – Include it you themes, bundle it in a download, edit the codes, make it into a new plugin or whatever. Just make sure the credit & license is intact.
2. Your users will love it
I spent quite a great deal of time designing the interface so that it blends transparently with the WordPress admin. Upon viewing the builder page, users will instantly be familiar with its Menu-like panel, coupled with the drag-and-drop interaction they’re so used to in the Widgets page. The only addition that’s not too obvious (which I plan to make more obvious) here is the ability to resize the blocks at whatever width they like.
Aqua Page Builder was also designed to reside on a completely independent page, instead of cluttering the post editor like some other “page builder” out there. The idea was to offer the freedom to build content outside of the editor, and use it anywhere they like at all. The “template” doesn’t have to be a complete page at all, it can be part of a page that can be re-used on a unlimited amount of pages/post they like. Use your imagination, go wild.
I’m also in the process of writing a complete how-to documentation page, which will be linked directly from the plugin page for the convenience of the users. The link to that page is located here.
3. Easy to extend & develop with.
For now I’ve written some short articles in the Aqua Page Builder’s Wiki for authors so start developing their themes to incorporate the plugin. The plugin follows the code structure which was used by the Widgets API to build its block, meaning that you don’t have to learn completely new way to build your own custom blocks. You can even re-use some of your own custom widgets to be used as a block with some minor adjustments.
The basic structure to build your custom block looks like this:
You will notice right away that this is very similar to how you would register a custom widget that authors are way too familiar with – see http://codex.wordpress.org/Function_Reference/register_widget
In addition, the plugin also includes some hooks/filters for authors to include their own custom scripts, css etc. I have also included a “Tabs/Toggles” block which is supposed to demonstrate how you can incorporate some ajax goodness into your block.
Another nice sugar is the “Form Fields Helper” functions which is included in the plugin so that authors can easily build their block forms without having to deal with slightly more complex HTML structure of each form fields. All these helper functions is located inside the /functions/aqpb_functions.php file.
Please take a look inside the codes of each block (located inside /block dir) so that you can get more familiar with the plugin and start building your own block. I will also be releasing a theme soon which features some custom blocks and hopefully demonstrate what the plugin is capable of doing.
The wiki page is far from complete so please check it out from time to time. I will appreciate all the comments here but if you have technical questions to ask please please please kindly use the Issues page of the plugin on Github.
4. Automatic Updates
I don’t plan on releasing the plugin to WP Repository anytime soon, and so I have built a custom API to handle automatic update for the plugin. What this means basically is that your users will have the latest version of the plugin installed in their themes without having to download it manually on Github.
Donations
As always, if you have some spare bucks, please seriously consider helping the World Food Programme to build world without hunger. Your donations will provide foods & shelters to those who needs them the most! - Fill the Cup!
Or, buy me a coffee :)
Cheers