Skip to content

Creating A New WPBakery Element (Starter Class)

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:

Back To Top