How do you choose which flag to show for languages like French, Chinese, Spanish and even English? How do you distinguish between Canadian and European French? In this post, we’ll explain the difference between languages and countries and how to choose the flags and locale for your site’s languages.
WPML allows you to add languages to your WordPress site. To make it easy for visitors to pick their language, most sites show a language switcher which has the language names and flags. However, many languages are used in different countries. So, no matter what default WPML chooses, some sites need to show different flags.
Choosing the Flag for Your Site’s Languages
WPML lets you choose which flag to show for any language. You can use one of the hundreds of flags that come bundled with WPML or upload any flag file that you prefer.
I’ve created an example site with three languages. By default, for English I get the British flag.
Clik here to view.
To do this, go to WPML->Languages and click on Edit languages.
Clik here to view.
When you switch to custom flag, you will need to upload a flag file. WPML’s flags are 18×12 pixels. You will find a library of flag files in WPML’s installation directory, under the path:
sitepress-multilingual-cms/res/flags
Navigate with a file browser to that folder and pick the flag that you prefer. For example, I’ll choose the us.png file.
Clik here to view.
And, the flag is updated in the language switcher in site’s front-end.
Clik here to view.
Adding Custom Languages for Countries that Speak the Same Language
Now that we know how to select the flag, let’s look at sites that need the same language for different countries. For example, let’s say that you’re creating a site for both Canadian and European French. The different content in your site is not mere translation, but different offers for different countries.
You would need to have languages like:
- Canada
- France
You can see that these are not really «languages» but rather countries. In WPML, we’ll add them as different languages.
To do this, return to WPML->Languages and click on Edit languages. This time, instead of editing a language, we’ll add a new language.
Clik here to view.
When I add my custom language, I need to enter several fields:
- Language name – this is where I’ll set Canada.
- Code – this is the value that WPML will set in the database for content in that language. Once set, you cannot change this value.
- Translation – this is how this language will be called in the site’s other languages.
- Flag – I’ll upload a custom flag, like we just saw in the previous section of this tutorial.
- Locale – this is the code that identifies the translations that WordPress will load for this language (more about this in a minute).
- Hreflang – this is the code that will appear in the internal language links that WPML produces for Google. Use lower case.
Everything is easy in this table except the ‘locale’. How are you to guess which locales are available for different combinations of countries and languages?
No worries. Head over to the WordPress localization project, where you will see all the translations that are currently available for WordPress itself.
Clik here to view.
- Use the search tool to filter by country
- See the available languages in that country
- Copy the locale of the language that you need
- Paste it into WPML’s Locale input when you create/edit a language
And, you are all set. Now you have a site with different variants for French, one for France and one for Canada.