Add custom component (existing shortcode) to visual composer

custom_vc_components.md

1. Add shortcode (in functions.php or equivalent)

  	add_shortcode('shortcode-name', function($params){
  		include(get_template_directory() . '/path/to/shortcode.php');
  	});

2. Add action

  	add_action( 'vc_after_init', 'add_shortcode');
  	function add_shortcode() {
  		include(get_template_directory() . '/vc_templates/vc_shortcode.php');
  	}

3. Set up UI for VC backend editor window (in vc_shortcode.php) read more

  	vc_map( array(
  		"name" => __("Component Name"),
  		"base" => "shortcode-name",
  		"category" => __('Content'),
  		"params" => [
  			[
  				"type" => "textfield",
  				"heading" => __("Service Title"),
  				"param_name" => "title",
  			],
  			[
  				"type" => "textarea_html",
  				"heading" => __("Top Treatments"),
  				"param_name" => "content",
  			],
  			[
  				"type" => "attach_image",
  				"heading" => __("Card Image"),
  				"param_name" => "image",
  			],
  			[
  				"type" => "vc_link",
  				"heading" => __("Learn More Button Link"),
  				"param_name" => "button_link"
  			],
  		]
  	));

4. In shortcode's file, retrieve data from UI:

  	<?php
  		extract(shortcode_atts([
  			'title' => null,
  			'content' => null,
  			'image' => null,
  			'link' => null,
  		], $params));

5. Parse into html:

   <h2> <?= $title ?> </h2>