Visual Composer to Bootstrap Grid Cleanup

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

  1. add_filter('vc_shortcodes_css_class', function ($class_string, $tag) {
  2.   $tags_to_clean = [
  3.           'vc_row',
  4.           'vc_column',
  5.           'vc_row_inner',
  6.           'vc_column_inner'
  7.   ];
  8.   if (in_array($tag, $tags_to_clean)) {
  9.        
  10.           $class_string = str_replace(' wpb_row', '', $class_string);
  11.           $class_string = str_replace(' vc_row-fluid', '', $class_string);
  12.           $class_string = str_replace(' vc_column_container', '', $class_string);
  13.           $class_string = str_replace('wpb_column', '', $class_string);
  14.          
  15.           // replace vc_, but exclude any custom css
  16.           // attached via vc_custom_XXX (negative lookahead)
  17.           $class_string = preg_replace('/vc_(?!custom)/i', '', $class_string);
  18.          
  19.           // replace all vc_
  20.           // $class_string = preg_replace('/vc_/i', '', $class_string);
  21.   }
  22.   $class_string = preg_replace('|col-sm|', 'col-sm', $class_string);
  23.   return $class_string;
  24. }, 10, 2);

Visual Composer for WordPress
Bootstrap / Bootstrap Sass

Enjoy coding …

Alex

I am a full-stack developer.

I love programming,  design and know my way around server architecture as well.  I would never feel complete, with one of these missing.

I have a broad range of interests, that’s why I constantly dive into new technologies and expand my knowledge where ever required. Technologies are evolving fast and I enjoy using the latest.

Apart from that, I am a peace loving guy who tries to have people around him that think the same.  I truly believe in the principle: “If you help someone, someone will help you, when you need it."

View Comments

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

    • Quick fix: add

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

      Alex

    • Or even better using a negative lookahead :)

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

      Updated the above code accordingly.
      Enjoy
      Alex

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

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

      Alex

Recent Posts

How to access Gutenberg Block Text-Selections / Text-Formats and other Mysteries

Gutenberg Documentation While Gutenberg is becoming more stable with each release, documentation is only growing slowly. Many parts are outdated,… Read More

4 months ago

Welcome Dashboard with Gutenberg – cubicFUSION Admin Enhancer 0.2

What's new / What changed ? Admin Enhancer is the first free plugin released under the cubicFUSION brand. The plugin is… Read More

5 months ago

2020: WordPress Admin White Label Solutions ( Personal Favorites )

I am always looking for easy ways to white label the WordPress administration for myself and my clients. A nice… Read More

5 months ago

White Label Dashboards with cubicFUSION Admin Enhancer for WordPress!

cubicFUSION cubicFUSION is my personal development playground. I always planned to make many of my projects public, but time is… Read More

5 months ago

Easy Webinars with Nextcloud Talk

1. Build your own little cloud Everybody seems to be searching for ways to integrate digital communication into their home-office… Read More

7 months ago