+92 308 5039935
Get a Free Quote
+92 308 5039935

How to create WPBakery Page Builder Element

How to create WPBakery Page Builder Element

In this 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.


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.


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


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.


Extract the $atts argument inside the function.


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.


Its time to initialize those functions in class constructor.


Last but not least is to instantiate the class.


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.


Hello, I am a web designer and developer working since 2013. I build WordPress themes, write and extend WordPress plugins, edit WordPress themes and plugins in accordance to customer needs and play games when free ;-)
Related Post
Minify CSS
How to minify CSS in WordPress Theme or Plugin

Minification is used to remove unnecessary elements, e.g: extra spaces. There are a lot of php scripts to minify or compress the css but we are going to use a simple function  here. It is usually used for inline css in WordPress.

Read more
How to add inline CSS in WPBakery Page Builder Element

WPBakery Page Builder (Formerly Visual Composer) is one of the best drag and drop front-end/back-end builder. You can easily apply inline css using style attribute but what if you need to apply css to a pseudo elements?

Read more
How to Auto Load Files in WordPress?

You may need to auto load files in WordPress themes or plugins. But I wouldn’t recommend it if you are creating theme to sell on themeforest. They didn’t accepted themes with this auto load function few years ago when we used

Read more

Leave a Reply

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