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 uses it to develop attractive, responsive, and animated pages. It minimizes the 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 its features. it comes with many inbuilt addons or you can say visual elements and lots of free and paid plugins are available that add additional visual elements. One of my favorites is Ultimate addons for visual composer. Visual composer add-ons or elements are basically WordPress shortcodes and in this article, we will build a simple addon for our practices.

So here is the code, I have commented on 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 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']);