Visual Composer custom options

Question

Wonder, how can I add a new option for "Design Options" group in Visual Composer. In my case I need to add container element width.

Thanks in advance

Answer 1

I am not sure if you can globally set a custom option for all elements but if you are building a custom element you can do something like this:

vc_map( array(
      "name" => __( "Custom Element Name", "my-text-domain" ),
      "base" => "custom_element",
      "params" => array(
        array(
            'type' => 'textfield',
            'heading' => __( 'Container Element Width', 'my-text-domain' ),
            'param_name' => 'container_element_width',
            'group' => __( 'Design options', 'my-text-domain' ),
        ),
      ),
   ) );

then you can use the parameter in your output.

Answer 2

You can use vc_add_param():

https://wpbakery.atlassian.net/wiki/spaces/VC/pages/524335/vc+add+param

and determine the group as "Design Options" such as:

$attributes = array(
 'type' => 'textfield',
 'heading' => __( 'My Field', 'lang_domain' ),
 'description' => __( 'Description here."', 'lang_domain' ),
 'param_name' => 'my_field',
 'group' => __( 'Design Options', 'lang_domain' ),
 'admin_label' => true,
);

You can add this line below for any element you want:

vc_add_param( 'vc_element_1', $attributes );
vc_add_param( 'vc_element_2', $attributes );
etc...

Then you copy the elements you want to add the field to from the following folder:

js_composer/include/templates/shortcodes/vc_element_1.php
etc...

and put it in a folder in your theme or plugin. You can edit these files anyway you like and add your new field as a variable maybe write an inline css etc:

echo '<div style="my_field: '.$my_field.';">';

or

echo '<div style="my_field: '.$atts['my_field"].';">';

Then you need to set this folder to let VC know and read this shortcode with vc_set_shortcodes_templates_dir():

https://wpbakery.atlassian.net/wiki/spaces/VC/pages/524294/vc+set+shortcodes+templates+dir