A language switcher allows visitors to select the language in which they want to read your content. WPML lets you add a language switcher in different ways: in a menu, as a widget, or in the site’s footer. You can also use it to show links above or below your posts, offering them in other languages.
With WPML, you can easily add language switchers on your own site like those featured above. To do this:
- Decide where you want to display the language switcher
- Add a flag to your language switcher (or not)
- Style your language switcher
WPML adds a language switcher to your site’s footer by default. However, there are many other places on your site where you can add a language switcher:
- Menus and widgets
- Above or below post content
- Templates, template parts, and site navigation
Need to add a language switcher to template files using PHP or a page or post using shortcodes? Read more about adding language switchers to custom locations.
To add and customize language switchers to these specific areas, go to WPML → Languages in the WordPress dashboard.
From here, you can add new language switchers to the menu or a widget, or you can edit the default language switcher in the footer.
You can also link to translations of a post or page from above or below the post content. This displays the other available translations as a link.
To enable this, go to WPML → Languages and scroll down to Links to translation of posts. Check the box to see all the options.
If you use WordPress’s Site Editor (formerly known as Full Site Editing), you can add a language switcher to any template or template part using the WPML Language Switcher block.
In order for the language switcher block to appear in your secondary languages, you need to translate it.
- Go to WPML → Translation Management.
- Search for the part of your site you added the language switcher blog to (template, template part, site navigation, etc.).
- Send it for translation.
- If you translate it using the Advanced Translation Editor, copy the language switcher fields to the secondary language and click Complete.
The language switcher will now be visible in your secondary language.
Using country flags in your language switcher can be complicated. On one hand, it makes your language switcher more noticeable, and it works easily in any language. On the other hand, many countries often speak the same language, and the flag you choose to display may confuse or even offend some site visitors.
Whatever you choose, WPML makes it easy to display flags – or not – in your language switcher.
To add or remove a flag in the language switcher block, use the toggle in language switcher Display settings in the sidebar.
To add or remove a flag in another location, go to WPML → Languages and edit the language switcher you want to change. Then check or uncheck the flag option.
WPML includes at least one country’s flag for each pre-configured language. WPML displays flags as SVG files by default. You can display PNG flags instead by changing the setting in WPML → Languages.
You can also upload your own custom flags. Read more about how to add custom language flags to your language switcher.
In addition to showing a flag or not, you can customize other aspects of your language switcher. This includes setting the order of languages, displaying it in the native language and/or the current language, and setting color preferences.
By default, WPML does not render language switchers with its own HTML. Instead, it injects the language switcher elements into the menu structure. This way, your theme renders the language switcher just like other menu items.
Basically, this allows the language switcher to look better on your site, taking on the look of your theme’s CSS rules.
You can set global settings for all language switchers on your site, such as the order of languages. To do this, go to WPML → Languages and scroll to Language switcher options. These options will apply to all language switchers on your site.
You can also specify settings for each individual language switcher. This allows you full and independent control over what it includes and how it looks. The options you apply to language switchers in each location only apply to that language switcher.
For example, you can display only flags in the menu, but flags and the language name in the footer.
To change these settings in the language switcher block, select the block and adjust the settings in the sidebar.
For other language switchers, go to WPML → Languages and edit the specific language switcher you want to adjust.
As you change the settings of the language switcher, the preview updates. The preview is a “schematic.” It does not load the front-end CSS, so the actual language switcher will be styled differently. However, it does show you the effect of the different options, color settings, order, and content.
If you need more customization options, you can create custom language switchers using PHP API. This approach requires PHP knowledge.
Language switchers added using WPML look good on most themes. If the language switcher is not displaying correctly with your theme, there could be a CSS conflict. Read our guide on fixing styling issues for language switchers.