WPBakery Page Builder (formerly Visual Composer) – vc_map() field examples

I’ve been working with WPBakery Page Builder (formerly Visual Composer) for about one year now, and one of the most significant issues I had was to understand how each field type works. The documentation is lacking. To combat this, I had a file that was just examples of how to use and create those fields. When I don’t remember how to do something, I quickly open the file and find what parameters a field takes. Hopefully, this will help you as much as it helps me.

textarea_html
Text area with default WordPress WYSIWYG Editor. Important: only one html_textarea is permitted per shortcode and it should have “content” as a param_name

array(
  "type" => "textarea_html",
  "class" => "",
  "heading" => __( "Field Label", "my-text-domain" ),
  "param_name" => "field_name",
  "value" => "",
  "description" => __( "Enter description.", "my-text-domain" )
)

textfield
Simple Input

array(
  "type" => "textfield",
  "class" => "",
  "heading" => __( "Field Label", "my-text-domain" ),
  "param_name" => "field_name",
  "value" => __( "", "my-text-domain" ),
  "description" => __( "Enter description.", "my-text-domain" )
)

textarea
Simple textarea field

array(
  "type" => "textarea",
  "class" => "",
  "heading" => __( "Field Label", "my-text-domain" ),
  "param_name" => "field_name",
  "value" => __( "", "my-text-domain" ),
  "description" => __( "Enter description.", "my-text-domain" )
)

dropdown
Dropdown input field with a set of available options. An array containing the dropdown values (either should be a normal array or an associative array)

array(
  'type' => 'dropdown',
  'heading' => __( 'Field Label',  "my-text-domain" ),
  'param_name' => 'field_name',
  'value' => array(
    __( 'Option 1 Label',  "my-text-domain"  ) => 'option1value',
    __( 'Option 2 Label',  "my-text-domain"  ) => 'option2value',
    __( 'Option 3 Label',  "my-text-domain"  ) => 'option3value',
  ),
  "description" => __( "Enter description.", "my-text-domain" )
)

attach_image
Single image selection

array(
  "type" => "attach_image",
  "class" => "",
  "heading" => __( "Field Label", "my-text-domain" ),
  "param_name" => "field_name",
  "value" => '',
  "description" => __( "Enter description.", "my-text-domain" )
)

attach_images
Multiple images selection

array(
  "type" => "attach_images",
  "class" => "",
  "heading" => __( "Field Label", "my-text-domain" ),
  "param_name" => "field_name",
  "value" => '',
  "description" => __( "Enter description.", "my-text-domain" )
)

posttypes
Checkboxes with available post types (automatically finds all post types)

array(
  "type" => "posttypes",
  "class" => "",
  "heading" => __( "Field Label", "my-text-domain" ),
  "param_name" => "field_name",
  "value" => __( "", "my-text-domain" ),
  "description" => __( "Enter description.", "my-text-domain" )
)

colorpicker
Color picker

array(
  "type" => "colorpicker",
  "class" => "",
  "heading" => __( "Field Label", "my-text-domain" ),
  "param_name" => "field_name",
  "value" => '', 
  "description" => __( "Enter description.", "my-text-domain" )
)

exploded_textarea
Text area, where each line will be imploded with comma (,)

array(
  "type" => "exploded_textarea",
  "class" => "",
  "heading" => __( "Field Label", "my-text-domain" ),
  "param_name" => "field_name",
  "value" => '', 
  "description" => __( "Enter description.", "my-text-domain" )
)

widgetised_sidebars
Dropdown element with set of available widget regions, that are registered in the active wp theme

array(
  "type" => "widgetised_sidebars",
  "class" => "",
  "heading" => __( "Field Label", "my-text-domain" ),
  "param_name" => "field_name",
  "value" => '', 
  "description" => __( "Enter description.", "my-text-domain" )
)

textarea_raw_html
Text area, its content will be coded into base64 (this allows you to store raw js or raw html code)

array(
  "type" => "textarea_raw_html",
  "class" => "",
  "heading" => __( "Field Label", "my-text-domain" ),
  "param_name" => "field_name",
  "value" => '', 
  "description" => __( "Enter description.", "my-text-domain" )
)

vc_link
Link selection. Then in shortcodes html output, use $href = vc_build_link( $href ); to parse link attribute

array(
  "type" => "vc_link",
  "class" => "",
  "heading" => __( "Field Label", "my-text-domain" ),
  "param_name" => "field_name",
  "value" => '', 
  "description" => __( "Enter description.", "my-text-domain" )
)

checkbox
Creates checkboxes, can have 1 or multiple checkboxes within one attribute

array(
  "type" => "checkbox",
  "class" => "",
  "heading" => __( "Field Label", "my-text-domain" ),
  "param_name" => "field_name",
  "value" => __( "", "my-text-domain" ),
  "description" => __( "Enter description.", "my-text-domain" )
)

loop
Loop builder. Lets your users construct a loop which can later be used during the shortcode’s output

array(
  "type" => "loop",
  "class" => "",
  "heading" => __( "Field Label", "my-text-domain" ),
  "param_name" => "field_name",
  "value" => '', 
  "description" => __( "Enter description.", "my-text-domain" )
)

css
Basic CSS style editor for your content element. Check “Add “Design Options” Tab with CSS Editor to Your Element” page for more details

array(
  "type" => "css",
  "class" => "",
  "heading" => __( "Field Label", "my-text-domain" ),
  "param_name" => "field_name",
  "value" => '', 
  "description" => __( "Enter description.", "my-text-domain" )
)