QNimate

  • CoursesVideos
  • WP PremiumPlugins
  • DemosLab
  • Bitcoin BankingBuy, Sell, Store and Earn Interest
  • Home
  • QIdea
  • QTrack
Home Carbon Ads Create a Drag and Drop Page Builder for WordPress

Create a Drag and Drop Page Builder for WordPress

wordpress-drag-and-drop

Drag and Drop Page Builders make it easy to build responsive grid-based page content that adapts to mobile devices. It’s a whole new way of content creation that’ll help you create your home, contact, about us or any other page where a linear layout wonโ€™t convey your message.

There are many advanced page builders such as Visual Composer and Elegant Page Builder.

In this tutorial I will show you how to create a simple drag and drop page builder. This can be helpful in many cases.

We will create a page builder in 5 simple steps with around 220 lines of code. Let’s get started

Gridster.js

We will use Gridster jQuery library to create our drag and drop page layout builder. It allows you to build intuitive draggable layouts by spanning elements in multiple columns. You can even dynamically add and remove elements from the grid.

Enqueue Gridster

Here is the code to enqueue Gridster in WordPress admin pages.

<?php

function load_admin_scripts()
{  
    wp_enqueue_style("gridster-style", "https://cdn.rawgit.com/ducksboard/gridster.js/master/dist/jquery.gridster.min.css", false);
    wp_enqueue_script("jquery-gridster", "https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js", false);
    wp_enqueue_script("gridster-script", "https://cdn.rawgit.com/ducksboard/gridster.js/master/dist/jquery.gridster.min.js", false);
    wp_enqueue_style("gridster-script-extra", "https://cdn.rawgit.com/ducksboard/gridster.js/master/dist/jquery.gridster.with-extras.min.js", false);
}

add_action("admin_enqueue_scripts", "load_admin_scripts");

?>

Here we are loading all the files from CDN but while creating a plugin for production use, you need to load them from filesystem.

Embed Drag and Drop Page Builder in Post Edit Screen

We will add drag and drop page builder in WordPress post edit pages. Here is code to do that

<?php

function meta_box_markup($object)
{
    wp_nonce_field(basename(__FILE__), 'page-builder');

    ?>
        <a href="javascript:add_widget();">Add Box</a>
        <br>

        <div style="background-color: grey; width: 750px;" class="gridster">
            <ul></ul>
        </div>

        <input type="text" name="complete_layout_data" id="complete_layout_data" style="display: none">

        <?php wp_editor("", "gridster_edit", array("tinymce" => false)); ?> <br><a href="javascript:save_edit();">Save Content</a>

        <script type="text/javascript">
            var gridster = null;
            var currently_editing = null;
            var saved_data = <?php echo json_encode(get_post_meta($object->ID, 'complete_layout_data', true)); ?>;

            $(function(){
                $(".gridster ul").gridster({
                    widget_base_dimensions: [200, 200],
                    resize: {
                        enabled: true,
                        stop: save,
                        axes: ['x']
                    },
                    draggable: {
                        stop: save
                    },
                    serialize_params: function($w, wgd){
                        var obj = {col: wgd.col, row: wgd.row, size_x: wgd.size_x, size_y: wgd.size_y, content: decodeURIComponent($w[0].getAttribute("data-content"))} ;
                        return obj;
                    }
                });

                gridster = $(".gridster ul").gridster().data('gridster');

                saved_data = JSON.parse(saved_data);

                for(var iii = 0; iii < saved_data.length; iii++)
                {
                    gridster.add_widget("<li style='background-color: black; list-style: none;' data-content=""+encodeURIComponent(saved_data[iii].content)+""><button onclick="remove_widget(event);">Remove Box</button><button onclick="edit(event);">Edit</button></li>", saved_data[iii].size_x, saved_data[iii].size_y);     
                }

                save();
            });

            function add_widget()
            {
                gridster.add_widget("<li style='background-color: black; list-style: none;' data-content=""><button onclick="remove_widget(event);">Remove Box</button><button onclick="edit(event);">Edit</button></li>", 1, 1);
                save();
            }

            function remove_widget(e)
            {
                e.srcElement.parentNode.setAttribute("id", "remove_box");
                gridster.remove_widget($('.gridster li#remove_box'));
                save();
                e.preventDefault();
            }

            function edit(e)
            {
                currently_editing = e.srcElement.parentNode;
                document.getElementById("gridster_edit").value = decodeURIComponent(e.srcElement.parentNode.getAttribute("data-content"));
                e.preventDefault();
            }

            function save_edit()
            {
                currently_editing.setAttribute("data-content", encodeURIComponent(document.getElementById("gridster_edit").value));
                save();
            }

            function save()
            {
                var json_str = JSON.stringify(gridster.serialize());
                document.getElementById("complete_layout_data").value = json_str;
            }
        </script>
    <?php
}

