Create a new visual composer addon
Visual composer is a visual page builder plugin in wordpress. It’s a premium plugin and now almost every premium theme using it to develop attractive, responsive and animated pages. It minimize development and designing curve in wordpress and we can design any kind of page using it. Responsive custom layout, Animated blocks and page specific css are some of it’s features. it comes with many inbuilt addons or you can say visual elements and lots of free and paid plugin are available which add addition visual elements. One of my favorite is Ultimate addons for visual composer. Visual composer addons or elements are basically wordpress shortcode and in this article we will build a simple addon for out practices.
So here is the code, I have commented in the code so you can better understand it. Also you can try that with your function.php and by creating a custom plugin, We are going to try this by creating a custom plugin.
<?php/*
* Plugin Name: Visual Composer Simple Addon
* Plugin URI: http://emericov2
* Description: Simple visual composer addon
* Version: 0.1.1
* Author: Udit Rawat
* Author URI: http://emericov2
* License: GPLv2 or later
*//**
* Class Vc_Simple_Addon
*/
class Vc_Simple_Addon extends WPBakeryShortCode
{
function __construct($settings)
{
// parent constructor call with default parameters
parent::__construct( $settings );// Implement wordpress hooks for our addon
add_action('init', [$this, 'vc_simple_addon_init']);
add_shortcode('vc_infobox', [$this, 'vc_simple_addon_html']);
}/**
* Init and element mapping function
*/
public function vc_simple_addon_init()
{// Return nothing if visual composer is not defined.
if (!defined('WPB_VC_VERSION')) {
return;
}// map block and field with vc_map function
vc_map(
[
'name' => __('VC Simple Addon', 'emerico'),
'base' => 'vc_simple_addon',
'description' => __('Simple addon for vc', 'emerico'),
'category' => __('Content', 'emerico'),
"class" => "",
"controls" => "full",
'icon' => plugins_url('assets/asterisk_yellow.png', __FILE__),
//'admin_enqueue_js' => array(plugins_url('assets/vc_simple_addon_admin.js', __FILE__)), // This will load js file in the VC backend editor
//'admin_enqueue_css' => array(plugins_url('assets/vc_simple_addon_admin.css', __FILE__)), // This will load css file in the VC backend editor
'params' => [
[
'type' => 'textfield',
'holder' => 'h3',
'class' => 'title-class',
'heading' => __('Title', 'emerico'),
'param_name' => 'title',
'value' => __('Default value', 'emerico'),
'description' => __('Box Title', 'emerico'),
'admin_label' => false,
'weight' => 0,
'group' => 'Custom Group',
],
[
'type' => 'textarea',
'holder' => 'div',
'class' => 'text-class',
'heading' => __('Text', 'emerico'),
'param_name' => 'text',
'value' => __('Default value', 'emerico'),
'description' => __('Box Text', 'emerico'),
'admin_label' => false,
'weight' => 0,
'group' => 'Custom Group',
],
],
]
);
}// ShortCode html function
public function vc_simple_addon_html($atts)
{
// Params extraction
extract(
shortcode_atts(
array(
'title' => '',
'text' => '',
),
$atts
)
);// build shorcode html
$html = '
<div class="vc-simple-addon-wrap">
<h2 class="vc-simple-addon-title">' . $title . '</h2>
<div class="vc-simple-addon-text">' . $text . '</div>
</div>';return $html;}
}
new Vc_Simple_Addon(['title'=>'Demo title','text'=>'Demo Text']);
