How to create a Custom WPBakery Element

WPBakery Page Builder (formerly Visual Composer) is a popular drag-and-drop page builder plugin for WordPress. One of its key features is the ability to add custom widgets to your website, which can greatly enhance the functionality and design of your site. In this article, we’ll take a closer look at WPBakery widgets and how you can use them to take your website to the next level.

What are WPBakery widgets?

WPBakery widgets are pre-designed elements that you can add to your WordPress pages and posts using the WPBakery Page Builder. These widgets can perform a wide range of functions, including displaying images, adding text, creating buttons, showing video, and much more. They are an easy and convenient way to add custom content to your site without having to write any code.

Benefits of using WPBakery widgets

There are several benefits to using WPBakery widgets, including:

• Speed and efficiency: By using widgets, you can quickly add custom content to your site without having to write any code or hire a developer.
• Improved design: WPBakery widgets come in a variety of styles and designs, allowing you to create a custom look and feel for your site.
• Enhanced functionality: With widgets, you can add new features and functionality to your site, such as contact forms, social media feeds, and more.
• Easy customization: Most WPBakery widgets come with a variety of customization options, allowing you to tailor the look and feel to match your brand and style.

How to use WPBakery widgets?

Using WPBakery widgets is simple and straightforward. To add a widget to your site, simply follow these steps:

• Install and activate the WPBakery Page Builder plugin.
• Create a new page or post, or edit an existing one.
• Click on the “Add Element” button in the WPBakery Page Builder interface.
• Select the widget you want to add from the list of available widgets.
• Customize the widget to your liking by changing the text, images, and other elements as needed.
• Save your changes and publish the page or post.

Popular WPBakery widgets

There are a variety of WPBakery widgets available, but some of the most popular include:

• Image Gallery: This widget allows you to create a custom image gallery with a variety of design options.
• Testimonials: With this widget, you can display customer testimonials on your site.
• Button: This widget allows you to add custom buttons to your site with a variety of design options.
• Video Player: This widget allows you to add a video player to your site, making it easy to embed and display videos.
• Contact Form: This widget allows you to add a contact form to your site, making it easy for visitors to get in touch with you.

How to create a custom element

To create a custom element for WPBakery (also known as Visual Composer), you will need to write a plugin that registers a new shortcode. The shortcode will be used to display your custom element in the page or post editor, and the plugin will define how the element is displayed on the front-end of your website.

Here are the basic steps to create a custom element for WPBakery:

• Create a new plugin: Start by creating a new plugin in your WordPress installation. You can do this by creating a new folder in the “wp-content/plugins” directory and adding a plugin header to the main plugin file.
• Register a new shortcode: Next, you’ll need to register a new shortcode for your custom element. You can do this by using the “add_shortcode” function in WordPress.
• Define the shortcode callback: The shortcode callback is a function that is executed whenever the shortcode is encountered in a post or page. This function should return the HTML output for your custom element.
• Enqueue any necessary scripts and styles: If your custom element requires any JavaScript or CSS files, you’ll need to enqueue them in your plugin.
• Add settings for your custom element: You can add settings for your custom element by using the “vc_map” function in WPBakery. This function allows you to define the parameters for your element, such as the element name, description, and any settings fields.
• Display the custom element on the front-end: Finally, you’ll need to write the HTML and JavaScript code to display your custom element on the front-end of your website.

Here is an example of a basic plugin that creates a custom element for WPBakery:

<?php

/*
Plugin Name: WPBakery Custom Element
Description: A custom element for WPBakery Page Builder
Version: 1.0
Author: Projects Engine
*/

add_shortcode( 'wpbakery_custom_element', 'wpbakery_custom_element_shortcode' );

function wpbakery_custom_element_shortcode( $atts ) {
  extract( shortcode_atts( array(
    'title' => '',
  ), $atts ) );

  $output = '<div class="wpbakery-custom-element">';
  $output .= '<h2>' . $title . '</h2>';
  $output .= '</div>';

  return $output;
}

add_action( 'vc_before_init', 'wpbakery_custom_element_vc_map' );

function wpbakery_custom_element_vc_map() {
  vc_map( array(
    "name" => __( "WPBakery Custom Element", "my-text-domain" ),
    "base" => "wpbakery_custom_element",
    "class" => "",
    "category" => __( "Content", "my-text-domain"),
    "params" => array(
      array(
        "type" => "textfield",
        "holder" => "div",
        "class" => "",
        "heading" => __( "Title", "my-text-domain" ),
        "param_name" => "title",
        "value" => __( "Default Title", "my-text-domain" ),
        "description" => __( "Enter the description, "my-text-domain" ) 
      )
     )
 ) );
}

Conclusion

WPBakery widgets are a powerful and versatile tool for improving the design and functionality of your WordPress site. Whether you’re looking to add a custom image gallery, display customer testimonials, or create a custom contact form, WPBakery widgets make it easy to get the job done. So why not start using them today and see how they can enhance your website.