How to create a Custom Element for the WPBakery Page Builder

4 minutes read

The WPBakery Page Builder formerly known as Visual Composer comes with lots of built-in features to help you customize the frontend more efficiently. If you’ve used WPBakery before and want to create your own custom element, look no further. In this article, we will create our own WPBakery element that will allow us to use our own custom code and design it exactly as we want.

Before we start

The WPBakery Page Builder plugin is not free and it is not available in the WordPress plugin repository. You can buy it from the CodeCanyon store or you can visit the official website.

Where should the code be added?

If you don’t want to use a plugin and instead keep the code in the theme folder, we propose making a separate file for your elements. While you could put all of the code in the functions.php file, it would rapidly become messy and confusing. Instead, create a folder called wpbakery-elements and inside it, create a file that corresponds to the component you’re about to add.

<?php


require_once get_template_directory() . '/wpbakery-elements/shortcodes.php';

require_once get_template_directory() . '/wpbakery-elements/services.php';

How to create a WPBakery element?

There are two ways of creating a custom element for the WPBakery Page Builder:

extend the WPBakeryShortCode class
create the shortcode sepeatly and include it in the vc_before_init hook

If you are not familiar with creating shortcodes this guide will help you better understand how they work and how to create them.

Once you have your shortcode ready it is time to include it in the builder. Follow these steps:

<?php 

add_action( 'vc_before_init', 'prefix_wpbakery_element_services' );

function prefix_wpbakery_element_services() {

   vc_map( array(
       "name" => __( "Services", "textdomain" ),


       // here you should add the name of your shortcode
       "base" => "the_name_of_your_shortcode",

       "class" => "",
       "icon" => "vc_general vc_element-icon vc_icon-vc-gitem-post-date",
       "category" => __( "Content", "textdomain"),
       "description" => __( "Display the services we offer." ),

       // add a few settings for your element
       // for example you can add a dropdown of all cusotm post types
       "params" => array(
           array(
               'type' => 'dropdown',
               'heading' => __( 'Post type', 'textdomain' ),
               'param_name' => 'cpt',
               'value' => array(
                    array(
                       'value' => 'service',
		       'label' => __( 'Services', 'textdomain' ),
                    ),
                    array(
                       'value' => 'testimonial',
		       'label' => __( 'Testimonials, 'textdomain' ),
                    ),


                ),
               'description' => __( 'Select post type', 'textdomain' ),
               'admin_label' => false,
               'group' => 'prefix-cpt-group',
          ),
        ) 
    ) );

}

Parameters

An associative array that stores WPBakery Page Builder instructions that are used in the “mapping” process.

Param name	Type	Description
name	String	Your shortcode’s name
base	String	Shortcode tag
description	String	Description of your element
class	String	On WPBakery Page Builder backend edit mode, a CSS class will be assigned to the shortcode’s content element in the page edit screen.
show_settings_on_create	Boolean	If you don’t want the content element’s settings page not to appear automatically after adding it to the stage, set it to false.
weight	Integer	In the “Content Elements” grid, content elements with a higher weight will be rendered first. (WPBakery Page Builder 3.7 version)
category	String	Default: Content, Social, Structure. You can add your own. Simply enter a new category title.
group	String	Group your parameters; they will be separated into tabs in the edit element box. (Available from WPBakery Page Builder 4.1)
admin_enqueue_js	String\|Array	This js will be loaded in the js_composer edit mode.
admin_enqueue_css	String\|Array	If you need to add custom css
front_enqueue_js	String\|Array	This js will be loaded in the js_composer frontend edit mode. (WPBakery Page Builder 4.2.2)
front_enqueue_css	String\|Array	This css will be loaded in the js_composer frontend edit mode (WPBakery Page Builder 4.2.2)
icon	String	More info here
custom_markup	String	Custom HTML markup for displaying the shortcode in the editor
params	Array	List of attributes for the shortcode. An array that holds your shortcode params, these params will be editable on the shortcode settings page

Available type values

Type	Description
textarea_html	Text area with default WordPress WYSIWYG Editor.
textfield	input field
textarea	textarea field
dropdown	Dropdown input field
attach_image	image selection
attach_images	Multiple images selection
posttypes	Checkboxes with available post types
colorpicker	Color picker
exploded_textarea	Text area, each line will be imploded with a comma (,)
vc_link	Link selection. use $href = vc_build_link( $href ); to parse link attribute
checkbox	Creates checkboxes
loop	Loop builder. Lets your users construct a loop that can later be used during the shortcode’s output

Create a custom element with a class

if ( ! class_exists( 'PREFIX_WPB_Services' ) ) {

    class PREFIX_WPB_Services extends WPBakeryShortCode {

        // Initialize
        function __construct() {
            add_action( 'init', array( $this, 'create_shortcode' ), 999 );            
            add_shortcode( 'vc_soda_blockquote', array( $this, 'render_shortcode' ) );

        }        

        // Map
        public function create_shortcode() {
        
             vc_map( array( ) );

        }

        // Render
        public function render_shortcode( $atts, $content, $tag ) {
           
           // output your shortcode on forntend
              

        }

    }

    new PREFIX_WPB_Services();

}