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

Web Developer specializing in WordPress to develop custom themes, plugins, troubleshooting technical issues and ensuring websites are optimized for search engines and meet accessibility standards. Currently working as Lead Developer at XeCreators.

2 thoughts on “WPBakery Page Builder vc_map Examples

Leave a Reply

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


The reCAPTCHA verification period has expired. Please reload the page.