WPBakery Page Builder, previously known as Visual Composer, is a top-of-the-line front-end and back-end builder that allows users to easily drag and drop elements onto their website. While applying inline CSS using the “style” attribute is straightforward in your custom elements, things get a bit more complicated when trying to apply CSS to pseudo elements.
In this tutorial, we will be using a button element that we previously created in one of our tutorial on how to create WPBakery Page Builder Element. So lets not waste more of our time and get started.
Step 1:
We will add simple background color for the button to keep the tutorial short. First we need to add the colorpicker field in element. You can check all the supported fields in our blog post named WPBakery Page Builder vc_map examples. Lets add the colorpicker field after the Button Link field.
array(
'type' => 'colorpicker', // type of the field
'heading' => __( 'Background Color', 'xe' ),
'description' => __( '', 'xe' ),
'param_name' => 'btn_bg_color', // used to get and display field value
'value' => __( '', 'xe' ),
),Step 2:
Now we need a unique class to apply the color only to this element. For that we are going to use PHP function uniqid(). This Unique Class will be stored as text field and we will also add a friendly notice for non-developers to not mess it up if they don’t know what they are doing. You can also hide it using CSS. You may think that there is a custom vc class something like vc_custom_1586336769396 right? keep in mind, that class is only added when Design Options are in use.
array(
'type' => 'textfield', // type of the field
'edit_field_class' => 'vc_col-xs-12 xe-hidden',
'heading' => __( 'Unique Class', 'xe' ),
'description' => __( 'Unique class name to target and style this element specifically. Please don\'t remove this class unless you know what you are doing.', 'xe' ),
'param_name' => 'btn_uniq', // used to get and display field value
'value' => uniqid('xe-'),
)Step 3:
In this step we will create a function named load_custom_css() with $css parameter in functions.php or any where if you are building a plugin. It will load style sheet using wp_enqueue_style() and will add inline css after using wp_add_inline_style(). Here comes a thought that if you use this function in every element same style will be loaded many times, but don’t worry WordPress never loads style-sheet with the same handle or name again.
function load_custom_css($css) {
wp_enqueue_style( 'vc_shortcode-custom', get_template_directory_uri() . '/css/vc-custom.css' );
wp_add_inline_style( 'vc_shortcode-custom', $css );
}Step 4:
Ok, so lets get back to the element and add the background-color to the button and assign it to a $style variable.
$style = '.'.esc_attr($btn_uniq).' button{background-color:'.$btn_bg_color.';}';Step 5:
Load the CSS using load_custom_css() function we’ve created in step 3. You can also use a CSS Minifier function to minify the CSS.
load_custom_css($style);Step 6:
Now lets make some changes to the $output. Add the $btn_uniq variable in class attribute to load the uniq class selector. Always remember to use esc_attr() or esc_html() accordingly.
$output = '
<a href="'.esc_url($btn_link).'" class="btn btn-default '.esc_attr($btn_uniq).'">
<button>'.esc_html($btn_text).'</button>
</a>
';This is just a simple example and you are only limited by your own imagination. Below is the full code of button element after the editing we’ve made. You can add as many custom styles or CSS as you want.
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('xe_button', array($this, 'button_shortcode'));
}
public function button_fields() {
vc_map( array(
'name' => __( 'Button', 'xe' ),
'description' => __( 'Eye catching button', 'xe' ),
'base' => 'xe_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' ),
),
array(
'type' => 'colorpicker', // type of the field
'heading' => __( 'Background Color', 'xe' ),
'description' => __( '', 'xe' ),
'param_name' => 'btn_bg_color', // used to get and display field value
'value' => __( '', 'xe' ),
),
array(
'type' => 'textfield', // type of the field
'edit_field_class' => 'vc_col-xs-12 xe-hidden',
'heading' => __( 'Unique Class', 'xe' ),
'description' => __( 'Unique class name to target and style this element specifically. Please don\'t remove this class unless you know what you are doing.', 'xe' ),
'param_name' => 'btn_uniq', // used to get and display field value
'value' => uniqid('xe-'),
)
)
));
}
public function button_shortcode($atts) {
$atts = vc_map_get_attributes('xe_button', $atts);
extract($atts);
$style = '.'.esc_attr($btn_uniq).' button{background-color:'.$btn_bg_color.';}';
load_custom_css($style);
$output = '
<a href="'.esc_url($btn_link).'" class="btn btn-default '.esc_attr($btn_uniq).'">
<button>'.esc_html($btn_text).'</button>
</a>
';
return $output;
}
}
new Xe_Button();
endif;
Muhammad Zohaib