WPBakery Page Builder is one of the best page builder plugin for WordPress which will allows you or your clients to create stunning website content with simple drag and drop. In this blog post we are going to create simple button element in WPBakery Page Builder (Formerly Visual Composer). Although you can check WPBakery Page Builder documentation for it, but still we are going to look on how to create it using class. Once you understand how to create element then you can check out our blog post about vc_map examples for available fields.

 

Create a class that extends WPBakeryShortCode class. e.g: Xe_Button.

if (!class_exists('Xe_Button')) : // check if the class already exist

class Xe_Button extends WPBakeryShortCode { // class name could be anything 

} 

endif;

 

Add function button_fields() having an array of vc_map() having name, description, base, class, category and param. This function is to create drag-n-drop element with required fields in back-end.

public function button_fields() {

   vc_map( array(

       'name'      => __( 'Button', 'xe' ),
       'description' => __( 'Eye catching button', 'xe' ),
       'base'      => 'button', // will be used to get attributes and add shortcode
       'class'     => '', // adds class to back-end element
       'category'  => __( 'Custom' , 'xe'),
       'params' => array()

   ));

}

 

Add an array of parameters to param having type, admin_label, class, heading, description, param_name and value.

array(
    'type'          => 'textfield', // type of the field
    'admin_label'   => true, // if true filed value is displayed on back-end
    'class'         => '', // adds class to back-end element
    'heading'       => __( 'Button Text', 'xe' ),
    'description'   => __( '', 'xe' ),
    'param_name'    => 'btn_text', // used to get and display field value
    'value'         => __( '', 'xe' ),
),

array(
    'type'          => 'textfield', // type of the field
    'admin_label'   => true, // if true filed value is displayed on back-end
    'class'         => '', // adds class to back-end element
    'heading'       => __( 'Button Link', 'xe' ),
    'description'   => __( '', 'xe' ),
    'param_name'    => 'btn_link', // used to get and display field value
    'value'         => __( '', 'xe' ),
),

 

Now lets add function having an arguments for displaying the actual button on front-end. Lets name it button_shortcode($atts). $atts is to get all the values from element as an array.

public function button_shortcode($atts) {

}

 

Extract the $atts argument inside the function.

$atts = vc_map_get_attributes('button', $atts);
extract($atts);

 

Add the html code and put the values of element using param_name as variables $param_name where needed. Remember to use esc_url, esc_attr and esc_html where needed.

$output .= '
<a href="'.esc_url($btn_link).'" class="btn btn-default">'.esc_html($btn_text).'</a>
';

return $output;

 

Its time to initialize those functions in class constructor.

function __construct() {

    add_action('vc_before_init', array($this, 'button_fields'));
    add_shortcode('button', array($this, 'button_shortcode'));

}

 

Last but not least is to instantiate the class.

new Xe_Button();

 

This is just a simple button element and you are only limited by your own imagination. Using this method you can build almost any type of highly customizable element. Below is the full code of button element.

if (!class_exists('Xe_Button')) : // check if the class already exist 

class Xe_Button extends WPBakeryShortCode { // class name could be anything 

    function __construct() {

        add_action('vc_before_init', array($this, 'button_fields'));
        add_shortcode('button', array($this, 'button_shortcode'));

    }

    public function button_fields() {

        vc_map( array(

            'name'      => __( 'Button', 'xe' ),
            'description' => __( 'Eye catching button', 'xe' ),
            'base'      => 'button', // will be used to get attributes and add shortcode
            'class'     => '', // adds class to back-end element
            'category'  => __( 'Custom' , 'xe'),
            'params' => array(

                array(
                    'type'          => 'textfield', // type of the field
                    'admin_label'   => true, // if true filed value is displayed on back-end
                    'class'         => '', // adds class to back-end element
                    'heading'       => __( 'Button Text', 'xe' ),
                    'description'   => __( '', 'xe' ),
                    'param_name'    => 'btn_text', // used to get and display field value
                    'value'         => __( '', 'xe' ),
                ),

                array(
                    'type'          => 'textfield', // type of the field
                    'admin_label'   => true, // if true filed value is displayed on back-end
                    'class'         => '', // adds class to back-end element
                    'heading'       => __( 'Button Link', 'xe' ),
                    'description'   => __( '', 'xe' ),
                    'param_name'    => 'btn_link', // used to get and display field value
                    'value'         => __( '', 'xe' ),
                ),

            )

        ));

    }

    public function button_shortcode($atts) {

        $atts = vc_map_get_attributes('button', $atts);
        extract($atts);

        $output = '
        <a href="'.esc_url($btn_link).'" class="btn btn-default">
            <button>'.esc_html($btn_text).'</button>
        </a>
        ';

        return $output;

    }

} 
new Xe_Button();

endif;

Muhammad Zohaib

Web Developer specializing in WordPress to develop custom themes, plugins, troubleshooting technical issues and ensuring websites are optimized for search engines and meet accessibility standards. Currently working as Lead Developer at XeCreators.

Leave a Reply

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


The reCAPTCHA verification period has expired. Please reload the page.