HOW TO: Strip WPBakery Page Builder "VC" shortcodes from all posts and pages

When moving content between sites you may come across VC shortcodes. These appear on sites that use WPBakery Visual Composer. It's a hugely popular page builder and is often bundled within premium themes so you may not even be aware you're using it.

Fundamentally it's a WordPress plugin, used by the theme that generally appears as /wp-content/plugins/js_composer and uses shortcodes in the post/page content to style your page.

Where you may run into an issue with these shortcodes is when you export content from a WordPress site that uses Visual Composer into a site that doesn't. With the plugin present, the shortcodes will be processed by js_composer and output some nice styling.

Without it, WordPress thinks the shortcodes are just plain text that you want to display.

Instead of seeing Hello, welcome to 403page.com on your page, you'll see something like:

[vc_row][vc_column][vc_column_text]Hello, welcome to 403page.com[/vc_column_text][/vc_column][/vc_row]

Thankfully, there's a super easy fix for this if you have WP-CLI.

There are bunch of shortcodes with any number of variables we need to search for and replace, but thankfully they all begin with either the opening tag [vc or the closing tag [/vc. So we just need to match these 2 strings and catch anything else within those brackets.

Stripping all VC shortcodes:

Here's the command to do just that:

wp search-replace "\[vc.*]|\[\/vc.*]" "" --precise --all-tables --regex

To break it down, we're searching for [vcMATCHANYTHINGHERE] and also for [/vcMATCHANYTHINGHERE]. Whatever we find, we replacing with nothing (hence ""). The most important flag is the --regex one which allows the backslash to be read as an escape and the .* to be interpretted as a wildcard to match anything within the brackets, provided it's lead by vc or /vc.

Here's an example of what a replacement would look like after running that command (assume the text below is all in the post or page body)...

Before:

VC Row shortcode: [vc_row]
VC Column shortcode: [vc_column]
VC Column text shortcode: [vc_column_text]
VC Column with specific width: [vc_column width="2/3"]
VC Column text closing shortcode: [/vc_column_text]
VC Column closing shortcode:  [/vc_column]
VC Row shortcode: [/vc_row]
VC Raw html: [vc_raw_html]JTNDJTIxLS1IdWJTcG90JTIwQ2FsbC10by1BY3Rpb24lMjBDb2[/vc_raw_html]
VC CSS class: [vc_row el_class="banner header" css=".vc_custom_23462343245342{background-color: #ffffff !important;}"]

After:

VC Row shortcode:
VC Column shortcode:
VC Column text shortcode:
VC Column with specific width:
VC Column text closing shortcode: 
VC Column closing shortcode:
VC Row shortcode:
VC Raw html:
VC CSS class:

Stripping specific VC shortcodes:

You may just need to remove specific VC shortcodes and leave the rest intact. For that, you just need add a little more specificity to the command. Let's take [vc_raw_html] and it's counterpart [/vc_raw_html].

To remove just these shortcodes you would use:

wp search-replace "\[vc_raw_html]|\[\/vc_raw_html]" "" --precise --all-tables --regex

You may have a scenario where you need to match variant values within the same shortcode. One example would be [vc_row el_class="banner header" css=".vc_custom_1234{background-color: #ffffff;}"]. In this case, we want to match the shortcode and anything else that comes after it up until the closing bracket in the first shortcode.

To remove these kinds of shortcodes you would use:

wp search-replace "\[vc_row.*]|\[\/vc_row.*]" "" --precise --all-tables --regex

Interested in learning more about using WP-CLI and regex? Check this guide out.