May 22, 2018

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',
        )
    )
)

Muhammad Zohaib

I’m a web developer and the founder of XeCreators, an award-winning digital solutions company established in 2013. With over 9 years of experience, I specialize in building custom WordPress-based systems, including POS solutions, hospital management systems, and API integrations. My focus is on creating scalable and practical solutions that help businesses grow efficiently.

2 thoughts on “WPBakery Page Builder vc_map Examples”

Leave a Reply

Your email address will not be published. Required fields are marked *

For security, use of Google's reCAPTCHA service is required which is subject to the Google Privacy Policy and Terms of Use.