Skip Navigation
April 15, 2024

WPML lets you add a language switcher to your website’s menu, as a widget, or in the footer. You can also include flags, display languages in their native names, and add custom styling.

A language switcher allows visitors to select the language in which they want to read your content. Depending on your preference, you can display it in different locations on your website.

For example, you can place your language switcher as a menu, in the header section.

Language switcher in the header section
Language switcher in the header section

Or, if you don’t want to edit your header’s design, you can place the language switcher at the bottom of your footer section. 

Language switcher in the footer section
Language switcher in the footer section

With WPML, you can easily add language switchers on your own site like those featured above. To do this:

  1. Decide where you want to display the language switcher
  2. Add a flag to your language switcher (or not)
  3. Style your language switcher

Remember to translate your website

Adding a language switcher doesn’t automatically make your website available in more languages. To offer additional languages on your site, you first need to translate it.
Learn how you can easily translate your website with WPML.

1. Decide Where To Display the 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.

Adding or editing a language switcher

Add a Language Switcher Above or Below Post Content

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 WPMLLanguages and scroll down to Links to translation of posts. Check the box to see all the options.

Enabling links to translation of posts

Add a Language Switcher Block to a Template, Template Part, or Navigation

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.

Adding a language switcher block to the site template

In order for the language switcher block to appear in your secondary languages, you need to translate it.

  1. Go to WPMLTranslation Management.
  2. Search for the part of your site you added the language switcher block to (template, template part, site navigation, etc.).
  3. Send it for translation.
Translating the template part that contains the language switcher block
  1. If you translate it using the Advanced Translation Editor, copy the language switcher fields to the secondary language and click Complete.
Copying the language switcher field from the default language

The language switcher will now be visible in your secondary language.

2. Add a Flag to Your Language Switcher (Or Not)

To add or remove a flag in the language switcher block, use the toggle in language switcher Display settings in the sidebar.

Adding a flag to the language switcher block

To add or remove a flag in another location, go to WPMLLanguages and edit the language switcher you want to change. Then check or uncheck the flag option.

Adding a flag to a language switcher in a footer

WPML includes at least one country’s flag for each pre-configured language. By default, flags use SVG format. However, you can display flags using PNG instead by changing the setting in WPML Languages.

Choosing the flag file format in WPMLLanguages

You can also upload your own custom flags. Read more about how to add custom language flags to your language switcher.

3. Style 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 languages in their native names, and setting color preferences.

Menu language switcher on the front-end

Global Settings

You can set global settings for all language switchers on your site, such as the order of languages. To do this, go to WPMLLanguages and scroll to Language switcher options. These options will apply to all language switchers on your site.

The main Language switcher options section

Settings Per Language Switcher

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.

Language switcher block settings

For other language switchers, go to WPMLLanguages and edit the specific language switcher you want to adjust.

Settings for footer language switcher

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.

Custom Language Switchers

By default, WPML uses your theme’s CSS rules to fit the language switcher in your website’s design and style. If you need more customization options, you can create custom language switchers using PHP API. This approach requires PHP knowledge.

A custom floating language switcher

Troubleshooting Language Switchers

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.

Don’t Have WPML Yet?

WPML can easily help you add and customize a language switcher on your website. To get started, visit our pricing page to find the right plan for your site. 

To learn more about building a multilingual website with WPML, visit our guide on how to translate your website with WPML.