How-To: integrate Visual Composer in the Theme

After you purchased a regular license of plugin you can proceed to install it via backend or FTP. However if you are developing a premium theme that will be sold on a marketplace you have to buy an extended license and you have to register this license on wpbakery site in order to be allowed to include it in your premium theme. If this is your case it would be good to use the famous TGM Plugin Activationadvised library to require and include it in your theme.

I begin by saying that it’s a free choice. Most tutorials on the net recommend to place any function in the functions.php file in the theme folder. I believe instead that it’s better to create a separate file for the Visual Composer setup in which to place all features. In this tutorial, however, I do not take care to explain how to do a require_once in wordpress and then for convenience we start inserting the integration code in the functions.php file of the theme.

The following function is called BEFORE the Visual Composer initialization so it can set some important options that VC will use after its loading:

// Before VC Init
add_action( 'vc_before_init', 'vc_before_init_actions' );

function vc_before_init_actions() {
	
    // Setup VC to be part of a theme
    if( function_exists('vc_set_as_theme') ){ 
	
		vc_set_as_theme( true ); 
		
	}
	
	// Link your VC elements's folder
	if( function_exists('vc_set_shortcodes_templates_dir') ){ 
	
		vc_set_shortcodes_templates_dir( get_template_directory() . '/vc-elements' );
		
	}
	
	// Disable Instructional/Help Pointers
	if( function_exists('vc_pointer_load') ){ 
	
		remove_action( 'admin_enqueue_scripts', 'vc_pointer_load' );
		
	}
	
}

Code explanation

• row 02: I added an action to the vc_before_init VC hook, so my function will be called before VC init
• row 07: I used function_exists() to be sure the function that I’ll call exists.
• row 09: I called the function vc_set_as_theme(). This informs Visual Composer which will be integrated in a theme so it can hide some unuseful links and features commonly displayed when you install VC as simple plugin.
• row 16: I called vc_set_shortcodes_templates_dir() to include a custom folder to use to override the existing VC shortcodes. Indeed copying a VC shortcode file in this folder you can quickly override the existing shortcode and to add your personal shortcodes (elements) too.
  But this is probably the theme of a tutorial I’ll write soon.
  Please note also I passed as first parameter the function get_template_directory() to get the absolute path of my theme directory and I passed as second parameter the directory name (I had already created that folder into the theme root folder).
• row 23: I used remove_action to remove VC instructional/help pointers (totally optional).

The following function is called instead AFTER the Visual Composer initialization so it can manage some feature when the Visual Composer is already working:

// After VC Init
add_action( 'vc_after_init', 'vc_after_init_actions' );

function vc_after_init_actions() {
	
	// Enable VC by default on a list of Post Types
	if( function_exists('vc_set_default_editor_post_types') ){ 
		
		$list = array(
			'page',
			'post',
			'your-custom-posttype-slug', // add here your custom post types slug
		);
		
		vc_set_default_editor_post_types( $list );
		
	}
	
	// Disable AdminBar VC edit link
	if( function_exists('vc_frontend_editor') ){
		
		remove_action( 'admin_bar_menu', array( vc_frontend_editor(), 'adminBarEditLink' ), 1000 );
		
	}
	
	// Disable Frontend VC links
	if( function_exists('vc_disable_frontend') ){
		
		vc_disable_frontend();
			
	}	
	
}

Code explanation

• row 02: I added an action to the vc_after_init VC hook, so my function will be called after VC init
• row 09-15: I created an Array[] with all the post type slugs I want to be allowed to use Visual Composer by default. And I passed the array to the function vc_set_default_editor_post_types() so now by default VC will be usable on these post types (without user manual settings).
• row 22: I removed a specific action to disable the adminbar VC edit links (totally optional).
• row 29: I called the function vc_disable_frontend() to completely disable the VC links in frontend (totally optional).

Now you are ready to start to develop your custom shortcodes elements and to customize the default shortcodes.
I will publish soon many other tutorials about Visual Composer so stay in touch and let me know if you apreciated this tutorial leaving a like.

Complete Code

// Before VC Init
add_action( 'vc_before_init', 'vc_before_init_actions' );

function vc_before_init_actions() {
	
	// Setup VC to be part of a theme
    if( function_exists('vc_set_as_theme') ){ 
	
		vc_set_as_theme( true ); 
		
	}
	
	// Link your VC elements's folder
	if( function_exists('vc_set_shortcodes_templates_dir') ){ 
	
		vc_set_shortcodes_templates_dir( get_template_directory() . 'vc-elements' );
		
	}
	
	// Disable Instructional/Help Pointers
	if( function_exists('vc_pointer_load') ){ 
	
		remove_action( 'admin_enqueue_scripts', 'vc_pointer_load' );
		
	}
	
}

// After VC Init
add_action( 'vc_after_init', 'vc_after_init_actions' );

function vc_after_init_actions() {
	
	// Enable VC by default on a list of Post Types
	if( function_exists('vc_set_default_editor_post_types') ){ 
		
		$list = array(
			'page',
			'post',
			'your-custom-posttype-slug', // add here your custom post types slug
		);
		
		vc_set_default_editor_post_types( $list );
		
	}
	
	// Disable AdminBar VC edit link
	if( function_exists('vc_frontend_editor') ){
		
		remove_action( 'admin_bar_menu', array( vc_frontend_editor(), 'adminBarEditLink' ), 1000 );
		
	}
	
	// Disable Frontend VC links
	if( function_exists('vc_disable_frontend') ){
		
		vc_disable_frontend();
			
	}	
	
}