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.

Parameters

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

Param name
Type
Description
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
Description
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.

Value
Description
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 Create Your Own WordPress Shortcodes

Simple shortcodes Shortcode functions can be added to plugin code or your theme’s functions.php file. If it’s the latter, I’d recommend creating a separate wc-shortcodes.php file, then adding include(‘wc-shortcodes.php’); to functions.php. You can use below code to include file wc-shortcodes.php. If the shortcode produces a lot of HTML then ob_start can be used to capture […]

Display Popular Tags in WordPress

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

How to Create Loop Element 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 […]

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.

Redirect to Checkout after add to cart WooCommerce

Redirecting the user to the checkout page when they’ve added a product to their cart. This may come in handy if you only sell one product / one product per time. The filter woocommerce_add_to_cart_redirect makes it easy to redirect user to custom page. Code goes in function.php file of your active child theme (or active […]

Remove Version From CSS & JS in WordPress

Let’s start with removing versions from style and scripts. To do so, add the code below in your active theme’s functions.php file. After adding script on functions.php file you can view the source of any pages version should be removed from all your styles and scripts. You can also remove version from WordPress Head and […]


Leave a Reply

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