function my_custom_meta_box()
{
    add_meta_box("page-builder", "Page Builder", "meta_box_markup", "post", "normal", "default", null);
}
add_action("add_meta_boxes", "my_custom_meta_box");

?>

This is how the code works:

  • We created a custom meta box to display the page builder.
  • div element with class gridster is the page builder container.
  • We have a button to add more layout elements and also every layout item has a remove button to remove it.
  • We displayed the WordPress text editor using wp_editor function. This will hold contents of layout items.
  • Every layout item has an edit button to add or edit its contents. After clicking edit, you need to add contents to text area and then click “save content” button below the text area to save the content of the layout item.
  • The invisible input element holds the complete layout and contents of every individual element in it.

Here is how it looks in admin panel

rsz_screen_shot_2015-04-15_at_35448_pm

Now we need to save the value of the input field i.e., save the page builder configuration and content.

Save Custom Meta Box

Here is the code to save the layout and content

<?php
function save_my_custom_meta_box($post_id,  $post, $update)
{
    if (!isset($_POST["page-builder"]) || !wp_verify_nonce($_POST["page-builder"], basename(__FILE__)))
      return $post_id;
     
    if(!current_user_can("edit_post", $post_id))
        return $post_id;

    if(defined("DOING_AUTOSAVE") && DOING_AUTOSAVE)
        return $post_id;

    $slug = "post";
    if($slug != $post->post_type)
        return;


    $complete_layout_data = "";
    if(isset($_POST["complete_layout_data"]))
    {
        $complete_layout_data = $_POST["complete_layout_data"];
    }
    else
    {
        $complete_layout_data = "";
    }
    update_post_meta($post_id, "complete_layout_data", $complete_layout_data);
}

add_action("save_post", "save_my_custom_meta_box", 10, 3);
?>

Display the Page on Frontend

We created a custom meta box to build content of a page by drag and drop functionality. Now we need to display the content on frontend. To display the content we need to parse the custom meta box data and display accordingly. Here is the code to filter the content of posts

<?php
function page_builder_content_filter($content)
{
    global $post;
    if("post" == get_post_type())
    {
        $builder_content = json_decode(get_post_meta($post->ID, 'complete_layout_data', true));

        $current_row = 0;

        foreach($builder_content as $key => $value)
        {
            $con = $value->content;
            $col = $value->col;
            $row = $value->row;
            $size_x = $value->size_x;

            if($row == $current_row)
            {
                $content = $content . "";

                if($size_x == 1)
                {
                    $content = $content . "<div class='gridster-box gridster-box-width-one'>";
                }
                else if($size_x == 2)
                {
                    $content = $content . "<div class='gridster-box gridster-box-width-two'>";
                }
                else if($size_x == 3)
                {
                    $content = $content . "<div class='gridster-box gridster-box-width-three'>";
                }

                $content = $content . $con . "</div>";
            }
            else
            {
                if($current_row != 0)
                {
                    $content = $content . "<div class='clear'></div></div>";   
                }

                $content = $content . "<div class='gridster-box-holder'>";
                $current_row = $row;

                if($size_x == 1)
                {
                    $content = $content . "<div class='gridster-box gridster-box-width-one'>";
                }
                else if($size_x == 2)
                {
                    $content = $content . "<div class='gridster-box gridster-box-width-two'>";
                }
                else if($size_x == 3)
                {
                    $content = $content . "<div class='gridster-box gridster-box-width-three'>";
                }

                $content = $content . $con . "</div>";
            }
        }

        $content = $content . "</div>";
    }

    return $content;
}

add_filter("the_content", "page_builder_content_filter");
?>

Here we are just mirroring the backend created layout on frontend. Now we need to apply CSS to style and position the content.

Style and Position the Layout Builder Content

Here is the responsive CSS code to position the columns and content

<?php
function frontend_inline_css() {
   
    $custom_css = "
        .gridster-box-holder{
        }
        .gridster-box{
            display: inline-block;
            float: left;
        }
        .gridster-box-width-one{
            width: 33%;
        }
        .gridster-box-width-two{
            width: 66%;
        }
        .gridster-box-width-three{
            width: 99%;
        }
        .clear{clear: both;}
        @media only screen and (min-width: 320px) and (max-width: 768px) {
            .gridster-box{
                display: block;
                float: none;
            }
            .gridster-box-width-one{
                width: 100%;
            }
            .gridster-box-width-two{
                width: 100%;
            }
            .gridster-box-width-three{
                width: 100%;
            }  
        }
        "
;

    echo "<style>".$custom_css."</style>";
}
add_action("wp_footer", "frontend_inline_css");
?>

