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.

Глобальные параметры переключателя языка

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.

Основной раздел параметров переключателя языка
Основной раздел параметров переключателя языка

Основной раздел параметров переключателя языка

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.

Диалоговое окно «Сохранить аргументы URL»
Диалоговое окно «Сохранить аргументы URL»

Let’s consider the following example of using this feature:

  • Suppose you add the following arguments: bar, foo.
  • Диалоговое окно «Сохранить аргументы URL»
  • 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.

Отдельные разделы для каждого типа переключателя языка
Отдельные разделы для каждого типа переключателя языка

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.

Отдельные разделы для различных видов переключателей языка

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.

Настройки переключателя языка в меню
Настройки переключателя языка в меню

Отдельные разделы для каждого типа переключателя языка

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.

Полное управление каждым переключателем языка

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.

Переключатель языка в меню во внешнем интерфейсе
Переключатель языка в меню во внешнем интерфейсе

Динамический просмотр параметров переключателя языка

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.

Переключатель языка только с флажками в теме Twenty Sixteen
Переключатель языка только с флажками в теме Twenty Sixteen

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.

Переключатель языка в меню после применения пользовательского CSS
Переключатель языка в меню после применения пользовательского CSS

Переключатель языка в меню во внешнем интерфейсе

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

  • do_action('wpml_add_language_selector');
  • do_action( 'wpml_footer_language_selector');