This is Part #4 (Final) of Custom Page Builder Tutorials Series. Read the intro here.
You can download / check github repo for example plugin:
And here’s the video of the plugin in action:
Let’s start.
Table of contents
Series: Page Builder Tutorials
WP Page Builder From Scratch #3: Data Structure and Saving Page Builder Data
This is Part #3 of Custom Page Builder Tutorials Series. Read the intro here.
In earlier tutorial, I cover all about the page builder design, and how to make all the control works (create, delete, and reorder rows).
In this post I want to explain how I structure the data and save it as custom fields. Specially in how to update the row order number so we can properly save each rows data.
Download example plugin to follow tutorial easier:
Table of contents
Read More WP Page Builder From Scratch #3: Data Structure and Saving Page Builder Data
WP Page Builder From Scratch #2: Features, Design, and UI
This is Part #2 of Custom Page Builder Tutorials Series. Read the intro here.
In this post I will explain how to create page builder from this:
to this:
to this fancy drag-and-drop UI:
Table of contents
To follow this tutorial easier, you can download the source code for this tutorial:
Read More WP Page Builder From Scratch #2: Features, Design, and UI
WP Page Builder From Scratch #1: Create Page Builder Page Template
This is Part #1 of Custom Page Builder Tutorials Series.
Read the intro here.
In this post, I will explain:
Table of contents
So, the basic idea is to register “Page Builder” page template, and use it to toggle/switch between Visual Editor and Page Builder when user change the page template.
To follow this tutorial easier, you can download the source code:
Read More WP Page Builder From Scratch #1: Create Page Builder Page Template
Create Your Own WordPress Page Builder Plugin From Scratch
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:
Table of contents
Read More Create Your Own WordPress Page Builder Plugin From Scratch