Visual Composer: vc_map field examples

There's a few things missing to the documentation for Visual composer, like samples of how to use each field type. Some of these are probably pretty intuitive, but we figured we'd make some example for each as more of a library of snippets to pick for the vc_map function. Sometimes just an example of something that works for a type is all you need to feel more confident — Enjoy! [VC Documentation]

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/textarea
Simple input / textarea field

array(
"type" => "textfield",
"class" => "",
"heading" => __( "Field Label", "my-text-domain" ),
"param_name" => "field_name",
"value" => __( "", "my-text-domain" ),
"description" => __( "Enter description.", "my-text-domain" )
)
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 set of available options. Array containing the drop down 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 / attach_images
Single image selection/Multiple images selection

array(
"type" => "attach_image",
"class" => "",
"heading" => __( "Field Label", "my-text-domain" ),
"param_name" => "field_name",
"value" => '',
"description" => __( "Enter description.", "my-text-domain" )
)
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 to construct 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" )
)


... attribute types can be extended with new custom types.
Create Your Own