In this post I will explain how to create page builder from this: to this: to this fancy drag-and-drop UI: To follow this tutorial easier, you can download the source code for this tutorial: Deciding Page Builder Features Page builder is a way to manage content using drag-and-drop interface, where content added as rows, and we can add new rows, delete rows, etc. Each rows can have different options/settings. In this tutorial, I decided to make it as simple as possible and only have 2 type of rows: Rows with 1 column content, and Rows with 2 columns content. In rows with 1 column content, only one text area. In rows with 2 columns content, we will have two text areas. To add this “rows” of content. We need an action buttons, one for each type of rows. In earlier post ( Part #1: Create Page Builder Page Template ), we create a placeholder for the Page Builder settings in Page Edit Screen using edit_form_after_editor hook. We need to edit that function and create 3 main element: add_action('edit_form_after_editor','fx_pbbase_form_callback',10,2); function fx_pbbase_form_callback( $post ){ if('page'!== $post->post_type ){ <div id="fx-page-builder"> <?php
Share This