Simple way to do some Visual Composer Grid cleanup, when you are using Bootstrap within your theme. This removes and cleans up classes.

add_filter('vc_shortcodes_css_class', function ($class_string, $tag) {
  $tags_to_clean = [
	  'vc_row',
	  'vc_column',
	  'vc_row_inner',
	  'vc_column_inner'
  ];
  if (in_array($tag, $tags_to_clean)) {
	
	  $class_string = str_replace(' wpb_row', '', $class_string);
	  $class_string = str_replace(' vc_row-fluid', '', $class_string);
	  $class_string = str_replace(' vc_column_container', '', $class_string);
	  $class_string = str_replace('wpb_column', '', $class_string);
	  
          // replace vc_, but exclude any custom css 
          // attached via vc_custom_XXX (negative lookahead)
	  $class_string = preg_replace('/vc_(?!custom)/i', '', $class_string);
          
          // replace all vc_
          // $class_string = preg_replace('/vc_/i', '', $class_string);
  }
  $class_string = preg_replace('|col-sm|', 'col-sm', $class_string);
  return $class_string;
}, 10, 2);

add_filter('vc_shortcodes_css_class', function ($class_string, $tag) {

$tags_to_clean = [

'vc_row',

'vc_column',

'vc_row_inner',

'vc_column_inner'

];

if (in_array($tag, $tags_to_clean)) {

$class_string = str_replace(' wpb_row', '', $class_string);

$class_string = str_replace(' vc_row-fluid', '', $class_string);

$class_string = str_replace(' vc_column_container', '', $class_string);

$class_string = str_replace('wpb_column', '', $class_string);

// replace vc_, but exclude any custom css

// attached via vc_custom_XXX (negative lookahead)

$class_string = preg_replace('/vc_(?!custom)/i', '', $class_string);

// replace all vc_

// $class_string = preg_replace('/vc_/i', '', $class_string);

}

$class_string = preg_replace('|col-sm|', 'col-sm', $class_string);

return $class_string;

}, 10, 2);

Visual Composer for WordPress
Bootstrap / Bootstrap Sass

Enjoy coding …

5 Comments

Oldest

Newest Most Voted

Inline Feedbacks

View all comments

Justin

7 years ago

When you replace “vc_” it removes the background image in a row. Not sure why.

Author

Alex

Reply to Justin

Quick fix: add

$class_string = str_replace('custom_', 'vc_custom_', $class_string);

Or even better using a negative lookahead :)

Updated the above code accordingly.
Enjoy
Alex

Martin

6 years ago

Hey Alex, great job! So we can forget about the .container and container-fluid wrapper class from bootstrap or how do you handle that?

Reply to Martin

Hi,
it will behave just like a standard bootstrap theme. Some tweaks might be needed, depending on addons used or special use cases.

Visual Composer to Bootstrap Grid Cleanup

Enjoy coding …

Alexander