How To Create VC Element

In this tutorial, I am going to show you How to create a custom VC Element.
You can do your custom code in your theme’s function file also but I recommend creating a separate file.
First of all, you need to create a “VC-elements” folder in your active theme’s root. And I have created a “custom_vc_element.php” file for a tutorial.
You need to include this file in the functions.php file. For that, you need to add the following code.

if ( function_exists('is_plugin_active') && is_plugin_active( 'js_composer/js_composer.php' ) ) { 
  require_once( get_template_directory() .'/vc-elements/custom_vc_element.php' ); 
}

For creating the VC Element there is 3 main part of the code.

  1. Element init
  2. Element Mapping
  3. Shortcode HTML

You need to add class which extends  “WPBakeryShortCode” in that I have created create function __construct() inside the class element. “vc_custombtn_mapping‘” for mapping function and “vc_custombtn_html” for HTML Function.

class vcCustomButton extends WPBakeryShortCode {
    function __construct() {
        add_action( 'init', array( $this, 'vc_custombtn_mapping' ) );
        add_shortcode( 'vc_custombtn', array( $this, 'vc_custombtn_html' ) );
    }
}

After the initialization of that function, you need to do the mapping of parameters. For that, you should use vc_map. Refer to the following Structure.

public function vc_custombtn_mapping() {
  vc_map(
    array(
      'name' 			=> __( 'VC Custom Button', 'text-domain' ),
      'base' 			=> 'vc_custombtn',
      'description' 	=> __( 'Another simple VC CUstom Button', 'text-domain' ), 
      'category' 		=> __( 'My Custom Elements', 'text-domain' ),   
      'icon' 			=> '',            
      'params' 		=> array( )
    ),
  )
}

name: Name of your Custom Element
base: Parameter Value.
description: Description of your Element
category: Name of your TAB.
icon: Icon of your element.
params: In that array, you can add the array of an array for an unlimited parameter.

For HTML structure you need to refer to the following structure.

public function vc_custombtn_html( $atts ) { 
  extract( 
    shortcode_atts( 
      array(), 
      $atts 
    ) 
  ); 
  $html = ' 
  <div class="vc-custom-button-wrap"> 
  </div>';
}

Here I have created Custom Button in VC Element. Here I have attached the custom code for that. Kindly refer to this code,

