basic template for wordpress visual composer component reference

wordpress_custom_component.php

<!-- add to top of functions.php -->
<?php 
add_action( 'vc_before_init', 'vc_before_init_actions' );
function vc_before_init_actions() {
  require get_parent_theme_file_path( '/custom_components/custom-component-header.php' );
}
?>

<!--end ->

// the custom component -- >

<?php
/**
* VC Example Component
*
* @link https://github.com/okmediagroup/wordpress-assets/blob/master/vc-elements/vc-example-component.php
*
* @package WordPress
* @subpackage OKMG_WordPress
* @since 1.0
*/

class vcExampleComponent extends WPBakeryShortCode {

	function __construct() {
		add_action( 'init', array( $this, 'vc_example_component_mapping' ) );
		add_shortcode( 'vc_example_component', array( $this, 'vc_example_component_html' ) );
	}

	public function vc_example_component_mapping() {

		if ( !defined( 'WPB_VC_VERSION' ) ) {
			return;
		}

		vc_map(
			array(
				'name' => __('mb component', 'text-domain'),
				'base' => 'vc_example_component',
				'description' => __('fixed background heading with text', 'text-domain'),
				'category' => __('Custom Elements', 'text-domain'),
				'icon' => 'http://img27.laughinggif.com/pic/HTTP21lZGlhLmdpcGh5LmNvbS9tZWRpYS9KbWd5cUVIeThiYXhPL2dpcGh5LmdpZgloglog.gif',
				'admin_enqueue_css' => array(get_template_directory_uri().'/mb_component.css'),
				//'admin_enqueue_js' => array(get_template_directory_uri().'/test.js'),
				'params' => array(

					array(
						'type' => 'textfield',
						'holder' => 'h2',
						'class' => 'title-class',
						'heading' => __( 'Enter title name', 'text-domain' ),
						'description' => __( 'title to be displayed in center of section area', 'text-domain' ),
						'param_name' => 'title',
						'value' => __( '', 'text-domain' ),
						'admin_label' => false,
						'weight' => 0,
						'group' => 'Custom Group',
					),  
					
					array(
						'type' => 'textfield',
						'holder' => 'h2',
						'class' => 'title-class',
						'heading' => __( 'Title size in px', 'text-domain' ),
						'description' => __( 'title size', 'text-domain' ),
						'param_name' => 'size1',
						'value' => __( '', 'text-domain' ),
						'admin_label' => false,
						'weight' => 0,
						'group' => 'Custom Group',
					), 
					array(
						'type' => 'textfield',
						'holder' => 'h2',
						'class' => 'title-class',
						'heading' => __( 'Title color (rgba)', 'text-domain' ),
						'description' => __( 'title color', 'text-domain' ),
						'param_name' => 'color1',
						'value' => __( '', 'text-domain' ),
						'admin_label' => false,
						'weight' => 0,
						'group' => 'Custom Group',
					), 

					array(
						'type' => 'textarea',
						'holder' => 'p',
						'class' => 'text-class',
						'heading' => __( 'Enter sub heading', 'text-domain' ),
						'description' => __( 'heading to be displayed under main title', 'text-domain' ),
						'param_name' => 'text',
						'value' => __( '', 'text-domain' ),
						'admin_label' => false,
						'weight' => 0,
						'group' => 'Custom Group',
					), 
					array(
						'type' => 'textfield',
						'holder' => 'p',
						'class' => 'text-class',
						'heading' => __( 'Enter sub heading size px', 'text-domain' ),
						'description' => __( 'sub heading size', 'text-domain' ),
						'param_name' => 'size2',
						'value' => __( 'Default value', 'text-domain' ),
						'admin_label' => false,
						'weight' => 0,
						'group' => 'Custom Group',
					), 

					array(
						'type' => 'textfield',
						'holder' => 'p',
						'class' => 'text-class',
						'heading' => __( 'Enter sub heading color (rgba)', 'text-domain' ),
						'description' => __( 'sub heading color', 'text-domain' ),
						'param_name' => 'color2',
						'value' => __( 'Default value', 'text-domain' ),
						'admin_label' => false,
						'weight' => 0,
						'group' => 'Custom Group',
					), 
					array(
						'type' => 'textfield',
						'holder' => 'div',
						'class' => 'wrap-class',
						'heading' => __( 'choose background image', 'text-domain' ),
						'param_name' => 'image',
						'value' => __( 'insert image url', 'text-domain' ),
						'description' => __( 'background-image', 'text-domain' ),
						'admin_label' => false,
						'weight' => 0,
						'group' => 'Custom Group',
					),  
					
				),
			)
		);
	}

	


	public function vc_example_component_html( $atts ) {

		extract(
			shortcode_atts(
				array(
					'image' => '',
					'color1' => '',
					'size1' => '',
					'title' => '',
					'color2' => '',
					'size2' => '',
					'text' => '',
					),
				$atts
				)
			);

		$html = '
		<div class="vc-infobox-wrap" style="background-image:url('. $image . ');">
			<div style="text-align:center;margin:auto">
				<h2 class="vc-infobox-title" style="color: '. $color1 .';font-size:'. $size1 .'">' . $title . '</h2>

				<p class="vc-infobox-text" style="color: '. $color2 .';font-size:'. $size2 .'">' . $text . '</p>
			</div>
		</div>';

		return $html;
	}
}

new vcExampleComponent();