Adding custom content element to Visual Composer

functions.php

<?php

add_action( 'vc_before_init', 'zaroutski_vc_register_banner_section_shortcode' );

/**
 * Register banner section content element in Visual Composer
 */
function zaroutski_vc_register_banner_section_shortcode() {

	vc_map( array(

		// Name of the new content element
		"name" => __( "Banner section", "zaroutski" ),

		// Reference of teh new content element
		"base" => "zaroutski-banner-section",

		// Icon to be used within the Visual Composer admin interface when editing a post or a page
		"icon" => get_template_directory_uri() . "/vc-extend/zaroutski-content-elements-cta-button-section-icon.png",

		// Custom fields of the new content element
		"params" => array(

			// Text field for the heading
			array(
				"type" => "textfield",
				"holder" => "div",
				"class" => "vc_admin_label admin_label_h2",
				"heading" => __("Heading text"),
				"param_name" => "heading-text",
				"value" => __(""),
				"description" => __("Heading that will be displayed in the banner section")
			),

			// Text field for secondary text
			array(
				"type" => "textfield",
				"class" => "",
				"heading" => __("Secondary text"),
				"param_name" => "secondary-text",
				"value" => __(""),
				"description" => __("Text that will be displayed between the heading and the button")
			),

			// Link field for the button's URL
			array(
				"type" => "vc_link",
				"class" => "",
				"heading" => __("Button URL"),
				"param_name" => "button-url",
				"value" => __("/contact"),
				"description" => __("The button will link to this URL")
			),

			// Drop down for button style
			array(
				"type" => "dropdown",
				"class" => "",
				"heading" => __("Button style"),
				"param_name" => "section-button-style",
				"value" => array(
					'Blue background / White text' => 'button-blue-background',
					'White background / Blue text' => 'button-white-background',
				),
				"description" => __("Style of the button")
			),

			// Drop down for section style
			array(
				"type" => "dropdown",
				"class" => "",
				"heading" => __("Section background colour"),
				"param_name" => "section-background-colour",
				"value" => array(
					'Corporate blue' => 'colour-corporate-blue',
					'Transparent' => 'transparent',
				),
				"description" => __("Background colour of the section")
			),

			// Enable the Design section in the content element settings
			array(
				'type' => 'css_editor',
				'heading' => __( 'Css', 'my-text-domain' ),
				'param_name' => 'css',
				'group' => __( 'Design options', 'my-text-domain' ),
			),

		),
	) );
}

class WPBakeryShortCode_BannerSection extends WPBakeryShortCode {}

/**
 * Visual Composer banner section shortcode
 */
function vc_banner_section_shortcode( $attributes ) {

	// Get defaults of the Visual Composer new content element
	$defaults = vc_map_get_defaults('zaroutski-banner-section');

	// Use defaults if values not provided
	if ( empty( $attributes['section-button-style'] ) ) { $attributes['section-button-style'] = $defaults['section-button-style']; }
	if ( empty( $attributes['section-background-colour'] ) ) { $attributes['section-background-colour'] = $defaults['section-background-colour']; }

	// Attributes
	extract( shortcode_atts(
		array(
		), $attributes )
	);

	// Code
	return render_cta_button_section( $attributes );
}
add_shortcode( 'zaroutski-banner-section', 'vc_banner_section_shortcode' );

/**
 * Render CTA button section
 *
 * @param array $attributes
 * @return string
 */
function render_cta_button_section( $attributes ) {

	// Prepare the URL options for the view
	$url_options_string = $attributes['button-url'];
	$url_options_array = explode( '|', $url_options_string );
	$url_options = array();

	foreach ( $url_options_array as $entry ) {
		$temp_array = explode( ':', $entry );
		$url_options[ $temp_array[0] ] = urldecode_deep( $temp_array[1] );
	}

	// Prepare the variables for the view
	$heading_text = $attributes['heading-text'];
	$secondary_text = $attributes['secondary-text'];
	$button_text = $url_options['title'];
	$url = $url_options['url'];
	$button_target = $url_options['target'];
	$button_extra_classes = $attributes['section-button-style'];
	$section_extra_classes = $attributes['section-background-colour'];
	if ( empty( $attributes['heading-text'] ) && empty( $attributes['secondary-text'] ) ) {
		$section_extra_classes = $section_extra_classes . ' remove_padding';
	}

	$output = <<<MULTI

<!-- CTA section -->
<section class="cta-button-section <?php echo $section_extra_classes; ?>">

	<div class="container">

		<div class="row">
			<div class="col-md-12 centered">

				<?php if ($heading_text) : ?>
					<h2><?php echo $heading_text; ?></h2>
				<?php endif; ?>

				<?php if ($heading_text) : ?>
					<p><?php echo $secondary_text; ?></p>
				<?php endif; ?>

				<a class="<?php echo $button_extra_classes; ?>" href="<?php echo $url; ?>" target="<?php echo $button_target; ?>"><?php echo $button_text; ?></a>

			</div>
		</div>

	</div>

</section>
<!-- END CTA button section -->

MULTI;

	return $output;

}