wrap visual composer element(s) in a shortcode - wordpress

Question

I have some content created with visual composer and I want to wrap some of it in a shortcode like
visual composer elements
[is_mobile]visual composer elements wrapped in shortcode[/is_mobile]
other visual composer elements
please how can it be done? thanks

Answer 1

I believe you need to "register" your shortcodes with Visual Composer. Having unregistered shortcodes confuses Visual Composer; it doesn't really know what to do with them, so it ignores them or does weird things with them (in my case, the content I was trying to wrap in an unregistered shortcode ended up at the top of the page).
So in the following:
name shows in the grid of Visual Composer elements when you are editing a page. You also use it to add your shortcode to the VC Container class (WPBakeryShortCodesContainer).
base is your shortcode's name -- in your example that is is_mobile
as_parent indicates which shortcodes your container can accept as children. I have it set to "except" nothing -- meaning it accepts all Visual Composer shortcodes as children. You can also set it to "only" and list out specific shortcodes you'd like to allow as children (for example if you only wanted to allow people to show or hide an image gallery).
And stuff that didn't matter for me: I'm not really sure why, but I was able to use is_container as true OR false. It made no difference in my situation. show_settings_on_create and content_element are probably irrelevant to your purposes but if you want to know more, they are explained here on VC documentation for vc_map.
This registers your shortcode with Visual Composer:
vc_map( array(
"name" => __("Is Mobile", "my-text-domain"),
"base" => "is_mobile", // your shortcode name
"as_parent" => array('except' => ''), // Use only|except attributes to limit child shortcodes (separate multiple values with comma)
"content_element" => true,
"show_settings_on_create" => false,
"is_container" => true,
"params" => array(
// you can add params same as with any other content element
// i didn't have any options to add onto my element; i was just trying
// to show or hide content based on WP conditions irrelevant to VC
),
"js_view" => 'VcColumnView'
) );
And this makes your shortcode act as a container (i.e., accept other VC elements as children) by extending the default VC container shortcode class. It seems to use the name from the above snippet as the connection.
if ( class_exists( 'WPBakeryShortCodesContainer' ) ) {
class WPBakeryShortCode_Is_Mobile extends WPBakeryShortCodesContainer {
}
}
This page on VC documentation helped me figure this out, though it's fairly sparse.