www 101

All you need to know about the internet

Have a Question?

If you have any question you can ask below or enter what you are looking for!

How to Integrate Visual Composer Into Your WordPress Themes

Visual Composer is WordPress plugin which allows pages to be built using a drag-and-drop interface. It gives users the power to layout pages easily, and it gives developers the opportunity to add value to their WordPress themes. In this tutorial we’ll look at the legal and technical implications of integrating Visual Composer into themes, ready for sale.

Visual Composer comes with:

  • Combined front-end and back-end WordPress editor.
  • 40+ built in content elements available out of the box and 200+ add-ons, designed to take your website to the next level.
  • Template library giving WordPress users access to hundreds of high-quality layout templates.
  • Skin builder for rapidly changing the theme’s visual appearance.
  • Advanced grid builder for posts, portfolio, media, and custom post types.

So those are the main features of Visual Composer, all wrapped up, including professional support for $34 (regular license as of December 2016). 

Visual Composer for Theme Developers

Let’s think for a moment about why theme developers should integrate or extend Visual Composer, and what the license implications are for doing so.

Selling WordPress Themes can be a lucrative business, whether you are selling individually or through a marketplace like ThemeForest. As theme authors (Ninzio Themes) we understand the rewards, but know how difficult theme development can be, and what each developer wants from his or her product:

  • Reduced development time and cost.
  • A high quality product.
  • Maximized income from sales
  • Reduced support time
  • Focus on new features and marketing

And you know what? Visual Composer can help you to achieve these goals directly or indirectly. Let me explain how:

Many WordPress themes have built-in Page Builders, and building them became a trend in previous years, but nowadays, with increased competition, it is extremely disadvantageous in terms of costs and time to develop a custom solution for your theme. Instead, Visual Composer can be integrated into your theme, and offered to your buyers for free (free to use with your theme only).

If you browse Themeforest’s top WordPress themes you will notice that almost every theme has Visual Composer integrated within it, even themes that have their own custom built-in page builder. Visual Composer is a well-known product, tested thousands of times by more millions of users and developers. 

ThemeForests top WordPress themes
Top WordPress themes on Themeforest

At this point we’ve made it clear why Visual Composer has become (almost) required knowledge for successful WordPress theme developers, and why you should consider integrating it into your themes.

The next questions are: how do we integrate Visual Composer, and do we have the right to do so?

Theme Integration: Legal Guide

If you’re a theme developer thinking of including Visual Composer in your themes, here’s a quick summary of what’s needed:

“On 22nd of January, 2013 Envato updated their licenses and it is no longer possible to use items from marketplaces within your own items that will be for sale on Envato marketplaces, without a partnership agreement between two authors. In this case between me (Michael M) and you (theme author).” – Michael M

So… if you want to include Visual Composer in your theme you have to write to Michael? Luckily, no. This process has been automated. Let’s examine, step by step, how we can correctly license Visual Composer.

Purchase Extended License

First you will need to buy Visual Composer’s extended license from CodeCanyon. As of the time of writing the price for an extended license is $170.

Visual Composers extended license from CodeCanyon
Visual Composer’s extended license from CodeCanyon

What is an “Extended License”?

The extended license allows usage of the plugin, by you or one client, in a single product which end users can be charged for. The total price includes the item price and a buyer fee.

Essentially, you purchase a developer license to use Visual Composer with one of your themes. Clients who buy that theme are not required to purchase Visual Composer’s regular license. 

What Doesn’t it Cover?

You can’t use one extended license for multiple themes, neither can you share your extended license with someone else. You won’t have to share the license key with your clients, and your clients will not need to activate Visual Composer (the copy that comes with your theme). 

What About Visual Composer Updates? 

One of the most common questions we hear at Ninzio Themes is: “I can’t update Visual Composer”. This isn’t done from the client end; each Visual Composer update should be tested and included in theme updates.

The “In-Stock License”

But wait a minute–WPBakery says “it is no longer possible to use items from marketplaces within your own items that will be for sale on Envato marketplaces”. So how can you include Visual Composer in your themes for sale on ThemeForest if your extended license does not allow that? This is where the special “agreement” between you and Michael M (Visual Composer Plugin Author) comes into play: the “In-Stock License”.

