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 will work and look good with any theme.

Your site’s language switchers are added and customized on the WPML -> Languages page.

Global language switcher options

The first section related to language switchers is the one for the global settings, like the order of the languages. Please note that these options are applied to all language switchers you add.

The main Language switcher options section

The main Language switcher options section

Settings for preserving URL arguments

Language switcher options section features the Preserve URL arguments option.

URL arguments might be needed by some plugins and you may want to keep them when switching languages – that’s the purpose of this feature. The arguments you want to be preserved should be added here as a comma-separated list.

"Preserve URL arguments" dialog box

“Preserve URL arguments” dialog box

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

Separate sections for different kinds of language switchers

Each kind of a language switcher has its own separate section. Options selected for different kinds of language switchers are applied to each switcher, respectively. The Languages page shows a working preview for the different language switchers active on your site, as displayed in the following image.

Separate sections for each type of a language switcher

Separate sections for each type of a language switcher

Each section has its own “add” button (to add another language switcher of that kind), a “pencil” icon to edit the existing switcher, and a “trash” icon.

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 menu language switcher.

Settings for menu language switcher

Settings for menu language switcher

Live preview showing language switcher options

As you change the settings of the language switcher, the preview updates. The preview is “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

Since version 3.6, 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.

Menu language switcher on the front-end

Menu language switcher on the front-end

Customizing menu language switchers

Specifically for menu language switchers, WPML version 3.6 added a new 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.

Flags-only language switcher with Twenty Sixteen theme

Flags-only language switcher with Twenty Sixteen theme

You can easily fix this by using the wpml-ls-menu-item CSS class.

li.wpml-ls-menu-item ul li a {
width: auto;
}

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.

Menu language switcher after applying the custom CSS

Menu language switcher after applying the custom CSS

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.

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.

A custom language switcher

A custom language switcher

There are two ways for you to do this: using Twig templates or using PHP API.

Since version 3.6, WPML features support for creating custom language switchers using Twig templates. This is the preferred and simpler approach and does not include any PHP programming. The best thing about using Twig templates is that you can easily include them in themes and they will appear as options for users.

The other way is to create custom language switchers using PHP API. This approach requires PHP knowledge.