Create A WPBakery Visual Composer Add-On

If you’ve ever used WPBakery Visual Composer while building a website, so you can build your page builder and add to give your website visitors the experience they need.

The WPBakery add-ons and extensions available on devnote will allow you to add extra features not only for your website visitors but for you in the back end of your site. WPBakery to make it much easier to manage your WordPress website.

Well, this tutorial will explain Create A WPBakery Visual Composer Add-On.

Also read: How To Create Shortcode In WordPress With Example

Step 1: Where To Add Your Code

#your-theme/functions.php
add_action( 'vc_before_init', 'vc_before_init_actions' );
 
function vc_before_init_actions() {
  require_once( get_stylesheet_directory().'/vc_templates/vc_hover_boxs.php' );
}

Step 2: Initialize Your New Element

#your-theme/vc_templates/vc_hover_boxs.php
<?php
/*
Element Description: VC Tabs Box
*/
 
class vcTabBox extends WPBakeryShortCode {
    function __construct()
    {
        vc_lean_map( 'info-box-shortcode', array( 'vcTabBox', 'vc_tooltip_mapping' ) );
        add_shortcode('vc_tooltip', array($this, 'vc_tooltip_html'));
        add_action('wp_enqueue_scripts', array(&$this, 'custom_vc_hover_template'), 999);
    }

    function custom_vc_hover_template(){
        wp_enqueue_style('custom-vc-hover', get_template_directory_uri(). '/vc_templates/css/tool-tip-style.css', array());
    }

    public static function vc_tooltip_mapping() { 

        if (!defined('WPB_VC_VERSION')) {
            return;
        }

        // Map the block with vc_map()
            return array(
                'name' => __('VC Tooltip Box', 'text-domain'),
                'base' => 'vc_tooltip',
                'description' => __('Tooltip Hover Box', 'text-domain'),
                'category' => __('Custom Visual Composer Elements', 'text-domain'),
                'icon' => get_template_directory_uri().'/vc_templates/images/devnote.png',
                'params' => array(
                    array(
                        'type' => 'textfield',
                        'holder' => 'h3',
                        'class' => 'title-class',
                        'heading' => __('Title', 'text-domain'),
                        'param_name' => 'maintitle',
                        'value' => __('', 'text-domain'),
                        'description' => __('Title', 'text-domain'),
                        'admin_label' => false,
                        'weight' => 0,
                        'group' => 'Custom Group',
                    ),
                    array(
                        'type' => 'textfield',
                        'holder' => 'h3',
                        'class' => 'sub-title-class',
                        'heading' => __('Sub Title', 'text-domain'),
                        'param_name' => 'subtitle',
                        'value' => __('', 'text-domain'),
                        'description' => __('Sub Title', 'text-domain'),
                        'admin_label' => false,
                        'weight' => 0,
                        'group' => 'Custom Group',
                    ),
                    array(
                        'type' => 'textarea_html',
                        'holder' => 'div',
                        'class' => 'text-class',
                        'heading' => __('Tooltip Hover Description', 'text-domain'),
                        'param_name' => 'content',
                        'value' => __('', 'text-domain'),
                        'description' => __('Content Hover Description', 'text-domain'),
                        'admin_label' => false,
                        'weight' => 0,
                        'group' => 'Custom Group',
                    ),
                    array(
                        'type' => 'textfield',
                        'heading' => __( 'Extra class name', 'js_composer' ),
                        'param_name' => 'el_class',
                        'description' => __( 'Style particular content element differently - add a class name and refer to it in custom CSS.', 'js_composer' ),
                    ),
                ),
            );
    }
     