Once you’ve purchased the extended license from CodeCanyon, go to the WPBakery support portal and login with your Envato login.

WPBakery login
WPBakery login screen

A popup message with Authorize WPBakery Support Portal to connect with your account? will appear; click Approve. Next, if you’ve already bought the extended license, WPBakery automatically shows your newly purchased license in the dashboard, so select the license, enter the theme name, and hit Submit. Your extended license will turn into an “In-Stock License”. ThemeForest knows, WPbakery knows, you know–everything is licensed, so you can include the Visual Composer in your theme and sell the theme on ThemeForest.

At this point, we’ve finished looking at the legal aspects of Visual Composer integration, now it is time to examine the technical side.

Theme Integration: Technical Guide

There’s not too much involved with integrating Visual Composer with your theme. We will explain the process using one of our themes, Focuson, as an example.

Focuson
Focuson

Create Required Environment

We need the following things:

  1. A php file with custom elements (your theme shortcodes). In our case this is called “shortcodes.php” which is located in the “ninzio-addons” plugin (a plugin with theme custom functionality). “shortcodes.php” is responsible for the final output of shortcodes. For a guide on how to create WordPress shortcodes, take a look at Rohan Mehta’s tutorial Getting Started With WordPress Shortcodes.
  2. A php file to integrate the Visual Composer. This file contains your custom element options, displayed in the Visual Composer dashboard menu. In our case this is is called “ninzio_vc.php” and is located in theme folder > includes.
  3. A Visual Composer templates folder, which will contain php files of Visual Composer’s default elements, in case you need to overwrite them. This folder must be named “vc_templates”, and all files located inside that folder should be named exactly like those in the Visual Composer “vc_templates” folder. In our case we have four files which are extended with custom structure and functionality: “vc_column.php”, “vc_column_text.php”, “vc_row.php”, and “vc_video.php”. The “vc_templates” folder should be put directly inside your theme root folder theme folder > vc_templates.

Last but not least, as Visual Composer is an external plugin, we need to include it with the theme download pack. Here we have two options: 

  1. Include the “js_composer.zip” file inside the download pack and ask your buyers to install it manually.
  2. Use the TGM Plugin Activator to automate this process. 

We find the second option is the best way to require and recommend plugins for WordPress themes. To do this create a folder “plugins” inside your theme root folder and put the “js_composer.zip” file (the Visual Composer installable file, that you will have downloaded after purchase) in it. To learn more about the TGM Plugin Activator take a look at Barış Ünver’s tutorial Using the TGM Plugin Activation Library in Your Themes

WordPress Theme Check

WordPress Theme Check does not like it when a theme includes packed plugins. It will give a warning like:

REQUIRED: Zip file found. Plugins are not allowed in themes. The zip file found was js_composer.zip

Unfortunately, for this situation there are no official instructions. As including the plugin folder on your server goes against Envato license Plugins in Themes – Theme Check Issue there is no other better way to include the plugin with the theme.

Catch Your Breath

So, for now we have…

  1. …included js_composer.zip inside the theme (fucoson > plugins > js_composer.zip)
  2. …created the custom elements php file (ninzio-addons > shortcodes > shortcodes.php). Remember we have the ninzio-addons plugin with all custom functionality in it, and it comes with the theme.
  3. …created the Visual Composer integration file (focuson > includes > ninzio_vc.php)
  4. …and created the “vc_templates” folder that contains default Visual Composer elements for extending with custom functionality.

Including Required Components

Now let’s complete the integration by including the required components. Open your theme “functions.php” file and, with TGM Plugin Activator, add Visual Composer to the list of required plugins:

Now include the “shortcodes.php” file. As in the case of the Focuson theme this file is located inside the “ninzio-addons” plugin, it is already included when the ninzio-addons plugin is installed.

Next, include the integration file “ninzio_vc.php”. This part is very important, as we need to be sure that the Visual Composer installable file “js_composer.zip” is inside the plugins folder and the Visual Composer plugin is successfully installed and active:

Only after that do we require the integration file “ninzio_vc.php”.

Conclusion

That’s it! Visual Composer is integrated with our theme and we have everything that is required to extend it. In the next tutorial we’ll look at extending and building with Visual Composer. See you there!