How to create Visual Composer element ?

Now Visual Composer number one Premium page Building plugin for WordPress , This plugin easy to use any component or feature for building page without any coding knowledge . sometime WordPress theme developer need to integrate shortcode so his client can manage website easily .  so today i will show you how to integrate shortcode with visual composer .
how-to-create-visual-composer-element
First step is we have to create to shortcode,

add_shortcode( 'bartag', 'bartag_func' );
function bartag_func( $atts ) {
   extract( shortcode_atts( array(
      'foo' => 'something'
   ), $atts ) );
  
   return "foo = {$foo}";
}

so now we will create function for Visual Composer element

add_action( 'vc_before_init', 'your_name_integrateWithVC' );
function your_name_integrateWithVC() { }

now we will vc_map() function

  vc_map( array(
      "name" => __( "Bar tag test", "my-text-domain" ),
      "base" => "bartag",
      "class" => "",
      "category" => __( "Content", "my-text-domain"),
      "params" => array(
         array(
            "type" => "textfield",
            "holder" => "div",
            "class" => "",
            "heading" => __( "Text", "my-text-domain" ),
            "param_name" => "foo",
            "value" => __( "Default param value", "my-text-domain" ),
            "description" => __( "Description for foo param.", "my-text-domain" )
         )
      )
   ) );

name : name of element,
base : your shortcode ,
category: element category in visual composer .
param : here you will add your shortcode option with shortcode parameter name . please see details vc_map()

So what now ?

now you have to add full code into theme functions.php

add_shortcode( 'bartag', 'bartag_func' );
function bartag_func( $atts ) {
   extract( shortcode_atts( array(
      'foo' => 'something'
   ), $atts ) );
  
   return "foo = {$foo}";
}

add_action( 'vc_before_init', 'your_name_integrateWithVC' );
function your_name_integrateWithVC() {
   vc_map( array(
      "name" => __( "Bar tag test", "my-text-domain" ),
      "base" => "bartag",
      "class" => "",
      "category" => __( "Content", "my-text-domain"),
      "params" => array(
         array(
            "type" => "textfield",
            "holder" => "div",
            "class" => "",
            "heading" => __( "Text", "my-text-domain" ),
            "param_name" => "foo",
            "value" => __( "Default param value", "my-text-domain" ),
            "description" => __( "Description for foo param.", "my-text-domain" )
         )
      )
   ) );
}

please let me know if you have any question

Leave a Reply

Your email address will not be published. Required fields are marked *