WPBakery page builder elements are just WordPress shortcodes, so creating a new one is extremely simple.
All you need to do is register a new shortcode with WordPress via the add_shortcode function, then use the WPBakery vc_lean_map function to register that shortcode with the page builder and give it some options. Below is a very simple class showing you how you could create a new basic element via your child theme or custom plugin.
/**
* Adds new shortcode "myprefix_say_hello" and registers it to
* the Visual Composer plugin
*
*/
if ( ! class_exists( 'MyPrefix_Say_Hello_Shortcode' ) ) {
class MyPrefix_Say_Hello_Shortcode {
/**
* Main constructor
*/
public function __construct() {
// Registers the shortcode in WordPress
add_shortcode( 'myprefix_say_hello', __CLASS__ . '::output' );
// Map shortcode to WPBakery so you can access it in the builder
if ( function_exists( 'vc_lean_map' ) ) {
vc_lean_map( 'myprefix_say_hello', __CLASS__ . '::map' );
}
}
/**
* Shortcode output
*/
public static function output( $atts, $content = null ) {
// Extract shortcode attributes (based on the vc_lean_map function - see next function)
$atts = vc_map_get_attributes( 'myprefix_say_hello', $atts );
// Define output and open element div.
$output = '<div class="my-hello-element">';
// Display custom heading if enabled and set.
if ( isset( $atts['show_heading'] )
&& 'yes' === $atts['show_heading']
&& ! empty( $atts['heading'] )
) {
$output .= '<h2 class="my-hello-element__heading">' . esc_html( $atts['heading'] ) . '</h2>';
}
// Display content.
$output .= '<div class="my-hello-element__content">';
if ( $content ) {
$output .= wp_kses_post( $content );
} else {
$output .= 'Hello';
}
$output .= '</div>';
// Close element.
$output .= '</div>';
// Return output
return $output;
}
/**
* Map shortcode to WPBakery
*
* This is an array of all your settings which become the shortcode attributes ($atts)
* for the output. See the link below for a description of all available parameters.
*
* @since 1.0.0
* @link https://kb.wpbakery.com/docs/inner-api/vc_map/
*/
public static function map() {
return array(
'name' => esc_html__( 'Say Hello', 'locale' ),
'description' => esc_html__( 'Shortcode outputs Hello.', 'locale' ),
'base' => 'myprefix_say_hello',
'params' => array(
array(
'type' => 'dropdown',
'heading' => esc_html__( 'Show Heading?', 'locale' ),
'param_name' => 'show_heading',
'value' => array(
esc_html__( 'No', 'locale' ) => 'no',
esc_html__( 'Yes', 'locale' ) => 'yes',
),
),
array(
'type' => 'textfield',
'heading' => esc_html__( 'Heading', 'locale' ),
'param_name' => 'heading',
'dependency' => array( 'element' => 'show_heading', 'value' => 'yes' ),
),
array(
'type' => 'textarea_html',
'heading' => esc_html__( 'Custom Text', 'locale' ),
'param_name' => 'content',
),
),
);
}
}
}
new MyPrefix_Say_Hello_Shortcode;Result
You should now have a new "Say Hello" element registered for use in the WPBakery page builder which would look like this:
