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.
- Element init
- Element Mapping
- 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:
