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.
Language switchers added using WPML look good on most themes. If the language switcher is not displaying right with your theme, there could be a CSS conflict. Read our guide on fixing styling issues for language switchers.
To add and customize language switchers, go to WPML → Languages in the WordPress dashboard.
Global Language Switcher Options
Language switcher options are global settings, such as the order of the languages. Please note that these options are applied to all language switchers you add.
Settings for Preserving URL Arguments
Language switcher options section features the Preserve URL arguments option.
Some plugins use URL arguments, and you may want to keep them when switching languages – that’s the purpose of this feature. The arguments you want to preserve should be added here as a comma-separated list.
Let’s consider the following example of using this feature:
- Suppose you add the following arguments: bar, foo.
- You translate the “Hello world” post.
- In the front-end, open the “Hello world” post and add this at the end of the URL: ?bar=10&foo=100&lost=1000 (notice that we added the two arguments + the lost one)
- Switch the language – the URL will end only with ?bar=10&foo=100
Configuring Language Switchers
You can add language switchers to 3 different places on your site: in the menu, in a widget, or in the footer. 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.
When you configure a language switcher, you can see a working preview of it, as displayed in the following image.
Each section has its own button to Add a new language switcher, a Pencil icon to edit the existing switcher, and a Trash icon to delete a language switcher.
Full Control Over Each Language Switcher
Each language switcher type has its own settings. This allows you full and independent control over what it includes and how it looks.
For example, the following image displays a dialog box with settings for the footer language switcher.
Live Preview Showing Language Switcher Options
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 (it is not a good idea to load in the WordPress admin), 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.
HTML Structure of Menu Language Switchers
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.
Customizing Menu Language Switchers
Specifically for menu language switchers, WPML uses the CSS class wpml-ls-menu-item. This simplifies the customization of your menu switcher items (links).
For example, if your site uses the Twenty Sixteen theme and your menu switcher displays only the languages’ flags, the front-end rendering will be odd. As you can see in the following image, the width of the menu items is oddly large.
You can easily fix this by using the wpml-ls-menu-item CSS class.
li.wpml-ls-menu-item ul li a {
width: auto;
}
There is no need to edit your theme’s CSS file, simply add custom rules to the Additional CSS section under the Language switcher options.
Now, the width of the list items is improved, as displayed in the following image.
Customizing Language Switcher Flags
You can configure your language switcher to display a country flag. WPML provides a set of built-in flags. If you want to upload a custom flag, you can do so by going to WPML → Languages and clicking Edit Languages.
By default, flags are automatically resized to 18×12 pixels for consistency. Sometimes, you might not want to resize your flags, perhaps because they are handled by CSS or JavaScript or 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 );
You can also choose a custom size for all the flags in a language switcher when you add or edit the language switcher.
Displaying WPML’s Language Switchers in Custom Locations
Sometimes, you need to add a language switcher in a specific custom location. You can do so inside your theme’s PHP templates or directly inside pages and posts.
Note that the global settings for language switchers in custom locations are set in the same place as those for the other switchers on your site – in the Language switcher options section, on the Languages page.
Using PHP Actions
To display the language switcher inside your theme’s PHP template files, you can use the following two actions.
do_action('wpml_add_language_selector');– outputs the language switcher based on the options set in the Custom Language Switchers section.do_action( 'wpml_footer_language_selector');– outputs the language switcher based on the options set in the Footer language switcher section, even if the Show language switcher in footer option is disabled.
Using WPML Shortcodes
Inside posts and pages, you can use one of the two WPML shortcodes below. Again, the difference lies in which language switcher is displayed.
- [wpml_language_selector_widget] – outputs the language switcher based on the options set in the Custom Language Switchers section.
- [wpml_language_selector_footer] – outputs the language switcher based on the options set in the Footer language switcher section, even if the Show language switcher in footer option is disabled.
Using a Shortcode Block
You can add the language switcher to your site using a Shortcode block. You can use the [wpml_language_selector_widget] or [wpml_language_selector_footer] shortcode.
You can use the [wpml_language_selector_footer] shortcode even if the Show language switcher in footer option is disabled.
If you want to use the [wpml_language_selector_widget] shortcode, you must first enable the Custom Language Switchers option on the WPML → Languages page.
Your Own Custom Language Switchers
If needed, you can also create your own unique language switcher. A custom language switcher will let you include all the options you want in whichever way you prefer. Often, people use it to display their own language flags or to order languages in special ways.
You can create custom language switchers using PHP API. This approach requires PHP knowledge.