How to create a custom element in the visual composer

Posted By : Shilpa Adlakha | 25-Feb-2018

html5

Visual Composer is a page builder tool.It helps in creating pages very easily. In this, it provides a number of elements, which helps in creating the site. But there may be a situation where we want to add the custom element with specific functionality.

To create a custom element in visual composer we follow the following steps:

Step1: Placement of code:

We can place the code in functions.php file of the current theme in WordPress. but to keep the code separate, we can put it in a separate file.Inside VC-elements folder we can create a PHP file that will contain the new element. we have created, for example, my-first-own-custom-element.php

Add the following code in function.php in your theme. It’s called before the Visual Composer initialization:

// Before VC Init
add_action( 'vc_before_init', 'vc_before_init_actions' );
 
function vc_before_init_actions() {
     
    // Put Code Here ..//
 
    // Including the separate file created here
    require_once( get_template_directory().'/vc-elements/my-first-own-custom-element.php' ); 
     
}

In the above code: we included the separate file in the code.

Step 2: Initializing the new custom Element

we create a PHP Class to extend the WPBakeryShortCode Class so that we can include all the code in the same place.

The Class consists of 3 parts:

1) Shortcode Init
2) Shortcode Map (parameters)
3) Shortcode HTML

/*
Element Description: VC Info Box
*/
 
// Element Class 
class vcInformationBox extends WPBakeryShortCode {
     
    // Element Init
    function __construct() {
        add_action( 'init', array( $this, 'vc_informationbox_mapping' ) );
        add_shortcode( 'vc_informationbox', array( $this, 'vc_informationbox_html' ) );
    }
     
    // Element Mapping
    public function vc_informationbox_mapping() {
         
        //.. Add the Code  ..//                           
        
    } 
     
     
    // Element HTML
    public function vc_informationbox_html( $atts ) {
         
        //.. Add the Code  ..//
         
    } 
     
} // End Element Class
 
// Element Class Init
new vcInformationBox();

In the above line of code: We have extended the WPBakeryShortCode class to class vcInformationBox.Then we added the constructor to initialize the function in the class and added the action using vc_informationbox_mapping().
To add shortcode add_shortcode() is used.

Step 3: Mapping the Custom Element

vc_map() function, that allows to add new elements inside the Visual Composer and to assign them custom params/attributes.

// Element Mapping
public function vc_informationbox_mapping() {
         
    // Stop all if VC is not enabled
    if ( !defined( 'WPB_VC_VERSION' ) ) {
            return;
    }
         
    // Map the block with vc_map()
    vc_map( 
  
        array(
            'name' => __('VC Informationbox', 'text-domain'),
            'base' => 'vc_informationbox',
            'description' => __('A simple VC box', 'text-domain'), 
            'category' => __('My Own Custom Elements', 'text-domain'),   
            'icon' => get_template_directory_uri().'/assets/img/vc-icon.png',            
            'params' => array(   
                      
                array(
                    'type' => 'textfield',
                    'holder' => 'h3',
                    'class' => 'title-class',
                    'heading' => __( 'Title', 'text-domain' ),
                    'param_name' => 'title',
                    'value' => __( 'Default value', 'text-domain' ),
                    'description' => __( 'Box Title', 'text-domain' ),
                    'admin_label' => false,
                    'weight' => 0,
                    'group' => 'Custom Group',
                ),  
                  
                array(
                    'type' => 'textarea',
                    'holder' => 'div',
                    'class' => 'text-class',
                    'heading' => __( 'Text', 'text-domain' ),
                    'param_name' => 'text',
                    'value' => __( 'Default value', 'text-domain' ),
                    'description' => __( 'Box Text', 'text-domain' ),
                    'admin_label' => false,
                    'weight' => 0,
                    'group' => 'Custom Group',
                )                   
                     
            )
        )
    );                                
        
}

In the above stpe: We have added the description and the name of the element created.With the help of category attribute, we have created a custom tab for the newly created element. otherwise , it will be shown in all tabs.

To add icon we use icon attribute.

Step 4: Element HTML

We create frontend layout using the vc_information_html() function.

// Element HTML
public function vc_informationbox_html( $atts ) {
     
    // Params extraction
    extract(
        shortcode_atts(
            array(
                'title'   => '',
                'text' => '',
            ), 
            $atts
        )
    );
     
    // Fill $html var with data
    $html = '
    <div class="vc-informationbox-wrap">
     
        <h2 class="vc-informationbox-title">' . $title . '</h2>
         
        <div class="vc-informationbox-text">' . $text . '</div>
     
    </div>';      
     
    return $html;
     
}

In the above code: we have set a variable using $atts in the function. The function extracts all values from the database. we are extracting the title and text param from a $title and $text respectively.The default value is empty if we do not specify its value.Then we fill the $html variable with the HTML code adding also my 2 attributes $title and $text and we finally return the $html variable rendering my custom element in the frontend.

By following steps we can create a custom element in Visual Composer page builder.

Thanks