Conclusion

We created quite a powerful responsive page builder. Now go ahead and extend its functionality. Now you can build a page builder which is more suitable for your site instead of using a third-party page builder.

Apr 15, 2015Narayan Prusty
Create a Crawlable AJAX Website using PHPAJAX Request Example
Comments: 16
  1. Debabrat
    3 years ago

    I tried adding all your code but I am unable to add content in the boxes that are created. Also when they are saved nothing is saved in database. Can anyone help?

    ReplyCancel
  2. Tuan Anh Le
    4 years ago

    Hi Narayan! This is a fantastic article,thank you very much for sharing!

    ReplyCancel
    • Cinderella
      4 years ago

      Federal taxation funds nothing. It simple destroys mo.yenHordes of government employees work for agencies at other levels than the federal. Are the wage and pension catastrophes taking place in California, Illinois and other states imaginary?

      ReplyCancel
  3. arman
    4 years ago

    oh jesus, it was a long time that i was looking for this , it saved my time so much
    i really appreciate it.

    ReplyCancel
  4. sadegh
    4 years ago

    Man you save my time
    thanks a lot

    ReplyCancel
    • Mohammad
      4 years ago

      Hi Sadegh, Please let me know if you want to work with professional international wordpress team ๐Ÿ˜‰

      ReplyCancel
  5. SHANE BROWN
    4 years ago

    Superb article! Looking forward for more coding updates.

    ReplyCancel
  6. Alexandru
    5 years ago

    Hi Narayan!

    This is freaking amazing! I have been searching for something like this a long time, at least to get an idea of how the principle works.

    Do you have any idea how to approach the problem in order to be able to add widgets too? as in, the boxes in the grid would take on the role of “sidebars”, so that you can drag widgets into them?

    Thank you kindly!

    ReplyCancel
    • Goran Jakovljevic
      4 years ago

      Did u manage to solve the logic behind this ? Interested in this too.

      ReplyCancel
  7. Niklas
    5 years ago

    Nice job!

    How do you add the ability to upload an image in each box?

    Thanks..

    ReplyCancel
  8. Vinayak Sharma
    5 years ago

    Nice, Working fine with my blog..
    Thank you Narayan..

    ReplyCancel
  9. Dan
    5 years ago

    I tried taking all of these by copy and paste and putting them into the latest version of WP but no metaboxes are showing up? On the front-end it errors out:

    Warning: Invalid argument supplied for foreach() in /var/www/html/wp-content/themes/twentyfifteen/functions.php on line 498

    Which is:

    foreach($builder_content as $key => $value)

    ReplyCancel
    • Dan
      5 years ago

      Just wanted to add I was running into error saving in Firefox, had to switch to Chrome due to this error:

      http://stackoverflow.com/questions/13602039/e-srcelement-is-undefined-in-firefox

      ReplyCancel
  10. Cedric Mussmann
    5 years ago

    Hey Narayan, Great job. I have a blog and I definitely going to apply this, because this is holly amazing man by just adding plugin. I am glad that I found your blog also will share to my friends who have a interest on blog. Thanks for sharing. Keep it up.

    ReplyCancel
  11. Anam Ahamed
    5 years ago

    Can I get any source code download link or github repo ?

    ReplyCancel
    • Narayan Prusty
      5 years ago

      Just create a plugin and add all the code of this articles in it. No need to modify anything. It will work.

      ReplyCancel

Leave a Reply to sadegh Cancel reply

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

Narayan Prusty

I am a full-stack web developer. I specialize in Blockchain and JavaScript. This is my personal blog where I write about programming and technologies that I learn and feel interesting to share.

5 years ago 16 Comments WordPress
Share this
0
GooglePlus
0
Facebook
0
Twitter
0
Linkedin
  • Gridster.js
  • Enqueue Gridster
  • Embed Drag and Drop Page Builder in Post Edit Screen
  • Save Custom Meta Box
  • Display the Page on Frontend
  • Style and Position the Layout Builder Content
  • Conclusion
Related Articles
  • Full Screen Scrolling with Page Piling Effect
  • Creating Full Screen Grid Layouts using jQuery Nested
  • Creating Windows Metro Style Layout for Websites
  • Get Excerpt in WordPress
  • Full Screen Scrolling with Page Split Effect
Our Sponsor
Freelance: I am available
@narayanprusty
Hi, I am a full-stack developer - focusing on JavaScript, WordPress, Blockchain, DevOps, Serverless and Cordova. You can outsource your app development to me.





Will get back to you soon!!!
WordPress
ReactJS
Meteor
Blockchain
Serverless
Kubernetes
DevOps
DB & Storage
Ejabberd
Let's get started
My Books

2014 - 2015 © QNimate
All tutorials MIT license