This is the introduction of Custom Page Builder Tutorials Series.
Page Builder is very popular in WordPress. This post is not about how to use page builder. In this tutorial, we are going to build page builder plugin from scratch.
It’s not going to be a complex page builder, a simple one so we can understand how the code works, and possibly use it as base/example for more complex system.
This is the page builder in action:
FAQ
Why not use available Page Builder such as Site Orgin’s Page Builder, Visual Composer, Beaver Builder, etc?
In my opinion, in most use case, page builder is too complex. Because of the massive features, I don’t really enjoy working with page builder. Design/theme integration could be overwhelming.
Why not library such as ACF PRO where you can custom-made page builder (flexible content) ?
I use ACF PRO a lot, it’s a great library, but sometimes the UI is not suitable for our needs. Sometimes it’s feels overkill to use this massive library for simple plugin. And we have no control in future development of the plugin.
I believe it’s important to know how to build our own, plus, no additional plugin required for user to install/purchase.
Who need this tutorial?
Anyone who want to learn how to create simple drag-and-drop interface, specifically in WordPress.
After you master/understand the concept, it will open to a lot of possibilities. You can implement this tutorial in settings page, etc.
You’ll be able to build drag-and-drop form builder (maybe create the next Gravity Forms), theme with page builder build in (Make Theme), etc.
Skill level needed?
Not much. You need to be familiar with WordPress post meta/custom fields to understand. How to save the data, output the data, delete the data.
You can read Justin Tadlock’s tutorial on Smashing Magazine about meta box: How To Create Custom Post Meta Boxes In WordPress, and get familiar with post meta before following this tutorials.
JavaScript/jQuery I use in this tutorial also simple and easy to understand. But at least you need to understand a simple JavaScript 🙂
Custom WP Page Builder Tutorials
I separated the tutorials into several post because it’s too long and too complex. I probably need several days to write all of it.
#1. Create Page Builder Page Template
This is about how to register Page Template from a plugin, how to toggle between editor and page builder setting/control.
#2. Features, Design, & UI
In this tutorial I’m going to explain the page builder features, the design of the builder, creating the conrol UI, jQuery example in how to create sortable row, add new row, delete rows, etc.
#3. Saving the Data, Data Structure, Validation, etc
Explanation in how to save the dynamic page builder data, how the data structure works, how to sanitize and validate the data, and all the fun stuff.
#4. Display Data in Front End, Save Data to Editor
How to output the data in front end. Strategy to save the data to page/post_content, etc. Finalize example plugin.
To get updates, follow my twitter @turtlepod.
Hi,
this article was extremely helpful for my magazine blog in wordpress.
I have small doubt about adding drag and drop instead of existing clicking function to add row template in target blank template..
thanks…. I hope you will help me.
As you know this structure saves all content as custom field.
I want to creat custom shortcode for each custom field.
How can I save shortcodes into the content?