Skip Navigation
Home » WPML Documentation » Getting Started Guide » Language Setup » How to Add a Language Switcher to Your WordPress Site » Using Custom Flags in WPML

Using Custom Flags in WPML

Dario
Updated
March 1, 2023

Want to customize the language switcher of your WPML plugin to match your website’s design? One way is to use custom flags. Although WPML already provides flags for many languages, you can upload your own flag images as well.

WPML comes with built-in flags for all 65 pre-configured languages, plus additional flags for popular country-specific language variants (such as Canadian French, Brazilian Portuguese, or Swiss German). These flags are available as either SVG or PNG files at the following file path:

../wp-content/plugins/sitepress-multilingual-cms/res/flags

WPML’s flags library

However, you may want to use a different style of flag that better matches your site. Or, you may want to add a flag for a language WPML doesn’t have pre-configured. In these cases, you can upload a custom flag.

Custom Flag Requirements

You can upload a flag as a PNG, JPG, GIF, or SVG file.

Please note that WordPress does not natively support SVG uploads. This means you need a different plugin to be able to upload SVG files to your WordPress site.

You will also need to be sure that the SVG source file is 18 x 12 pixels if you want it to look right alongside WPML’s default flags. The viewBox can be any proportional value, for example:

<svg xmlns="http://www.w3.org/2000/svg" width="18" height="12" fill="none" viewBox="0 0 36 24">...</svg>

WPML automatically resizes PNG and JPG flag files to 18 x 12 pixels for consistency.

How to Add a Custom Flag

Go to WPML → Languages and click Edit languages. This is also where you can add a custom language to your site.

Editing your site’s languages

For each language, choose to display a Custom flag, then click Choose File.

Choosing a file for a custom flag

Upload your flag file and click Save to add the flag to your language switcher.

Adjusting the Flag Size

You can choose a custom size for all the flags in a language switcher when you add or edit the language switcher.

Adjusting the flag size for a language switcher

If you use the language switcher block, you can resize your flag from the block settings.

Resizing a flag using the language switcher block

If you do not set a specific size for your flags, PNG and JPG flags are automatically resized to 18×12 pixels for consistency. You might not want to resize your flags if they are handled by CSS or JavaScript, or if you want to display an animated GIF.

In such cases, you can turn off automatic resizing by adding the following to your wp-config.php file:

define( 'WPML_DO_NOT_RESIZE_UPLOADED_FLAGS', true );