Skip to main content

WP Bakery Page Builder 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
allure

Author allure

More posts by allure

Join the discussion 7 Comments

  • Nadine Pulles says:

    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

    • Mike Doubintchik says:

      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

  • Oddbjørn says:

    Is there a way of translating menus, or content only?

    • Mike Doubintchik says:

      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-lang attribute to each respective menu area.

Leave a Reply

Designed by

best down free | web phu nu so | toc dep 2017