How to Customize and Add Colors of WP Bakery Default Buttons

The default colors of the buttons in WPBakery Page Builder (Formerly called Visual Composer) are great for some people, but if you’ve got specific branding you need to adhere to, you might want to be able to edit those color values.

New! Download this script a standalone plugin below.

The code below can be copied and pasted into your theme’s functions.php file and edited as you see fit, removing the stock button colors and adding your own.

add_action( 'vc_after_init', 'change_vc_button_colors' );
 
function change_vc_button_colors() {
	
	//Get current values stored in the color param in "Call to Action" element
		$param = WPBMap::getParam( 'vc_btn', 'color' );
	
	// Add New Colors to the 'value' array
	// btn-custom-1 and btn-custom-2 are the new classes that will be 
	// applied to your buttons, and you can add your own style declarations
	// to your stylesheet to style them the way you want.
		$param['value'][__( 'My Special Colored Button', 'my-text-domain' )] = 'btn-custom1';
		$param['value'][__( 'A Different Color Button', 'my-text-domain' )] = 'btn-custom2';
	
	// Remove any colors you don't want to use.
		unset($param['value']['Classic Grey']);
		unset($param['value']['Classic Blue']);
		unset($param['value']['Classic Turquoise']);
		unset($param['value']['Classic Green']);
		unset($param['value']['Classic Orange']);
		unset($param['value']['Classic Red']);
		unset($param['value']['Classic Black']);
		unset($param['value']['Blue']);
		unset($param['value']['Turquoise']);
		unset($param['value']['Pink']);
		unset($param['value']['Violet']);
		unset($param['value']['Peacoc']);
		unset($param['value']['Chino']);
		unset($param['value']['Mulled Wine']);
		unset($param['value']['Vista Blue']);
		unset($param['value']['Black']);
		unset($param['value']['Grey']);
		unset($param['value']['Orange']);
		unset($param['value']['Sky']);
		unset($param['value']['Green']);
		unset($param['value']['Juicy pink']);
		unset($param['value']['Sandy brown']);
		unset($param['value']['Purple']);
		unset($param['value']['White']);
	
	// Finally "update" with the new values
		vc_update_shortcode_param( 'vc_btn', $param );
}

That’s it. When your new button color is selected, that button will appear on the front end with your newly created CSS class, that you can then edit in your CSS stylesheet. This makes it much easier for non-technical people that may edit your site to easily implement buttons that match the styles you want them to use (while removing those that you don’t want them to use)

Note: This method works for the “vanilla” version of WPBakery Page Builder – many themes come packaged with a modified version of Page Builder, for example, the version below has been modified by the developer of the Salient Theme, and this modification does not work.

Button Customizer Plugin for WPBakery Composer

This has been a really popular post on my site, and for many, it’s probably easier to install a plugin than edit their theme’s functions.php file, so I’ve packaged this as a plugin with a simple interface for adding your own colors and disabling the default colors. The interface will show up in the admin menu for the WPBakery Page Builder.

Download Button Customizer Plugin

If you notice any bugs or discover this doesn’t work with a future version of WPBakery Composer, drop me a line at jason@greenvillewebworks.com so I can update it.