How to integrate Visual Composer Free version 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 WordPress 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, I'll go through the most basic way of adding Visual Composer to a theme. In this example, I'll use the Twenty Twenty theme. 

So, let's do it by first things first:

  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;


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, in the require_once statement section, change the file path to 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(
           'name'      => 'Visual Composer Website Builder',
           'slug'      => 'visualcomposer',
           'required'  => false,
This will download the Visual Composer Website Builder plugin directly from 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(
           '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 users 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 the users deactivate the plugin, they will see the notice again.

Now, once your theme has been installed, the users will see this notice and will be able to install the plugin straight away by clicking on “Begin installing the plugin”.

Begin installing plugin

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

Begin activating plugin

If the users dismiss the notice at the start - then the message will still be visible in the Appearance, Install plugins section.

Install plugins dashboard

If the users deactivate Visual Composer, he'll see the notice again.

Need further help in this process? Join our Facebook community or contact us directly.