Visual Composer WordPress
April 30, 2020

How to Create Custom Elements Using Visual Composer API

When we are making site with visual composer some time not possible to built some designs using visual composer elements. So at that time we need to use HTML element for built designs. But visual composer API provide facility to built own custom element for some special requirements and its very easy. We can built custom element using vc_before_init action. Add below code in theme’s function.php file.

Now we should create shortcode for base wc_my_custom_element. So we will create shortcode for wc_my_custom_element. It will look like below.

For that we need to add our shortcode to WPBakery Page Builder content elements list, vc_map() function should be called with an array of special attributes describing your shortcode.


$params Associative array which holds instructions for WPBakery Page Builder and is used in “mapping” process.

Param name
name String Name of your shortcode for human reading inside element list
base String Shortcode tag. For [my_shortcode] shortcode base is my_shortcode
description String Short description of your element, it will be visible in “Add element” window
class String CSS class which will be added to the shortcode’s content element in the page edit screen in WPBakery Page Builder backend edit mode
show_settings_on_create Boolean Set it to false if content element’s settings page shouldn’t open automatically after adding it to the stage
weight Integer Content elements with greater weight will be rendered first in “Content Elements” grid (Available from WPBakery Page Builder 3.7 version)
category String Category which best suites to describe the functionality of this shortcode. Default categories: Content, Social, Structure. You can add your own category, simply enter new category title here
group String Group your params in groups, they will be divided in tabs in the edit element window (Available from WPBakery Page Builder 4.1)
admin_enqueue_js String|Array Absolute url to javascript file, this js will be loaded in the js_composer edit mode (it allows you to add more functionality to your shortcode in js_composer edit mode)
admin_enqueue_css String|Array Absolute url to css file if you need to add custom css for element block in js_composer constructor mode
front_enqueue_js String|Array Absolute url to javascript file (useful for storing your custom backbone.js views), this js will be loaded in the js_composer frontend edit mode (it allows you to add more functionality to your shortcode in js_composer frontend edit mode). (Available from WPBakery Page Builder 4.2.2)
front_enqueue_css String|Array Absolute url to css file if you need to load custom css file in the frontend editing mode. (Available from WPBakery Page Builder 4.2.2)
icon String URL or CSS class with icon image. More info here
custom_markup String Custom html markup for representing shortcode in visual composer editor
js_view String Set custom backbone.js view controller for this content element
html_template String Path to shortcode template. This is useful if you want to reassign path of existing content elements through your plugin. Another way to change html markup
deprecated String Enter version number from which content element will be deprecated. It will be moved to the “Deprecated” tab in “Add element” window and notification message will be shown on elements edit page. To hide element from “Add element” all together use ‘content_element’=>false (Available from WPBakery Page Builder 4.5)
content_element Boolean If set to false, content element will be hidden from “Add element” window. It is handy to use this param in pair with ‘deprecated’ param (Available from WPBakery Page Builder 4.5)
params Array List of shortcode attributes. Array which holds your shortcode params, these params will be editable in shortcode settings page

Params Array

Here you should describe all you shortcode’s attributes that should be editable with WPBakery Page Builder interface. Each shortcode’s attribute should be described in the separate array element.

Parameters of params Array

Param name
type String Attribute type. In the “Available type values” table you can see all available variations
holder String HTML tag name where Visual Composer will store attribute value in WPBakery Page Builder edit mode. Default: hidden input
class String Class name that will be added to the “holder” HTML tag. Useful if you want to target some CSS rules to specific items in the backend edit interface
heading String Human friendly title of your param. Will be visible in shortcode’s edit screen
param_name String Must be the same as your parameter name
value Array or String Default attribute’s value
description String Human friendly description of your param. Will be visible in shortcode’s edit screen
admin_label Boolean Show value of param in WPBakery Page Builder editor
dependency Array Define param visibility depending on other field value. Please read Param Dependencies
edit_field_class String Set param container width in content element edit window. According to Bootstrap logic eg. col-md-4. (Available from WPBakery Page Builder 4.0)
weight Integer Params with greater weight will be rendered first. (Available from WPBakery Page Builder 4.4)
group String Use it to divide your params within groups (tabs)

Available type values

There are multiple attribute types available, this field is used to “tell” WPBakery Page Builder how to handle your attribute in content element edit screen.

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
textfield Simple input field
textarea Simple textarea field
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)
attach_image Single image selection
attach_images Multiple images selection
posttypes Checkboxes with available post types
colorpicker Color picker
exploded_textarea Text area, where each line will be imploded with comma (,)
widgetised_sidebars Dropdown element with set of available widget regions, that are registered in the active wp theme
textarea_raw_html Text area, its content will be coded into base64 (this allows you to store raw js or raw html code)
vc_link Link selection. Then in shortcodes html output, use $href = vc_build_link( $href ); to parse link attribute
checkbox Creates checkboxes, can have 1 or multiple checkboxes within one attribute
loop Loop builder. Lets your users to construct loop which can later be used during the shortcode’s output
css Basic CSS style editor for your content element. Check “Add “Design Options” Tab with CSS Editor to Your Element” page for more details
attribute types can be extended with new custom types. Tutorial: Create new param type

Related Post

How to Removing the Editor from a WordPress default Post type

For remove wordpress post editor add following code in your current themes functions.php file.

How to Block Dashboard Access for Non-Admins WordPress

Removing the Admin Bar for Non-Admins Removing the admin bar is a simple code snippet. I’ve shown before how you can hide the admin bar conditionally for users. In there I’ve not mentioned how you can hide it for everyone but admins, so thats where this code snippet comes in. You need to add the […]

How to Create Custom Taxonomies in WordPress

Custom Taxonomies are same like categories and tags. WordPress allows developers to create Custom Taxonomies. Custom Taxonomies are useful when one wants to create distinct naming systems and make them accessible behind the scenes in a predictable way. Create Custom Taxonomies by code. Add below Code in function.php file of your active child theme (or […]

Display Popular Tags in WordPress

you’ll need to add following code to your current themes functions.php file.

Enable Right Sidebar in WordPress all Post for Astra theme

Easy way to enable right sidebar in all wordpress post for astra theme add following code in your current themes function.php file.

How to Create Repeater Elements Using Visual Composer API

Learn how to create repeater fields for custom element of Visual Composer & WP Bakery. To achieve this, we need to write 2 functions. First one for create new element, Second one for add shortcode. function will be hooked to these specific action: vc_before_init The code Displaying Fields Values on the Frontend with shortcode. Visual […]

Leave a Reply

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