Create Your Own WordPress Page Builder Plugin From Scratch

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.

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 ?

Περισσότερα εδώ:

You may also like...