Adding shortcodes to visual composer.

shortcode.md

Shortcodes in Visual Composer

For example you have your own shortcode "hello_name":

function hello($atts, $content) {

extract(shortcode_atts( array(

'salutation' => !empty($salutation) ? $salutation : 'Mr.', 
'first_name' => !empty($first_name) ? $first_name : 'mamhmudul',  
'last_name'  => !empty($last_name) ? $last_name : 'hasan'),  
      
    $atts));

  $result= $salutation .' '. $first_name. ' '. $last_name;
  return $result;
}

add_shortcode( 'hello_name', 'hello' );

Now lets call vc_map() function from our functions.php file with an array of special attributes to describe attributes of our shortcode. Important: vc_map() call should be hooked on Visual Composer vc_before_init action.

add_action( 'vc_before_init', 'hello_with_visual' );

function hello_with_visual() {
   vc_map( array(
      "name" => __( "Hello world", "takeaway" ), //This name will be shown in the visual composer pop up.
      "base" => "hello_name", // name of the shortcode. 
      "class" => "",
      "category" => __( "Content", "takeaway"), // in which tab it will appeared? there are several tabs: content, social etc.
      // 'admin_enqueue_js' => array(get_template_directory_uri().'/vc_extend/bartag.js'),
      // 'admin_enqueue_css' => array(get_template_directory_uri().'/vc_extend/bartag.css'),
      "params" => array(
         array(
            "type" => "textfield",
            "holder" => "div",
            "class" => "",
            "heading" => __( "Salutation", "takeaway" ),
            "param_name" => "salutation",
            "value" => __( "Mr", "takeaway" ),
            "description" => __( "Description for this field.", "takeaway" )
         ),

         array(
            "type" => "textfield",
            "holder" => "div",
            "class" => "",
            "heading" => __( "First name", "takeaway" ),
            "param_name" => "first_name",
            "value" => __( "Your first name", "takeaway" ),
            "description" => __( "Description for this field.", "takeaway" )
         ),

         array(
            "type" => "textfield",
            "holder" => "div",
            "class" => "",
            "heading" => __( "Last name", "takeaway" ),
            "param_name" => "last_name",
            "value" => __( "Your first name", "takeaway" ),
            "description" => __( "Description for this field.", "takeaway" )
         )
      )
   ) );
}

As you can see it has an array of params. This list represents shortcode tag as base and params list which will be editable with settings form inside Visual Composer editor. param_name must be the same as your parameter name. Next most important attribute of params is type. There are a lot of predefined types (all of them you can see here). For attributes we'll use "textfield" which is simple input fields. Add "heading" and "description" attributes for human friendly title and description of your param. Default attribute value can be added in param attribute "value".