Informations

10960 views
Easy

Ingredients

  • WordPress v4.5+required
  • Visual Composer Plugin v4.11+required
  • Your Custom Theme or a Starter Themeadvised
  • Basic PHP/WP knowledge

STEPS

Today thousands themes are based on the popular Visual Composerrequired plugin by wpbakery. Not all of them, however, present a correct integration of the plugin. This tutorial will you explain how to make a proper setup of Visual Composer in a few simple steps.

1. Install Visual Composer

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.

2. Where to include your integration code

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.

3. Actions BEFORE Visual Composer init

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).

4. Actions AFTER Visual Composer init

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).

5. Conclusions and complete code

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();
			
	}	
	
}
  • Spencer Bigum

    Im on 4.11.2.1 and this I cannot for the life of me figure out why when I first install my theme I’ve been building, when it activates – my custom post slug is still not checked by default even after using this code……is it working for you?

    • Hello,

      thanks for your comment!

      If I well understood the question you are talking about the function: vc_set_default_editor_post_types( $list );

      If you pass a list to this function you will have Visual Composer enabled
      by default in your post types. It’s working in our dev zone.

      Take in mind you’ll not see your posttype enabled in the Role Manager (VC Options)…
      http://awesomescreenshot.com/0

      But it will have the Composer enabled in your post types also if the option is not selected in VC’s Role Manager..

      Let us know if you find some issue in your version of Composer.

      Best

      • Spencer Bigum

        Yea great post – I really like how you explained it. Once I saw your screen-shot a light bulb went on in my brain. I was deregistering my CPT and then reregistering it so it would show up in the role manager so I could check it.

        BUT after seeing your screen shot, I realized I don’t need to check it and got rid of it. Then using the:
        var_dump( vc_editor_post_types() );

        I was able to see VC was registering my CPT, so I just disabled that function to re-register my CPT and it works perfectly now!

        Thank you so much!! SO hard to find good content on Visual Composer – can’t wait to read through other posts you have and some of those upcoming How-to’s are issues I have when developing a new theme.

        Thank you again,
        S

        • Thank you very much Spencer! I apreciate your feedback!
          It’s important because this is a new project and we need to know if we are working well!

          The blog idea is based on tutorials that you’ll not find on Google because there are some functions that are not clear in VC and in WP in general.

          For example I’m seriously thinking that some field types in VC are deliberately omitted in the VC’s Wiki to give them an advantage..

          Thanks again for you interest and continue to follow us.

          Best

  • Hello,

    thanks for your comment!

    If I well understood the question you are talking about the function: vc_set_default_editor_post_types( $list );

    If you pass a list to this function you will have Visual Composer enabled by default in your post types. It’s working in our dev zone.

    Take in mind you’ll not see your posttype enabled in the Role Manager (VC Options)…
    http://awesomescreenshot.com/0786353a3b

    But it will have the Composer enabled in your post types also if the option is not selected in VC’s Role Manager..

    Let us know if you find some issue in your version of Composer.

    Best

  • Juber

    Great..

  • You’re Awesome Man, Thank You 😀

  • Annapurna Agrawal

    Hi,
    How can i change the default category of the shortcode to a custom one? Please let me know.

    • Hi there,

      If you are talking about this -> http://www.awesomescreenshot.com/image/1980438/43b912aaacd1cdcffde07cc270a3e4e6 it’s not a simple customization.

      The category group is due to a param in the vc_map() array called ‘category’ fo all default elements in Visual Composer.. So to change that category name you would have to “re-map” all default elements that are inside the category…

      But there is a trick.. The “Content” category name is created with a language var -> __( ‘Content’, ‘js_composer’ ), so you only have to translate that string with something else..

      Best

      • Annapurna Agrawal

        Yes you got me right. I am successfully able to change the category by changing the vc_map param. But i do not want to play around with the plugin’s core file. Is there a way out to do this without modifying the vc default files?

        • Annapurna Agrawal

          i want to remap just few shortcodes. How do i do it?

          • Sure,

            you have to add in your “vc_before_init” function a vc_map() for every element you want to edit:

            To get all the element attributes and paramas you have to search them in the VC core.. If you, for example, are searching for the text block you will find it on

            /js_composer/config/content/shortcode-vc-column-text.php

            Inside the file you’ll see the array to pass to vc_map()

            In this case:

            return array(
            ‘name’ => __( ‘Text Block’, ‘js_composer’ ),
            ‘icon’ => ‘icon-wpb-layer-shape-text’,
            ‘wrapper_class’ => ‘clearfix’,
            ‘category’ => __( ‘Content’, ‘js_composer’ ),
            ‘description’ => __( ‘A block of text with WYSIWYG editor’, ‘js_composer’ ),
            ‘params’ => array(
            array(
            ‘type’ => ‘textarea_html’,
            ‘holder’ => ‘div’,
            ‘heading’ => __( ‘Text’, ‘js_composer’ ),
            ‘param_name’ => ‘content’,
            ‘value’ => __( ‘I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.’, ‘js_composer’ ),
            ),
            vc_map_add_css_animation(),
            array(
            ‘type’ => ‘textfield’,
            ‘heading’ => __( ‘Extra class name’, ‘js_composer’ ),
            ‘param_name’ => ‘el_class’,
            ‘description’ => __( ‘Style particular content element differently – add a class name and refer to it in custom CSS.’, ‘js_composer’ ),
            ),
            array(
            ‘type’ => ‘css_editor’,
            ‘heading’ => __( ‘CSS box’, ‘js_composer’ ),
            ‘param_name’ => ‘css’,
            ‘group’ => __( ‘Design Options’, ‘js_composer’ ),
            ),
            ),
            );

            Obviously now you can change the Category label, but it’s not all.. You also have to add the “base” attribute to direct the vc_map() to the existing text block element:

            vc_map(

            array(
            ‘name’ => __( ‘Text Block’, ‘js_composer’ ),
            ‘base’ => ‘vc_column_text’,
            ‘icon’ => ‘icon-wpb-layer-shape-text’,
            ‘wrapper_class’ => ‘clearfix’,
            ‘category’ => __( ‘Content’, ‘js_composer’ ),
            ‘description’ => __( ‘A block of text with WYSIWYG editor’, ‘js_composer’ ),
            ‘params’ => array(
            array(
            ‘type’ => ‘textarea_html’,
            ‘holder’ => ‘div’,
            ‘heading’ => __( ‘Text’, ‘js_composer’ ),
            ‘param_name’ => ‘content’,
            ‘value’ => __( ‘I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.’, ‘js_composer’ ),
            ),
            vc_map_add_css_animation(),
            array(
            ‘type’ => ‘textfield’,
            ‘heading’ => __( ‘Extra class name’, ‘js_composer’ ),
            ‘param_name’ => ‘el_class’,
            ‘description’ => __( ‘Style particular content element differently – add a class name and refer to it in custom CSS.’, ‘js_composer’ ),
            ),
            array(
            ‘type’ => ‘css_editor’,
            ‘heading’ => __( ‘CSS box’, ‘js_composer’ ),
            ‘param_name’ => ‘css’,
            ‘group’ => __( ‘Design Options’, ‘js_composer’ ),
            ),
            ),
            )

            );

            An so on for all elements..

            Best

  • Dev

    Hi,
    How can I remove Content,Social,WordPressWidgets,etc from Add Element windows of Visual composer. I only want All(it displays all anyways) and my custom one ?

    Thank you very much

  • Emeka Emmanuel

    Hello, how do i detect visual composer element o a page , i am trying to implete and make visual comoser show above the page content, i contacted the help suport and they say it my already created element would show anywhere the is, bro do you have ideal on how i can do this ?

  • Anwar Hossen

    Thats good

Your Personal Notes