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

Particle Network Animations in Javascript

What are particle animations? Particle network animations in JavaScript typically involve creating visual representations of… Read More

3 days ago

B&B / Hotel Booking Solutions for WordPress | 2024

BOOKING SOLUTIONS 202x This is my take on a subset of booking, appointment, PMS or… Read More

1 month ago

WordPress Cron + WP-CLI + Ntfy

THE GOAL Create a system cron for WordPress, that is accessible and can be easily… Read More

2 months ago

2024 is here and now :)

2024, what's cooking? Slowly getting into the 2024 spirit. 3 projects coming to a close… Read More

4 months ago

2023 ends and whats next !

Short look back at 2023 This has been a busy and interesting year. I am… Read More

4 months ago

cubicFUSION Grid Tweaker – Elementor Grid made easy.

Elementor Pro provides grid containers as an experimental feature. The options provided are limited, when… Read More

5 months ago