How To Integrate Visual Composer In a Theme (TGM Plugin Activation)

If you’re a theme developer, you probably already know that there are many benefits of including plugins in your theme. And including Visual Composer in your theme is really fast and simple. To do that, we’ll use TGM Plugin Activation which is a PHP library “that allows you to easily require or recommend plugins for your WordPress themes (and plugins)”.

In this post, we’ll go through the most basic way of adding Visual Composer to a theme. In this example, I’ll use the Twenty Twenty theme.

  1. Go to TGM Plugin Activation website, “Download” section;
  2. Fill in the required fields with the information about your product (theme; plugin; child theme);

TGM Plugin Activation

3. Click on “Generate” and that will download a .zip file; It will automatically prepare all the needed files with the right theme function prefixes, text-domains, etc.

4. Unzip the file and copy the class-tgm-plugin-activation.php file;

class-tgm-plugin-activation-php-file

5. Paste the .php file in the folder of your theme;

6. Open funtions.php file of your theme and open example.php file of the TMG Plugin Activate folder;

7. Copy all content from example.php and paste it at the very end of your theme’s funtions.php file;

8. In the update, the require_once statement section, change the file path the right file location. If you copied the TMG Plugin Activate file to the root folder of your theme, simply delete the ‘path/to’ part;

9. There is only one variable – $plugins – that you need to update inside the twentytwenty_register_required_plugins function.

10. Replace plugins variable with this example of Visual Composer.

$plugins = array(
       array(
           'name'      => 'Visual Composer Website Builder',
           'slug'      => 'visualcomposer',
           'required'  => false,
       ),
   );
This will download the Visual Composer Website Builder plugin directly from WordPress.org repository.

So after all these steps, the result should look like this:

require_once get_template_directory() . '/class-tgm-plugin-activation.php';
add_action( 'tgmpa_register', 'twentytwenty_register_required_plugins' );
function twentytwenty_register_required_plugins() {
   $plugins = array(
       array(
           'name'      => 'Visual Composer Website Builder',
           'slug'      => 'visualcomposer',
           'required'  => false,
       ),
   );
   $config = array(
       'id'           => 'twentytwenty',
       'default_path' => '',
       'menu'         => 'tgmpa-install-plugins',
       'has_notices'  => true,
       'dismissable'  => true,
       'dismiss_msg'  => '',
       'is_automatic' => false,
       'message'      => '',
   );
   tgmpa( $plugins, $config );
}

Now the user will be able to install Visual Composer straight from the notice by clicking on “Begin installing plugin’. Then click on “Begin activating plugin” and then – activate.
If a user deactivates the plugin, he’ll see the notice again.

Now, once a person installs your theme, he’ll see this notice and will be able to install the plugin straight away by clicking on “Begin installing plugin”.

Begin installing plugin

Then click on “Begin activating plugin” and – activate.

Begin activating plugin

If the user dismisses the notice at the start – then the message will still be visible in Appearance, Install plugins section.

Install plugins dashboard

If the user deactivates Visual Composer, he’ll see the notice again.

Need further help in this process? Join our official slack channel at slack.visualcomposer.io or contact us directly.