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