Visual Composer custom elements – WPBakery

On this tutorial we will create a WPBakery Visual Composer custom elements

1. Go to your theme folder and create a folder named ‘vc-elements’

2. Open functions.php of your current active theme and add the following code:

/**
 * Visual Composer custom elements.
 */
function vc_before_init_actions() {
  // Stop if Visual Composer is not enabled.
  if ( ! defined( 'WPB_VC_VERSION' ) ) {
    return;
  }

  // Visual Composer custom elements list.
  require_once( get_template_directory() . '/vc-elements/infobox.php' );
}
add_action( 'init', 'vc_before_init_actions' );

Note: for this custom element sample we will create an infobox with title and textarea field.

3. Create new file ‘infobox.php’ inside ‘vc-elements’ folder

4. We need to extend the WPBakeryShortCode inside infobox.php and paste the following code below:

<?php 
/**
 * Class to load for this map. 
 */ 
class VC_Custom_InfoBox extends WPBakeryShortCode {

    /**
     * Shortcode display. 
     */ 
    protected function content( $atts, $content = null ) { 
        // Variables. 
        $display = ''; 
        $attr = array();

        extract( 
            shortcode_atts( 
                array( 
                  'title'   => '',
                  'content' => ''
            ), $atts ) 
        );

        // Display html.
        $display .= '<div class="infobox__wrapper">';
            $display .= '<h3 class="infobox__title">' . $title . '</h3>';
            $display .= '<p class="infobox__content">' . $content . '</p>';
        $display .= '</div>';

        return $display;
    }
}

/**
 * VC Map elements.
 */
vc_map( array(
	'base'     => 'vc_custom_infobox',
	'name'     => esc_html__( 'Info Box', 'text-domain' ),
	'description' => 'Display custom infobox',
	'class'    => '',
	'category' => esc_html__( 'Visual Composer Custom Elements', 'text-domain' ),
	'params'   => array(
		array(
			'type'        => 'textfield',
			'heading'     => esc_html__( 'Title', 'text-domain' ),
			'param_name'  => 'title',
			'value'       => ''
		),
		array(
			'type'        => 'textarea',
			'heading'     => esc_html__( 'Content', 'text-domain' ),
			'param_name'  => 'content',
			'value'       => ''
		)
	)
) );

Voila! the new custom elements we have created now available as VC elements.

Note: For more reference about vc_map(), go to: VC Map Inner API