In order to add multi-language options to your website we recommend purchasing WPML (WordPress Multi-Lingual Plugin). WPML makes it easy to build multilingual sites and run them. It’s powerful enough for corporate sites, yet simple for blogs. WPML is compatible with the Divi Theme and is quick to the set up and easy to use.
Installing and configuring WPML
The first time you use WPML, you need to manually download it and install. Then, register to receive automated updates to future versions.
1. Log in to your WPML.org account.
2. Go to the Downloads section.
![](https://www.365villas.com/kb/wp-content/uploads/2020/11/wpml-account-download-links-1024x881-1.png)
3. Download the main WPML components: WPML core plugin, String Translation, Translation Management, and Media Translation. You will receive a ZIP file for each one of WPML’s components.
![](https://www.365villas.com/kb/wp-content/uploads/2020/12/wpml-org-downloads-page-1024x881.png)
4. Log into your site and in the WordPress admin, go to the Plugins page and click Add New. On the Add Plugins page click Upload Plugin, select the ZIP files that you downloaded and click Install Now.
Once installed click Activate.
Getting started guide
When you first activate WPML a setup wizard will help you specify the essential settings required to prepare your site for multilingual content.
Follow the wizard to:
- Choose your site’s languages
- Customize and add language switchers to your site
- Register WPML
That’s it! Your site is now ready to translate content.
Site Languages
The languages section allows you to turn a WordPress site multilingual.
To manage languages, go to WPML → Languages.
When you configure WPML for the first time, you need to choose the language of existing content. Then, add more languages to the site. You can always go back to add / remove languages.
If you need to use a language that doesn’t appear on the list, click on Edit languages and create it.
WPML lets you choose how to organize contents in different languages. We would recommend that you set up your languages as the following;
- Different languages in directories – like wpml.org/es/ for Spanish and wpml.org/de/ for German.
Language switchers
To let visitors select their language, you can add a language switcher to your theme.
WPML’s standard language switchers include a drop-down languages list, a list of languages for the site’s footer and a language switcher in the menu. However it doesn’t know how the property pages work at a technical level so won’t be able to generate the URLs correctly.
365villas Language Switcher
If your main menu is called “primary-menu” then the 365villas plugin will automatically add a language switcher to the menu. This will work correctly with the property pages.
If you have a different main menu or you have a more custom layout there is a shortcode available that outputs a simple language switcher eg. “EN | DE | ES”. The shortcode is:
[365-villas-language-switcher]
If you would like to override the layout of the language switcher you can create a custom template for it.
To do this you need to create a couple of folders in your site theme folder/child theme folder: “365villas/templates”. Then copy the default language switcher template from from the plugin: “wp-content/plugins/villas-365/templates/villas-365-language-switcher.php” to this folder. Now you can edit your copy of the language switcher template to create your custom layout.
The language switcher also has CSS classes so you can style it as needed.
If the shortcode does not meet your needs or you can’t use it then you can also call the following function directly to get all the different language URLs for the current page. This will allow you to build the language switcher fully yourself.
Helpers365::GetPageTranslationURLs()
This will return an array with the following structure:
$languageUrls = [ "LANGUAGE CODE" => [ "active" => "IS CURRENT LANGUAGE", "native_name" => "NATIVE NAME", "url" => "PAGE URL" ], "LANGUAGE CODE" => [ "active" => "IS CURRENT LANGUAGE", "native_name" => "NATIVE NAME", "url" => "PAGE URL" ] ];
“language code” is the short language code. eg. en, de, es
“active” true or false if we are on the current language.
“native_name” the language name in the currently selected language.
“url” the URL for the current page for the language.
WPML Language Switcher
You can still use the built in WPML language switcher instead of the custom 365villas language switcher however it will not have the correct URL for the property pages.
![](https://www.365villas.com/kb/wp-content/uploads/2020/12/options-for-language-switcher.jpg)
We would recommend adding the language switcher to your existing main (primary) menu. To get started click Add a new language switcher to a menu. The dialogue box below will allow you to add a language switcher to any navigation menu in your website. We would recommend adding your language switcher to the Main (Primary) Menu.
You also have options to select to style your language switcher to your requirements.
![](https://www.365villas.com/kb/wp-content/uploads/2020/12/Screenshot-2020-12-08-at-16.16.16.png)
Once finished click Save. This will add your language switcher to your chosen menu.
![](https://www.365villas.com/kb/wp-content/uploads/2020/12/Screenshot-2020-12-08-at-16.15.58.png)
To learn more about language configuration click here
How to translate pages and posts
Translating page content with WPML is a simple process. Navigate to the Pages or Posts section and click the plus and pencil icons, next to content you can translate. You will see these icons in the list of pages and in the “Language” box when editing content.
![](https://www.365villas.com/kb/wp-content/uploads/2020/12/wpml-translation-icons.png)
![](https://www.365villas.com/kb/wp-content/uploads/2020/12/wpml-language-box.png)
This is what the different icons mean:
![](https://www.365villas.com/kb/wp-content/uploads/2020/12/Screenshot-2020-12-08-at-16.28.18.png)
Once you have clicked either plus or pencil icon next to the language you wish to add a translation for, you will see a screen similar to the one below.
![](https://www.365villas.com/kb/wp-content/uploads/2020/12/Screenshot-2020-12-08-at-16.38.42-1024x507.png)
All the fields on the left contain your original content in the default language, while on the right will be your translations. You will need to either manually translate the content yourself or use something like Google Translate.
Once you have filled all of the fields and the progress bar is at 100% complete, you can then click Save & Close. Your translated page will be ready to view on the front end.
If you have incomplete translations you will not be able to see your translated page on the front of your website.
Note: If you would prefer not to write your own translations you can get more information here on how to send your content away for translation by a professional.
Translating Menus
WPML lets you translate WordPress menus and create different menus per language. You can translate menus manually, or have WPML synchronize menu content.
See the instructions in the following video, or read the details underneath.
Option 1 – Translating Menus Manually
Go to Appearance → Menus.
![](https://www.365villas.com/kb/wp-content/uploads/2020/12/menu-with-translation-controls-301-1024x634.png)
To translate this menu, click on the + icons next to the other languages. Now, you’re creating a new menu, which will be linked as the translation of this menu.
![](https://www.365villas.com/kb/wp-content/uploads/2020/12/language-controls-for-menu1-1024x621.png)
You can now add pages and categories to the translated menu as you would the default language menu.
Option 2 – Automatic Menus Sync by WPML
The menu sync tool aims to keep your menus in different languages synchronized. It does this by adding, removing, and updating items from the translated menus to match the default language menu.
To use WPML’s menu sync, go to WPML → WP Menus Sync.
WPML will show you the changes it plans to make.
![](https://www.365villas.com/kb/wp-content/uploads/2020/12/menu-sync-1-1.png)
You’ll see which entries will be added or removed from the translated menus. Click on the Sync button to perform the selected operations.
![](https://www.365villas.com/kb/wp-content/uploads/2020/12/menu-sync-2-1.png)
Anything you add manually to the translated menus will be preserved throughout WPML sync operation.
Translate Custom Links
If you do not have the WPML String Translation add-on, you can manually edit custom links and their labels in the translated menus.
If you have the WPML String Translation add-on active, you can take use it to translate your menu items by following these steps:
- After syncing menus, go to the WPML → WP Menus Sync page again.
- Find the link at the bottom to translate these custom menu links and labels on the WPML → String Translation page.
- Go to the WPML → WP Menus Sync page and run Sync one more time to update translated menu links and labels.
![](https://www.365villas.com/kb/wp-content/uploads/2020/12/menu-sync-3-1.png)
![](https://www.365villas.com/kb/wp-content/uploads/2020/12/menu-sync-4-1.png)
![](https://www.365villas.com/kb/wp-content/uploads/2020/12/menu-sync-5.png)