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 nameTypeDescription
nameStringYour shortcode’s name
baseStringShortcode tag
descriptionStringDescription of your element
classStringOn 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_createBooleanIf you don’t want the content element’s settings page not to appear automatically after adding it to the stage, set it to false.
weightIntegerIn the “Content Elements” grid, content elements with a higher weight will be rendered first. (WPBakery Page Builder 3.7 version)
categoryStringDefault: Content, Social, Structure. You can add your own. Simply enter a new category title.
groupStringGroup your parameters; they will be separated into tabs in the edit element box. (Available from WPBakery Page Builder 4.1)
admin_enqueue_jsString|ArrayThis js will be loaded in the js_composer edit mode.
admin_enqueue_cssString|ArrayIf you need to add custom css
front_enqueue_jsString|ArrayThis js will be loaded in the js_composer frontend edit mode. (WPBakery Page Builder 4.2.2)
front_enqueue_cssString|Array This css will be loaded in the js_composer frontend edit mode (WPBakery Page Builder 4.2.2)
iconStringMore info here
custom_markupStringCustom HTML markup for displaying the shortcode in the editor
paramsArrayList 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

TypeDescription
textarea_htmlText area with default WordPress WYSIWYG Editor.
textfieldinput field
textareatextarea field
dropdownDropdown input field
attach_imageimage selection
attach_imagesMultiple images selection
posttypesCheckboxes with available post types
colorpickerColor picker
exploded_textareaText area, each line will be imploded with a comma (,)
vc_linkLink selection. use $href = vc_build_link( $href ); to parse link attribute
checkboxCreates checkboxes
loopLoop 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();

}

Leave a Reply

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