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)) {
  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);
  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);
  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 …


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);


    • Or even better using a negative lookahead :)

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

      Updated the above code accordingly.

  • 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.


Recent Posts

Visual House | 3D Visualisierung – 2022

"Visual House erstellt realistische 3D Video-Animationen, Panoramatouren, Außen- und Innen Ansichten für Ihr Bauvorhaben." "Visual House creates realistic 3D video… Read More

4 months ago

3D Messer Gravur Konfigurator – TYPEMYKNIFE® | 2022

TYPEMYKNIFE® - allows you to laser ingrave your knife using a unique 3D configurator. I redesigned their 3D knife configurator… Read More

4 months ago

Display Calibration / Spyder / Mac M1

Why? Color correction is important to me and to the projects I do. Regularly calibrating your monitor is essential in… Read More

6 months ago

Hosting MP3 files on Google Drive + HTML5 Audio Player

What Google Drive Sharing offers us! I am doing a Podcast on portalZINE.TV since last year and always host a… Read More

7 months ago

Importing CSV files with HTML5 and Papa Parse!

PAPA PARSE Papa Parse is a powerful, in-browser CSV parser for the big boys and girls :)If you do need… Read More

7 months ago

5 auf einen Streich – Folge 104

Die erste Folge nach einer langen Pause ;) Folge 104 Read More

7 months ago