Snippet: Add Custom “Style” for WPBakery Modules (Tabs, Accordion, etc)
Various WPBakery Modules have the ability to select a "Style" such as Accordions and Tabs and the design of these modules are then controlled by the style you've selected. Now if you want these modules to look completely different rather then resetting the whole CSS for the module you can instead add your own Custom Style to choose from which will render the module basically unstyled by default and then you can add your custom CSS to make it look how you want. This is the preferred method of giving the modules your own "look" and it's quite simple. Have a look at the example code below which shows how to add a "My Custom Style" option to the Accordion module as well as how to make this the "default" style whenever you add the module to a page.
add_action( 'vc_after_init', function() {
// Define your custom style ID and name (id is used for the front-end class and name for the dropdown select)
$custom_style_id = 'my-custom_style';
$custom_style_name = 'My Custom Style';
// Array of modules to add a custom 'style' option to
// The key is the module to target and the value is the ID of the parameter that holds the "Style" value
$modules = array(
'vc_tta_accordion' => 'style', // accordion,
'vc_tta_tour' => 'style', // tours
'vc_tta_tabs' => 'style', // tabs
'vc_toggle' => 'style', // toggles
);
// Loop through modules to define new custom style
foreach( $modules as $module => $target_parameter ) {
// Get the module parameter value
$param = WPBMap::getParam( $module, $target_parameter );
// Aadded checks to prevent possible errors
if ( empty( $param[ 'value' ] ) || ! is_array( $param[ 'value' ] ) ) {
continue;
}
// Add your custom style to the list of available options
$param[ 'value' ][ $custom_style_name ] = $custom_style_id;
// Set the default value to your custom style (ONLY IF YOU WANT YOUR CUSTOM STYLE TO BE THE DEFAULT)
$param[ 'std' ] = $custom_style_id;
// Pass your custom settings to WPBakery
vc_update_shortcode_param( $module, $param );
// OPTIONAL => Hide the "Color" and "Shape" options when we've selected our custom style
$color_param = WPBMap::getParam( $module, 'color' );
$shape_param = WPBMap::getParam( $module, 'shape' );
$dependency = array(
'element' => $target_parameter,
'value_not_equal_to' => $custom_style_id
);
if ( ! empty( $color_param ) && is_array( $color_param ) ) {
$color_param['dependency'] = $dependency;
vc_update_shortcode_param( $module, $color_param );
}
if ( ! empty( $shape_param ) && is_array( $shape_param ) ) {
$shape_param['dependency'] = $dependency;
vc_update_shortcode_param( $module, $shape_param );
}
}
} );