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.

I want to select the US flag for English, instead of the British flag

To do this, go to WPML->Languages and click on Edit languages.

WPML’s languages editor

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.

WPML’s flags library

And, the flag is updated in the language switcher in site’s front-end.

The front-end language switcher now shows the US flag

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.

Adding a custom language

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.

The WordPress localization project
  1. Use the search tool to filter by country
  2. See the available languages in that country
  3. Copy the locale of the language that you need
  4. 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.

16 Responses to “Choosing the Flags for Your Site’s Languages”

  1. Hello Amir,

    You read my mind in writing about language flags! Thank you for the article.

    I see the Encode URLs box, and was wondering if that is a way to serve the flags from a cdn?

    Can sitepress-multilingual-cms/ assets be served from a custom cdn?

    Thank you and Happy New Year!

  2. The flag I choose doesn’t rest. the default flag return.
    I do : WPML->Languages and click on Edit languages
    Navigate with a file browser to that folder and pick the flag to choose the us.png file (on my pc).
    I click on ”Appliquer”
    but the ”Drapeau personnalisé” didn’t selected. It’s return to ”Drapeau WPML”

    How I can change the flag ?

  3. Hi there,
    What about not using flags for languages but initials, something like: EN | FR ?
    I’m not sure at which documentation to find that??

    Thank you

      • I’d like to add a +1 vote to ‘language initials’ in addition to flags and language names. In about 80% of our multi language sites, we use the initials instead of flags, but this requires a custom language switcher every time.

        • Hi @Amir,
          Thank you for the documentation tip! I now have to go and discover how to do that. Hopefully, it won’t be too technical!

          Kristof..thank you for pointing that out! It is true that in most upscale, (or more custom-made), websites, you never see those flags – they’re a think of the past mostly in my eyes.
          It would be good if future updates, (not too far in the future), came with such an option as well.
          I found, quite hard to set up WMPL and get it going for the 1st time, let alone getting past creating a custom language switcher..!

          Thank you..

  4. Amir thanks for the article! I will for sure incorporate custom flags into my Canadian site! I’ll let you know how it goes 🙂

  5. Amir, thanks for the timely post.

    We had to perform similar tasks for our Duke University client. The dukehello.com website is a community resource for African refugees in North Carolina. We set up a custom language for Swahili. Since Swahili is a language and not a country, I was unsure at first what flag would be appropriate. Then I found a flag for the Swahili language and used that. Also, our client wanted a US flag for English, not the UK flag. So, we made that change, too.

    The website has MP4 videos with VTT file subtitles in English, French, and Swahili. I used WPML to change subtitle language defaults based on the language switcher.

    Keep up the good work.

    Jim

  6. This feature has not worked for years, I tried again and it still does not work. Once you save, nothing happens. I cleared the browser cache several times and it still shows the default flag.

    • Can you create a support ticket in our technical forum? Our supporters will help you find why it’s not working for you, so you can use different flags for your languages.

    • In order to change the sizes of the flags’ images, you will need to add some custom CSS probably. If you need help with that please open t ticket in our support forum and will be happy to help you with that.