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

We are using cookies on our website

Please confirm, if you accept our tracking cookies. You can also decline the tracking, so you can continue to visit our website without any data sent to third party services.