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.
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:
In this article, we have to show Create and Used PIPE in angular
In this article, we have to show Create and Used PIPE in angular
In this article, we have to show Create and Used PIPE in angular