How to Create Custom Elements/Widgets for WP Bakery Page Builder

WPBakery Page Builder (formerly known as Visual Composer) is a popular drag-and-drop page builder for WordPress that makes it easy to create stunning web pages. While WPBakery Page Builder comes with a wide range of built-in elements (also called widgets or shortcodes), there may be times when you need to create your custom elements to meet specific design or functionality requirements. This is where the vc_map function becomes highly beneficial. In this article, we'll explore how to create custom elements/widgets for WPBakery Page Builder using vc_map.

What is vc_map?

vc_map is a powerful function provided by WPBakery Page Builder that allows you to register and configure custom elements or widgets. By using vc_map, you can define the attributes, settings, and appearance of your custom element, making it easy for users to add and customize it within the page builder.

Here's a step-by-step guide on how to create your custom element using vc_map:

Step 1: Set up Your WordPress Environment

Before you start creating custom elements, ensure you have a WordPress website with WPBakery Page Builder installed and activated. You'll also need a code editor to write PHP code for your custom element.

Step 2: Create a New PHP File

Create a new PHP file for your custom element. It's best to place this file in your theme's directory or create a simple plugin for this purpose. Name the file something meaningful, like "custom-element.php."

Step 3: Define the Custom Element Using vc_map

In your "custom-element.php" file, you'll use the vc_map function to define your custom element. Here's a basic example:

if (function_exists('vc_map')) {
   vc_map(array(
      "name" => "Custom Element Name",
      "base" => "custom_element",
      "category" => "My Elements",
      "params" => array(
         // Define your element's parameters here
      )
   ));
}        

• "name" is the name of your custom element as it will appear in the WPBakery Page Builder's elements list.
• "base" is a unique identifier for your element.
• "category" is the category where your custom element will be displayed in the elements list.
• "params" is where you define the attributes and settings for your element.

Step 4: Define Your Element's Parameters

Inside the "params" array, you'll define your element's parameters, including its attributes, settings, and appearance options. Here's an example parameter definition for a simple custom button element:

"params" => array(
   array(
      "type" => "textfield",
      "heading" => "Button Text",
      "param_name" => "button_text",
      "value" => "Click Me",
      "description" => "Enter the text for your button."
   ),
   array(
      "type" => "colorpicker",
      "heading" => "Button Color",
      "param_name" => "button_color",
      "value" => "#ff9900",
      "description" => "Select the button color."
   )
)        

In this example, we've defined two parameters: "Button Text" and "Button Color." You can add more parameters as needed for your custom element.

Step 5: Define the Element's Output

Finally, you'll need to create the function that generates the output of your custom element based on the defined parameters. This function should be hooked into the "shortcode" filter and should return the HTML output of your element. Here's a simplified example:

function custom_element_output($atts) {
   extract(shortcode_atts(array(
      'button_text' => 'Click Me',
      'button_color' => '#ff9900',
   ), $atts));

   $output = '<a href="#" style="background-color: ' . $button_color . ';">' . $button_text . '</a>';
   return $output;
}
add_shortcode('custom_element', 'custom_element_output');        

In this example, the function "custom_element_output" extracts the attributes, and then it generates an anchor tag with the specified button text and color.

Step 6: Use Your Custom Element

With the custom element defined and the function in place, you can now use your custom element within WPBakery Page Builder. When you add a new element to your page, you'll find your custom element listed in the "My Elements" category.

Conclusion

Creating custom elements/widgets for WPBakery Page Builder using vc_map allows you to extend the functionality of the page builder and tailor it to your specific needs. By following the steps outlined in this article, you can register your elements and give your website a unique and customized look. Custom elements not only enhance your design capabilities but also streamline the content creation process for both you and your clients. For more detailed information, you can refer to the WPBakery Page Builder documentation on vc_map.