WP Page Builder From Scratch #1: Create Page Builder Page Template

In this post, I will explain:

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:

Register Page Template From Plugin

To make this plugin not theme dependent, we need to register page template without creating it in theme. It’s actually easy. WP have theme_page_templates filter.

/* Add page templates */
add_filter( 'theme_page_templates', 'fx_pbbase_register_page_template' );

/**
 * Register Page Template: Page Builder
 * @since 1.0.0
 */
function fx_pbbase_register_page_template( $templates ){
    $templates['templates/page-builder.php'] = 'Page Builder';
    return $templates;
}

Theme can easily add support for the plugin by creating “templates/page-builder.php” file and take control of the page output if needed (e.g hide page title, full width/no sidebar, etc).

Add Page Builder Control/Setting

Instead of using meta box, I’m going to add the “page builder” after/below the Content Editor. In this tutorial, we are going to use placeholder text to display Page Builder Control.

WordPress have edit_form_after_editor hook to add content right after the visual editor.

/* Add page builder form after editor */
add_action( 'edit_form_after_editor', 'fx_pbbase_editor_callback', 10, 2 );

/**
 * Page Builder Form Callback
 * @since 1.0.0
 */
function fx_pbbase_editor_callback( $post ){
    if( 'page' !== $post->post_type ){
        return;
    }
?>
    <div id="fx-page-builder">
        <h1>Page Builder Placeholder.</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas a tortor quam. Vestibulum aliquet, diam eget dignissim vehicula, sapien sapien tempor velit, a ultrices tellus turpis nec nunc. Duis porta dapibus ligula vel semper.</p>
    </div><!-- #fx-page-builder -->
<?php
}

As the code above, we only add the Page Builder in “Page” post type.

Here’s the screenshot:

Toggle Between Editor and Page Builder

To do this we need a small JavaScript. We need to enqueue this script in Page Edit Screen:

/* Admin Script */
add_action( 'admin_enqueue_scripts', 'fx_pbbase_admin_scripts' );

/**
 * Admin Scripts
 * @since 1.0.0
 */
function fx_pbbase_admin_scripts( $hook_suffix ){
    global $post_type;

    /* In Page Edit Screen */
    if( 'page' == $post_type && in_array( $hook_suffix, array( 'post.php', 'post-new.php' ) ) ){

        /* Load Editor/Page Builder Toggle Script */
        wp_enqueue_script( 'fx-pbbase-admin-editor-toggle', FX_PBBASE_URI . 'assets/admin-editor-toggle.js', array( 'jquery' ), FX_PBBASE_VERSION );
    }
}

and the jQuery to toggle:

jQuery( document ).ready( function($) {

    /* Editor Toggle Function */
    function fxPb_Editor_Toggle(){
        if( 'templates/page-builder.php' == $( '#page_template' ).val() ){
            $( '#postdivrich' ).hide();
            $( '#fx-page-builder' ).show();
        }
        else{
            $( '#postdivrich' ).show();
            $( '#fx-page-builder' ).hide();
        }
    }

    /* Toggle On Page Load */
    fxPb_Editor_Toggle();

    /* If user change page template drop down */
    $( "#page_template" ).change( function(e) {
        fxPb_Editor_Toggle();
    });

});

So the script above will check the current selected “Page Templates” and it will toggle Content Editor/Page Builder based on user action.

Now we have a working Page Template/Page Builder switcher.

Download Source Code:

In the next tutorial we are going to build the UI and replace placeholder with real page builder UI.

Read Part #2 Tutorial