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: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:
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 ). '"> </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.