Wordpress WPML Language Switcher Options


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 sites 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

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 sectionSettings 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 thats 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 boxLets 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 switcherEach 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 switcherLive 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 themes CSS rules.
Menu language switcher on the front-endCustomizing 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 themeYou can easily fix this by using the wpml-ls-menu-item CSS class.
1
2
3
li.wpml-ls-menu-item ul li a {
width: auto;
}


No need to edit your themes 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 CSSDisplaying WPMLs language switchers in custom locations

Sometimes, you need to add a language switcher in a specific custom location. You can do so inside your themes 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 themes 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 switcherThere 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.


Language Setup
  • Pre-configured languages
  • Language URL Options
  • Hiding languages on the front-end
  • Language Switcher Options
    • How to fix styling and CSS issues for the language switchers

  • Designing Custom Language Switchers Using Template Files
  • Custom Language Switcher
  • WPMLs Credit Footer
  • Automatic Redirect Based on Browser Language
    • How Browser Language Redirect Affects Google Indexing

  • Language Directory for the Default Language
  • Setting the WordPress Administration Language
  • Enabling language cookie to support AJAX filtering
  • Passing session data between languages in domains
  • Frequent issues
  • Cannot Activate Language Directories