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

Wie & Wo ich helfen kann?

Gemeinsamkeiten finden! Der erste Kontakt ist immer kritisch, um ein mögliches Projekt oder eine zukünftige Zusammenarbeit zu definieren. Ich habe… Read More

4 weeks ago

Gutenberg Grids & Timber ++ Some CSS Grid Magic!

A grid mystery Somehow the Grids Layout Builder for Gutenberg ist not pushing styles to the footer within a Timber… Read More

1 month ago

portalZINE TV – Moving forward

portalZINE TV was my / our youtube review channel till 2014 ( purely in German). We also shared our magazine… Read More

1 month ago

Elektro Scherer GmbH in Ludwigshafen

Elekro Scherer - offers electric services & installations of all kinds WordPressFresh new design ( GREENTONIC - Agentur Speyer )Twig… Read More

3 months ago

Older WACOM Pen Tablets under Windows 10

The issue WACOM is known for stopping support for their pen tablets after some years, especially for the cheaper consumer… Read More

4 months ago

VR is here! Are you already infected?

Watching from the sidelines VR has not just arrived, but it finally arrived for me and the masses ;) I… Read More

4 months ago