Visual Composer Multilanguage Plugin

This is an add-on plugin for WPBakery Visual Composer that adds functionality of a language switcher, making it very easy to create a multi-language site without an additional multi-language or translation plugin. In version 2.0, I’ve also added support for automatic translation using Google Cloud Translate API. Setup walkthrough shown below.

Step 1

Activate the Visual Composer plugin and the Visual Composer Multilanguage Plugin

Step 2: Setup plugin settings

When you activate the plugin you will see a settings page where you can:

  • list all of the language you want supported
  • Activate the language switcher (or implement your own separately)
  • Activate automatic translations
  • Activate styling (for now it’s just to make the language switcher slightly styled)
  • Insert the Google Cloud Translate API Key

Visual Composer Multilanguage Plugin Settings Page

Step 3: Create multi-language content

Each row will now have a language dropdown

Visual Composer Multilanguage Plugin Language Dropdown

You will need to add an extra class called language

Visual Composer Multilanguage Plugin Set Class

This is what the full setup looks like for 3 manually translated languages + 2 auto-translated languages

Visual Composer Multilanguage Plugin Full Setup

Step 3a: Setup Auto Translated content

Setting up content that you want auto-translated is very similar to setting up manually translated content.

  • Add a new row
  • Set the language from the dropdown
  • Add language to the extra class section
  • Add an empty text block into that row
  • The plugin will automatically populate that text block with translated content
    • The first row content and language will be used as the source for the translation
    • The translation happens automatically when the site is loaded, so don’t worry that the text block remains empty
    • In the future, I will provide an option to have the content saved to the database to reduce the amount of requests to the API (reducing price)

Step 4: Add language toggle to your theme

You have two options here. You can either go with the default language switcher I provide in the plugin settings, or you can code your own.

If you are coding your own, then the language toggle can be coded any way you want. Below is an example to get your started with the required data-lang-val attribute. All of the click handlers are built into the plugin if you set that attribute and use the js-lang-option class.

// Add language toggle
$('body').append('<p id="language-selector"><strong>Change Language To: </strong><a href="#" class="js-lang-option" data-lang-val="English">English</a><a href="#" class="js-lang-option" data-lang-val="Russian">Russian</a><a href="#" class="js-lang-option" data-lang-val="Portuguese">Portuguese</a></p>');

And this is how it looks with styling turned on:

Visual Composer Multilanguage Plugin Language Switcher

Step 5: Get Your Google Cloud Translate API Key

There are many guides on this, so I will just give a high level overview of the steps.

  • Go to the Google Cloud Console
  • Make sure you have billing setup or this won’t work
  • Setup a project that will manage this API key
  • Enable the Google Cloud Translate API
  • Go to Credentials and Create credentials. The type of credential you’re creating is API Key
    • You may want to setup some restrictions so that your key can’t be used unlimitedly
  • Put the API Key from step 5 into the plugin settings
DEMO

 

Github:

SEE PLUGIN ON GITHUB

 

Plugin on WordPress.org

SEE PLUGIN ON WORDPRESS.ORG
Mike Doubintchik

Author Mike Doubintchik

More posts by Mike Doubintchik

Leave a Reply