Creating Your First WPBakery Page Builder Widget

One of the greatest features of WPBakery Page Builder (formerly known as Visual Composer) is its flexibility, which allows developers to create their own custom widgets to extend its functionality. This article will guide you through the steps to create your first WPBakery Page Builder widget programmatically.

Prerequisites:

• WordPress installed on your local environment
• WPBakery Page Builder Plugin installed and activated

Let’s begin the journey!

Step 1: Create a PHP file

The first thing you need to do is to create a new PHP file for your widget. For the sake of simplicity, let’s create a file named my_widget.php in your active theme’s folder.

Step 2: Set Up Your Widget

Inside my_widget.php, we’re going to initialize a class that extends WPBakeryShortCode, which allows us to create a new shortcode for our widget.

Here’s the basic skeleton of the class:

<?php
if ( class_exists( 'WPBakeryShortCode' ) ) {
    class WPBakeryShortCode_My_Widget extends WPBakeryShortCode {
        // Your code goes here
    }
}
?>

In this code, My_Widget is the name of our new widget. Make sure to prefix your class name to avoid potential conflicts with other plugins.

Step 3: Define the Widget’s Settings

Inside the class, you need to define your widget’s settings, like the name, description, category, icon, and params.

Here’s an example of how to do this:

function vc_my_widget_func() {
    vc_map( array(
        "name" => __( "My Widget", "my-text-domain" ),
        "base" => "my_widget",
        "class" => "",
        "category" => __( "My Category", "my-text-domain"),
        "icon" => get_template_directory_uri().'/images/icon.png',
        "params" => array(
            array(
                "type" => "textfield",
                "holder" => "div",
                "class" => "",
                "heading" => __( "Content", "my-text-domain" ),
                "param_name" => "content",
                "value" => __( "", "my-text-domain" ),
                "description" => __( "Enter your content here.", "my-text-domain" )
            )
        )
    ) );
}
add_action( 'vc_before_init', 'vc_my_widget_func' );

Step 4: Define the Output Function

Now that we’ve defined our widget’s settings, we need to specify what the widget will output. To do this, we’ll use the content parameter that we defined in the previous step.

Here’s how to do this:

public function content( $atts, $content = null ) {
    // Extract shortcode attributes
    extract( shortcode_atts( array(
        'content' => ''
    ), $atts ) );
    
    // Define output code here
    $output = '<div class="my-widget">' . wpb_js_remove_wpautop($content, true) . '</div>';

    return $output;
}

Step 5: Register Your Widget

The final step is to include the my_widget.php file in your active theme’s functions.php file. This way, WordPress will know that it needs to load your new widget. Here’s how you can do this:

include_once( get_template_directory() . '/my_widget.php' );

And that’s it! You’ve successfully created your first WPBakery Page Builder widget programmatically. You can now use your widget from the WPBakery interface by searching for its name in the elements tab.

Remember, creating custom widgets can be complex depending on what you want to achieve, but once you’ve grasped the basics, the possibilities are endless. So, keep experimenting and happy coding!