How to create component for Visual Composer (js_composer from WP Bakery)

What is Visual Composer I think that I dont have to tell to anybody who is workin with WordPress. Its actually one of the most known commercial plugins for WordPress used in almost every template on ThemeForest.

All VIsual Composer elements are based on shortcodes. So when you need to make a new component you need to create a shortcode. Lets begin creation of our new Visual Composer element. In file functions.php of our theme lets write:

function sc_slide_func( $atts, $content) {
    extract( shortcode_atts( array(
        'bg_image' => 'bg_image',
        'header' => 'header'
    ), $atts ) );

    $end_content = ' <div class="slide">';
    $end_content .= wp_get_attachment_image( 1 );
    $end_content .= '<h2 class="text-center">'.$header.'</h2>';  
    $end_content .= '</div>'; 
    return $end_content;  

add_shortcode( 'sc_slide', 'sc_slide_func');

What is going on in this code?

Firstly we are defining function with two parameters,

Function add_shortcode is binding our function to shortcode available in WP Editor.

How to connect it with Visual Composer

When we have a simple (or more complex) shortcode available we can start binding it with Visual Composer. Write this code in functions.php:

vc_map( array(
    "name" => __("Component name", "js_composer"), // add a name
    "base" => "sc_slide", // bind with our shortcode
    "content_element" => true, // set this parameter when element will has a content
    "is_container" => true, // set this param when you need to add a content element in this element
    // Here starts the definition of array with parameters of our compnent
    "params" => array(
            "type" => "attach_image", // it will bind a img choice in WP
            "heading" => __("Image in background", "js_composer"),
            "param_name" => "bg_image",

            "type" => "textfield", // it will bind a textfield in WP
            "heading" => __("Header", "js_composer"),
            "param_name" => "header",
) );

// This function provides a functionality of adding content elements into element
class WPBakeryShortCode_SC_Slide extends WPBakeryShortCodesContainer {}