<?php
/*
Element Description: VC Custom Button
*/
class vcCustomButton extends WPBakeryShortCode {
    function __construct() {
        add_action( 'init', array( $this, 'vc_custombtn_mapping' ) );
        add_shortcode( 'vc_custombtn', array( $this, 'vc_custombtn_html' ) );
    }
    public function vc_custombtn_mapping() {
    vc_map( 
      array(
        'name' 			=> __( 'VC Custom Button', 'text-domain' ),
        'base' 			=> 'vc_custombtn',
        'description' 	=> __( 'Another simple VC CUstom Button', 'text-domain' ), 
        'category' 		=> __( 'My Custom Elements', 'text-domain' ),   
        'icon' 			=> '',            
        'params' 		=> array	(   
          array(
            'type' 			=> 'textfield',
            'holder' 		=> 'h3',
            'heading' 		=> esc_html__( 'Text', 'text-domain' ),
            'param_name' 	=> 'text',
            'value' 		=> 'READ MORE',
          ),
          array(
            'type'       	=> 'dropdown',
            'heading'    	=> esc_html__( 'Button Size', 'text-domain' ),
            'param_name' 	=> 'btn_size',
            'value'      	=> array(
              'Default' 	=> '',
              'Small' 	=> 'small',
              'Large' 	=> 'large',
            ),
          ),
          array(
            'type' 			=> 'textfield',
            'heading' 		=> esc_html__( 'Padding', 'text-domain' ),
            'param_name' 	=> 'padding',
            'value' 		=> '',
            'description'	=> esc_html__( 'Top Right Bottom Left. Ex: 13px 40px 13px 40px', 'text-domain' ),
            'dependency' 	=> array( 'element' => 'style', 'value' => 'custom' ),
          ),  
          array(
            'type' 			=> 'colorpicker',
            'heading' 		=> esc_html__( 'Background Color', 'text-domain' ),
            'param_name' 	=> 'background_color',
            'value' 		=> '',
            'dependency' 	=> array( 'element' => 'style', 'value' => 'custom' ),
          ),
          array(
            'type' 			=> 'colorpicker',
            'heading' 		=> esc_html__('Border Color', 'text-domain'),
            'param_name' 	=> 'border_color',
            'value' 		=> '',
            'dependency' 	=> array( 'element' => 'style', 'value' => 'custom' ),
          ),
          array(
            'type' 			=> 'colorpicker',
            'heading' 		=> esc_html__( 'Text Color', 'text-domain' ),
            'param_name' 	=> 'text_color',
            'value' 		=> '',
            'dependency' 	=> array( 'element' => 'style', 'value' => 'custom' ),
          ),    
          array(
            'type' 			=> 'textfield',
            'heading' 		=> esc_html__( 'Border Width', 'text-domain' ),
            'param_name' 	=> 'border_width',
            'value' 		=> '',
            'description'	=> esc_html__( 'Default: 2px', 'text-domain' ),
          ),
          array(
            'type' 			=> 'textfield',
            'heading' 		=> esc_html__( 'Border Radius', 'text-domain' ),
            'param_name' 	=> 'border_radius',
            'value' 		=> '',
            'description'	=> esc_html__( 'Default: 10px', 'text-domain' ),
          ),
          array(
            'type'      	=> 'dropdown',
            'heading'    	=> esc_html__( 'Border Style', 'text-domain' ),
            'param_name' 	=> 'border_style',
            'value'      	=> array(
              'Solid' 	=> 'solid',
              'Dotted' 	=> 'dotted',
              'Dashed' 	=> 'dashed',
              'Double' 	=> 'double',
            ),
          ),
          array(
            'type' 			=> 'textfield',
            'holder' 		=> 'p',
            'heading' 		=> esc_html__( 'class', 'text-domain' ),
            'param_name' 	=> 'class_name',
            'value' 		=> '',
            'description'	=> esc_html__( 'Enter Your Custom Class Name', 'text-domain' ),
          ),
          array(
            'type' 			=> 'textfield',
            'holder' 		=> 'p',
            'heading' 		=> esc_html__( 'id', 'text-domain' ),
            'param_name' 	=> 'id_name',
            'value' 		=> '',
            'description'	=> esc_html__( 'Enter Your Custom Id', 'text-domain' ),
          ),
          array(
            'type' 			=> 'vc_link',
            'heading' 		=> esc_html__( 'Link (URL):', 'text-domain' ),
            'param_name' 	=> 'link_url',
            'value' 		=> '',
            'admin_lael'	=> true,
            'group' 		=> esc_html__( 'Hyperlink', 'text-domain' ),
          ),
          array(
            'type' 			=> 'textfield',
            'heading' 		=> esc_html__('Font Size', 'text-domain'),
            'param_name' 	=> 'font_size',
            'value' 		=> '',
            'group' 		=> esc_html__( 'Typography', 'text-domain' ),
          ),
          array(
            'type'      	=> 'dropdown',
            'heading'    	=> esc_html__( 'Text Transform', 'text-domain' ),
            'param_name' 	=> 'text_transform',
            'value'      	=> array(
              'Uppercase' 	=> 'uppercase',
              'Lowercase' 	=> 'lowercase',
              'Capitalize' 	=> 'capitalize',
            ),
            'group' 		=> esc_html__( 'Typography', 'text-domain' ),
          ),
          array(
            'type' 			=> 'textfield',
            'heading'		=> esc_html__( 'Line-Height', 'text-domain' ),
            'param_name' 	=> 'line_height',
            'value' 		=> '',
            'group' 		=> esc_html__( 'Typography', 'text-domain' ),
          ),
        )
      )
    );                    
  } 
    public function vc_custombtn_html( $atts ) {
    extract(
      shortcode_atts(
        array(
          'text' 				=> 'READ MORE',
          'background_color'  => '#ffffff',
          'border_color'   	=> '#000000',
          'text_color'   		=> '#000000',
          'border_width'   	=> '2px',
          'border_style'   	=> 'solid',
          'link_url'   		=> '',
          'font_size'   		=> '14px',
          'line_height'   	=> '1.8',
          'text_transform'   	=> 'uppercase',
          'btn_size'   		=> '',
          'padding'   		=> '10px',
          'border_radius'   	=> '10px',
          'class_name'		=> '',
          'id_name'			=> '',
        ), 
        $atts
      )
    );
    $url_var = vc_build_link( $link_url );
    $url = $url_var['url'];
    $target = $url_var['target'];
    $title 	= $url_var['title'];
    $rel 	= $url_var['rel'];
    $custom_id = 'custom_wrap_' . rand( 1,100 );
    $html = '
    <div id="'.$custom_id.'" class="vc-custom-button-wrap">
      <div id="'.$id_name.'" class="vc-custom-btn '.$class_name.'"> <a href="'.$url.'" target= "'.$target.'"title="'.$title.'" class="'.$btn_size.'">' . $text . '</a></div>
    </div>';
    ?>
    <style>
    #<?php echo $custom_id; ?>.vc-custom-button-wrap .vc-custom-btn a {
      display: inline-block;
      color : <?php echo $text_color; ?>;
      font-size : <?php echo $font_size; ?>;
      line-height: <?php echo $line_height; ?>;
      border: <?php echo $border_width.' '.$border_style.' '.$border_color; ?>;
      border-radius: <?php echo $border_radius; ?>;
      background-color: <?php echo $background_color; ?>;
      text-transform: <?php echo $text_transform; ?>;
      padding: <?php echo $padding; ?>;
    }
    .vc-custom-btn .small {
        padding: 0px 5px;
    }
    .vc-custom-btn .large {
        padding: 15px 20px;
    }
    </style>   
    <?php return $html;
    } 
}
new vcCustomButton();

Output:

Submit a Comment

Your email address will not be published. Required fields are marked *

Footer Logo

Subscribe

Select Categories