    public function vc_tooltip_html( $atts, $content = null) {

        extract(
            shortcode_atts(
                array(
                    'maintitle'   => '',
                    'subtitle'   => '',
                    'el_class'   => '',
                ), 
                $atts
            )
        );
        $content = wpb_js_remove_wpautop($content, true);

        $html = '<div class ="hover" onclick="void(0)">
            <div class="vc-infobox-wrap ">         
                <h4 class="vc-infobox-title" style="text-align: center;text-transform: uppercase;">' . $maintitle . '</h4>
                    <div class="vc-infobox-text tooltip-new arrow_box '.$el_class.'">' . do_shortcode($content) . '</div>           
            </div>
        </div>';

        return $html;
    }
     
} ?>

<?php  
new vcTabBox();

Step 3: Styling Our New Add-On

#your-theme/vc_templates/css/tool-tip-style.css
.hover {
    position:relative;
}

.hover:hover .arrow_box,.hover:active .arrow_box  {
    display: block;
}

.first_box{
	width: 1141px ;

}
.first_box:before{
	left:16% !important;
	bottom: 100%;
}
.second_box{
	width: 1141px ;
	transform: translateX(-50%) !important;
	-webkit-transform: translateX(-50%);
	left: 50% !important;
}
.second_box:before{
	left:50% !important;
	bottom: 100%;
}
.third_box{
	width: 1141px ;
	right:0;
}
.third_box:before{
	right:14% !important;
	bottom: 100%;
}
@media(max-width:767px){
	.first_box:before{
		left:50% !important;
	}
	.first_box,.third_box{
		transform: translateX(-50%) !important;
		-webkit-transform: translateX(-50%);
		left: 50% !important;
	}
	.third_box:before{
		left:50% !important;
	}
}
@media (max-width:1218px){
	.arrow_box {
		margin-top: 101px !important;
	}
	.first_box{
		width: 100% ;

	}
	.second_box{
		width: 100% ;
		margin-left: 0px;

	}
	.third_box{
		width: 100% ;

	}
}
.hover .tooltip-new {
	top:-10px;
	background-color: #FFF;
	color:#333333;
	border-radius:5px;
	opacity:0;
	position:absolute;
	-webkit-transition: opacity 0.5s;
	-moz-transition:  opacity 0.5s;
	-ms-transition: opacity 0.5s;
	-o-transition:  opacity 0.5s;
	transition:  opacity 0.5s;
	text-transform: inherit;
	box-shadow: 0 0 20px #e2e2e2;
	font-size: 18px;
}

.hover:hover .tooltip-new, .hover:active .tooltip-new {
    opacity:1;
}
.arrow_box {
	margin-top: 112px;
	background: #fff;
	/*border: 1px solid #d9d9d9;*/
	box-shadow: 0px 0px 13px 0px rgba(100, 100, 100, 0.57);
	-moz-box-shadow: 0px 0px 13px 0px rgba(100, 100, 100, 0.57);
	-webkit-box-shadow: 0px 0px 13px 0px rgba(100, 100, 100, 0.57);
	padding: 15px 15px;
	width:100%;
	height: auto;
	display:none;
	font-family: Merriweather, serif;
}
.arrow_box h1,h2,h3,h5,p,strong{
	font-family: Merriweather, serif;

}
.arrow_box p{
	font-size: 18px;
    line-height: 2;
    padding: 20px;
}
.arrow_box h1{
	font-size: 2.5em;

}
.arrow_box:before {


	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}


.arrow_box:before {
	border-color: rgba(194, 225, 245, 0);
	border-bottom-color: #fff;
	border-width: 20px;
	margin-left: -20px;
}
.text_white{
	color:#FFF;
}
.text_black{
	color:#333333;
}
@media(max-width:1024px){
	.hover .vc-infobox-wrap h4{
		cursor: pointer;
	}
}

.custom-main-hover-box:hover .arrow_box{
	display: block;
}
.custom-main-hover-box .vc_column-inner:hover .arrow_box{
	z-index: 999;
}

Step 4: add-on image display add

Also read: How to create a year shortcode in the WordPress footer

your-theme/vc_templates/images/devnote.png

See screenshot: