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

How to add inline CSS in WPBakery Page Builder Element

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? that’s where it gets a bit tricky, right? Actually not, its simple and easy so lets begin! We will use button element we created in one of our previous tutorial on how to create WPBakery Page Builder Element.


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.


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.


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.


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.


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.


Step 6: Now lets make some changes to the $output. Add the $btn_uniq variable in class attribute to load the uniq class selector. Alaways remember to use esc_attr() or esc_html() accordingly.


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.


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 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
Introduction to Websites & WordPress

School of Entrepreneurship and XeCreators collaboratively arranged a one-day workshop on “Introduction to Websites and WordPress” specially for people with no IT background.

Read more

Leave a Reply

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