WPBakery Page Builder may be still a best page builder plugin for WordPress which allows you to make stunning website content with simple drag and drop. With WPBakery Page Builder you’ll create and manage your WordPress content in minutes. To feature your shortcode to the WPBakery Page Builder content elements list, vc_map() function should be called with an array of special attributes describing your shortcode. In this post we are going to look at WPBakery Page Builder (Formerly Visual Composer) vc_map examples. You can also check WPBakery Page Builder documentation but it lacks few things. If you don’t know how to use these codes you can check how to create WPBakery Page Builder element.
textarea_html:
array(
"type" => "textarea_html",
"class" => "",
"heading" => __( "Field Label", "my-text-domain" ),
"param_name" => "field_name",
"value" => '',
"description" => __( "Enter description.", "my-text-domain" )
)
textfield:
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:
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:
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" ),
"std" => "option1value"
)
attach_image:
array(
"type" => "attach_image",
"class" => "",
"heading" => __( "Field Label", "my-text-domain" ),
"param_name" => "field_name",
"value" => '',
"description" => __( "Enter description.", "my-text-domain" )
)
attach_images:
array(
"type" => "attach_images",
"class" => "",
"heading" => __( "Field Label", "my-text-domain" ),
"param_name" => "field_name",
"value" => '',
"description" => __( "Enter description.", "my-text-domain" )
)
posttypes:
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:
array(
"type" => "colorpicker",
"class" => "",
"heading" => __( "Field Label", "my-text-domain" ),
"param_name" => "field_name",
"value" => '',
"description" => __( "Enter description.", "my-text-domain" )
)
exploded_textarea:
array(
"type" => "exploded_textarea",
"class" => "",
"heading" => __( "Field Label", "my-text-domain" ),
"param_name" => "field_name",
"value" => '',
"description" => __( "Enter description.", "my-text-domain" )
)
widgetised_sidebars:
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:
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:
array(
"type" => "vc_link",
"class" => "",
"heading" => __( "Field Label", "my-text-domain" ),
"param_name" => "field_name",
"value" => '',
"description" => __( "Enter description.", "my-text-domain" )
)
checkbox:
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:
array(
"type" => "loop",
"class" => "",
"heading" => __( "Field Label", "my-text-domain" ),
"param_name" => "field_name",
"value" => '',
"description" => __( "Enter description.", "my-text-domain" )
)
css:
array(
"type" => "css",
"class" => "",
"heading" => __( "Field Label", "my-text-domain" ),
"param_name" => "field_name",
"value" => '',
"description" => __( "Enter description.", "my-text-domain" )
)
iconpicker:
array(
'type' => 'iconpicker',
'heading' => __( 'Icon', 'my-text-domain' ),
'param_name' => 'icon_openiconic',
'settings' => array(
'emptyIcon' => false,
'type' => 'openiconic',
'iconsPerPage' => 200,
),
'dependency' => array(
'element' => 'icon_type',
'value' => 'openiconic',
),
'description' => __( 'Select icon from library.', 'my-text-domain' ),
),
css_editor:
array(
'type' => 'css_editor',
'heading' => __( 'CSS', 'my-text-domain' ),
'param_name' => 'field_name',
'group' => __( 'Design Options', 'my-text-domain' ),
);
param_group:
array(
'type' => 'param_group',
'value' => '',
'param_name' => 'group_name',
'params' => array(
array(
'type' => 'textfield',
'value' => '',
'heading' => __('Title', 'my-text-domain'),
'param_name' => 'field_name',
)
)
),
And how about “param_group” or “iconpicker” fields?
Thank you Alexander, I have added “param_group”, “iconpicker” and “css_editor” to the post.