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
Step 3: Create multi-language content
Each row will now have a language dropdown
You will need to add an extra class called language
This is what the full setup looks like for 3 manually translated languages + 2 auto-translated languages
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
languageto 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:
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
Github:
SEE PLUGIN ON GITHUB
Hey Mike,
Thank you for the awesome multilang plugin! I have one question, and I cannot find it in the editor or settings.. how do I get the Change language button on my site to the top of the page?
Kind regards,
Nadine
Nadine, thanks for the kind words!
There is no setting for moving the language switcher to the top of the page. There are two ways you can currently do it:
1) Use JavaScript to move the language switcher
2) Turn off the language switcher in the settings and add your own in your theme either in the PHP or with JS (see: Step 4: Add language toggle to your theme)
-Mike
Hi Mike,
Thank you, it worked. Another question, is there a way to set the default language?
Kind regards,
Nadine
Nadine, I just released version 2.1 of the plugin which has a new plugin setting for a default language.
Great! Works like a charm. Thank you
Is there a way of translating menus, or content only?
You would need to manually add the translated menus into the header of the theme. As long as you mark them with the proper language, you can use the language switcher to switch between them.
The way I would do it is to create a menu area for each language. Then create a menu in the language you want and place it into the respective menu area. Then display all of those menu areas in the same place as you r main menu. Specify the
data-langattribute to each respective menu area.