Language switcher options for WordPress

WP Provider Translate gives your visitors a language switcher as soon as you add a language: a small floating switcher at the bottom of the screen. You can also place the switcher yourself, as a block, a shortcode, a menu item or an Elementor widget, and choose whether it shows flags, language names or codes. Each switcher can be a dropdown or a list.

The floating language switcher

Out of the box, a dropdown switcher sits at the bottom right of every page. It is there so visitors can always change language, even before you decide where a switcher belongs on your site.

It steps aside by itself. The floating switcher only shows when no other switcher is on the page. Once you add one to your menu, header or footer, the floating one disappears.
Move it or switch it off under WP Provider Translate → Settings → Languages → Language picker: choose Bottom right or Bottom left, or untick Show a floating picker when no other picker is on the page. Click Save Changes.
It works without JavaScript. The dropdown is built into the browser, so it keeps working with script optimisers and caching plugins, and it is left out when someone prints the page.

Flags, names or codes

Under WP Provider Translate → Settings → Languages → Language picker you choose how every switcher shows a language, unless a switcher sets its own:

Show flags. Tick it to show a small flag before each language.
Full name (Nederlands), Code (NL) or Flag only. Language names are always written in their own language (Deutsch, Français), so visitors recognise their own.

Which flag a language gets:

Your site’s own language gets the flag of the country in your WordPress site language, when it has one. A site in English (United States) shows the US flag, a site in Dutch (Belgium) the Belgian flag.
Other languages get the flag most people expect, such as the British flag for English and the Brazilian flag for Portuguese (Brasil).

With Flag only, the language name is still there for screen readers.

Language switcher block

On a block theme, or anywhere you build with blocks, use the Language picker block.

Open the page, template or template part (for example your header) in the block editor or the Site Editor.
Add a block and search for Language picker.
In the block settings on the right, under Display, choose:
- Style: Dropdown, Horizontal or Vertical.
- Flags: As in the settings, Show or Hide.
- Text: As in the settings, Language name, Language code or None (flag only).
- Hide the current language: list only the other languages.
Use the block toolbar to align it left, centre or right, and save.

Language switcher shortcode

Anywhere that accepts shortcodes (a classic widget, a text block, a page builder’s shortcode element), add:

[wpprovider_language_picker]

That gives a dropdown with the settings from WP Provider Translate → Settings. Add options to change it:

Option	Values	What it does
`style`	`dropdown`, `inline`, `vertical`	A dropdown, a horizontal list or a vertical list
`flags`	`yes`, `no`	Show or hide flags
`name`	`name`, `code`, `none`	Language name, code, or no text (flag only)
`hide_current`	`yes`	Leave the current language out

For example, a row of flags without text for the footer:

[wpprovider_language_picker style="inline" flags="yes" name="none"]

The block, the shortcode and the Elementor widget all offer the same three styles:

Dropdown. Shows the current language; a click opens the others. Takes the least space, good for headers.
Horizontal. All languages side by side, good for a footer or a top bar.
Vertical. All languages underneath each other, good for a sidebar or a mobile menu.

With Hide the current language, a site with two languages shows a single link to the other one.

If you build with Elementor, use the Language picker widget.

Edit the page or your header template with Elementor.
Search the widgets for Language picker (or “language”, “switcher”) and drag it in.
On the Content tab, set Layout (Dropdown, Horizontal or Vertical), Flags, Text, Hide the current language and Alignment.
On the Style tab, match it to your design: typography, Text color, Hover color, Current language color and Flag width. A dropdown also has Dropdown background, Dropdown hover background and Dropdown border color; a list has Space between languages.
Click Publish or Update.

To put the switcher in your menu bar like any other menu link, see Language switcher in the menu.

Good to know

The order of the languages is the order of your list under Translate into. See Choose your languages.
Only languages the page exists in are offered. A page that is not available in a language yet, or that you keep out of a language, leaves that language out of the switcher on that page. See How translation runs.
The switcher itself is never translated. Language names stay in their own language on every page.
Every link in the switcher points to the same page in the other language, not to the home page, so visitors keep their place.
With a domain per language, the switcher links to the other domain and takes the shopping cart along. See A domain per language.

Troubleshooting

There are two switchers on my page. The floating one hides when your own switcher is built into the page before it. A switcher that a script or popup adds after the page has loaded is not seen in time. Untick Show a floating picker when no other picker is on the page in that case.
The switcher doesn’t show at all. It needs at least one language under Translate into. If you use a caching plugin, clear its cache after changing switcher settings. See Caching plugins.
The flags are huge or missing. Some themes give every image a fixed size. Update WP Provider Translate first; in Elementor, set Flag width on the widget.
The shortcode shows as text. Check the spelling and the straight quotes around option values. Some places, like a plain text field in a theme option, don’t run shortcodes; use the block or the widget there.

For developers

The wppt_flag filter changes the flag of a language. It receives the country code of the flag (such as gb) and the language code (such as en), and returns a country code. See Developer filters and actions.
For your own CSS, the switcher has the class wppt-picker, plus wppt-picker--dropdown, wppt-picker--inline or wppt-picker--vertical; the floating one adds wppt-picker--floating. Flags have the class wppt-flag, and the current language’s link has aria-current="true".
Switcher links carry hreflang and lang attributes.