Visual Composer custom elements – WPBakery

Learn how to create a custom WPBakery Visual Composer element in WordPress. This tutorial guides you step-by-step to build a custom info box element with title and content fields for WPBakery using vc_map().

WPBakery (formerly Visual Composer) is one of the most popular page builders for WordPress, and its flexibility allows developers to extend its functionality by creating custom elements. In this tutorial, we’ll walk through the steps to create a custom element using WPBakery. Specifically, we’ll build a custom “Info Box” element with a title and content field, which can be reused within WPBakery’s visual interface.

Follow the steps below to create your first WPBakery Visual Composer custom element.

Step 1: Create a New Folder for Custom Elements

First, navigate to your current active theme folder and create a new folder named vc-elements. This folder will contain all your custom WPBakery elements.

Step 2: Modify functions.php to Register Custom Elements

Next, open your theme’s functions.php file and add the following code. This code checks if WPBakery is enabled, and if so, it loads the custom elements from the vc-elements folder.

Code to Add in functions.php:

<?php
/**
 * Visual Composer custom elements.
 */
function vc_before_init_actions() {
  // Stop if Visual Composer is not enabled.
  if ( ! defined( 'WPB_VC_VERSION' ) ) {
    return;
  }
// Visual Composer custom elements list.
  require_once( get_template_directory() . '/vc-elements/infobox.php' );
}
add_action( 'init', 'vc_before_init_actions' );

Note: In this example, we will create an “Info Box” custom element with a title and a content (textarea) field. Feel free to expand or modify this as per your requirements.

Step 3: Create the infobox.php File

Now, create a new file named infobox.php inside the vc-elements folder. This file will contain the logic for the custom Info Box element.

Step 4: Extend WPBakeryShortCode and Register the Element

In the newly created infobox.php file, extend the WPBakeryShortCode class and register the element using the vc_map() function. Here’s the complete code:

Code for infobox.php:

<?php
/**
 * Class to load for this map.
 */
class VC_Custom_InfoBox extends WPBakeryShortCode {
    /**
     * Shortcode display.
     */
    protected function content( $atts, $content = null ) {
        // Variables.
        $display = '';
        $attr    = array();
        extract(
            shortcode_atts(
                array(
                  'title'   => '',
                  'content' => ''
            ), $atts )
        );
        // Display html.
        $display .= '<div class="infobox__wrapper">';
            $display .= '<h3 class="infobox__title">' . esc_html( $title ) . '</h3>';
            $display .= '<p class="infobox__content">' . esc_html( $content ) . '</p>';
        $display .= '</div>';
        return $display;
    }
}

<?php
/**
 * VC Map elements.
 */
vc_map( array(
    'base'        => 'vc_custom_infobox',
    'name'        => esc_html__( 'Info Box', 'text-domain' ),
    'description' => esc_html__( 'Display custom infobox', 'text-domain' ),
    'class'       => '',
    'category'    => esc_html__( 'Visual Composer Custom Elements', 'text-domain' ),
    'params'      => array(
        array(
            'type'        => 'textfield',
            'heading'     => esc_html__( 'Title', 'text-domain' ),
            'param_name'  => 'title',
            'value'       => ''
        ),
        array(
            'type'        => 'textarea',
            'heading'     => esc_html__( 'Content', 'text-domain' ),
            'param_name'  => 'content',
            'value'       => ''
        )
    )
) );

In this code, we are defining a new WPBakery shortcode element called vc_custom_infobox. This element has two parameters: a text field for the title and a textarea for the content. When the element is used in WPBakery’s visual editor, these parameters will generate an Info Box element with a custom title and content.

Step 5: Use Your New Custom Element

Once you’ve added the code and saved your files, your new Info Box element will appear in the Visual Composer editor under the category “Visual Composer Custom Elements.” You can now drag and drop the Info Box element into your layouts and customize it with a title and content.

Conclusion

Congratulations! You’ve successfully created a custom Info Box element in WPBakery Visual Composer. You can now extend this functionality further by adding more fields or creating additional custom elements.

For more information about the vc_map() function and how to extend WPBakery, refer to the official documentation: VC Map Inner API.