How can I use custom widget in Visual Composer or conversion it to Visual Composer Element?

Solution:1

http://www.wpelixir.com/how-to-create-new-element-in-visual-composer/ Here is the URL for add the new block of custom code into visual composer block area, this will help you for creating a new element.

Solution:2

Adding new content elements to Visual Composer comes about when a shortcodes file is present in your theme or theme add-on, like in our case, so first we need to check with the function whether our ninzio-addons plugin is installed and active:

1
2
3
if (defined( 'NINZIO_ADDONS' ) && file_exists( get_template_directory() . '/plugins/ninzio-addons.zip' ) ) {
    new elements code goes here...
}

How does Visual Composer understand that new elements have been added? With add_action();.

1
2
3
add_action( 'init', 'focuson_ninzio_integrateVC');
function focuson_ninzio_integrateVC() {... new elements}

We will use the action init, giving us this:

1
2
3
4
5
6
7
if (defined( 'NINZIO_ADDONS' ) && file_exists( get_template_directory() . '/plugins/ninzio-addons.zip' ) ) {
    add_action( 'init', 'focuson_ninzio_integrateVC');
    function focuson_ninzio_integrateVC() {... new elements}
}

Now we are ready to add our new elements, for which we need another new function:

vc_map();

This function requires one parameter: an array of special attributes describing your shortcode. As an example we will add a custom separator element:

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
<?php
/*  SEPARATOR            (CONTENT)
/*-------------------------------*/
    vc_map(array(
        'name'                    => "Separator",
        'base'                    => "nz_sep",
        'class'                   => 'nz-sep',
        'show_settings_on_create' => false,
        'category'                => esc_html__("Ninzio",'focuson'),
        'icon'                    => 'icon-separator',
        'description'             => 'Use this element to separate content',
        'js_view'                 => '',
        'params'                  => array(
            
            ...

That’s a lot of attributes! Let’s highlight the most important:

  • name gives a unique descriptive name to your custom element. Users will see it in the Visual Composer tab.
  • base, no less important than name, is the shortcode tag name. If you are familiar with custom shortcode creation, you’ll know that all custom shortcodes have tags. For example, our custom separator has a nz_sep tag. The element base should be unique and it should be named exactly as the shortcode name is in your shortcodes.php file (like we have in our Focuson theme):
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<?php
/*  SEPARATOR SHORTCODE
/*===================*/
    
    function nz_sep($atts, $content = null) {
        extract(shortcode_atts(
            array(
                'top'    => '20',
                'bottom' => '20',
                'type'   => 'solid',
                'color'  => '#eeeeee',
                'align'  => 'left',
                'width'  => '',
                'height' => ''
            ), $atts)
        );
        $styles = "";
        if (isset($color) && !empty($color)) {
            $styles .= 'border-bottom-color:'.$color.';';
        }
        if (isset($width) && !empty($width)) {
            $styles .= 'width:'.absint($width).'px;';
        } else {
            $styles .= 'width:100%;';
        }
        if (isset($height) && !empty($height)) {
            $styles .= 'border-bottom-width:'.absint($height).'px;';
        }
        if (isset($type) && !empty($type)) {
            $styles .= 'border-bottom-style:'.$type.';';
        }
        if (isset($top) && !empty($top)) {
            $styles .= 'margin-top:'.absint($top).'px;';
        }
        if (isset($bottom) && !empty($bottom)) {
            $styles .= 'margin-bottom:'.absint($bottom).'px;';
        }
        $output = '<div class="sep-wrap '.sanitize_html_class($align).' nz-clearfix"><div class="nz-separator '.sanitize_html_class($type).'" style="'.esc_attr($styles).'">&nbsp;</div></div>';
        return $output;
    }
    add_shortcode('nz_sep', 'nz_sep');
?>
  • class is not critical, but an important option, serving as a non-unique identifier. The naming should be descriptive and without spaces, use dashes or underscores.
  • show_settings_on_create is a boolean parameter and self-descriptive.
  • category is very important. If you want to group your custom elements within one custom menu tab in the Visual Composer elements menu, you should add a custom category. If you want to include elements in an existing category use the name of that existing menu tab:

 

  • icon is similar to class. We add an icon name so we can style the shortcode in the Visual Composer menu. For example:
1
i.icon-separator,.nz-sep .vc_element-icon {background-image:url(../images/shortcodes/sep.png)!important;}
  • description adds a small description to your custom element. Users will see this.
  • js_view is a very important parameter. When you have elements which comprise parent and child components (for example content boxes, which have a main container parent and child box elements, where parent and child elements have separate attributes) this attribute should have the value VcColumnView. We will examine the more complex details in a moment.
  • params is the array of parameters to be added to your custom element. It behaves similarly to the vc_add_params() function, but nested in the vc_map() function.