Skip to main content

Language Switcher

Language Switcher

With the Clonable Language Switcher, visitors can easily switch between the available languages of your website.

The plugin supports multiple ways to add the language switcher, so it fits almost any WordPress installation.

Placement methods​

The plugin supports three different ways to display the language switcher:

  • Floating widget — a floating switcher on every page.
  • WordPress menu — as a menu item in a classic menu or block theme.
  • Shortcode — placed manually with [clonable_language_switcher].
tip

Preferably use only one method at a time to avoid duplicate language switchers.

Show flag or Show text is required

All three methods require Show flag or Show text to be enabled (see General). When both are off, the language switcher renders nothing.

Floating widget​

The floating switcher is added to every page automatically and requires no changes to your theme or menus.

  1. Open the Language Switcher tab.
  2. Go to the Floating widget section.
  3. Enable Enable floating language switcher and optionally choose a position.
  4. Save the settings.

The switcher becomes immediately visible on all pages.

WordPress menu​

The switcher can be integrated into an existing WordPress menu.

Classic WordPress menus:

  1. Open Appearance → Menus.
  2. Select the desired menu.
  3. Add a Clonable Language Switcher item.
  4. Save the menu.

Block themes (Site Editor):

  1. Open the Site Editor and edit the navigation.
  2. Add a Submenu block.
  3. Give this block the CSS class clonable-language-switcher.

Is the Submenu block not available? Then use a shortcode block with [clonable_language_switcher].

Shortcode​

You can also place the switcher manually using a shortcode:

[clonable_language_switcher]

This is useful when you want to show the switcher on pages, in widgets, within page builders or at a custom position within your theme. On the Language Switcher tab, under General, you'll find a live preview of the shortcode output and a button to copy the shortcode.

Settings​

The settings of the language switcher can be found on the Language Switcher tab, divided over four sections: General, Styling, Floating widget and Languages.

General​

Show flag​

Shows a flag next to the language.

Show text​

Shows the name of the language (for example Nederlands, English, Deutsch) or the custom label you set in the Languages section.

Show country code​

Shows the country code (abbreviation) instead of the language name. Show text must be enabled for this.

Language switcher shortcode output preview​

Shows a live preview of the output of the [clonable_language_switcher] shortcode.

Styling​

Rounded flags​

Shows flags as a circle (.ff-rounded) instead of rectangular (.ff-square).

Choose language switcher size​

Determines the size of the flag: small, medium or large.

Choose background color​

Determines the background color of the switcher. The default value is #ffffff.

Choose hover background color​

Determines the background color on hover. The default value is #efefef.

Disable default language switcher styles​

When enabled, the default CSS styles of the language switcher are not loaded. Use this when you want to style the switcher entirely with your own CSS.

Enable custom language switcher styling​

When enabled, a CSS editor appears that lets you override the default styles. Your changes are saved to a separate file and do not affect the default stylesheet.

Custom language switcher styling​

The CSS editor in which you enter your own styles. It is only visible when Enable custom language switcher styling is enabled. When the field is empty, the default CSS is used as a starting point.

Floating widget​

Enable floating language switcher​

Turns the floating language switcher on or off.

Choose a position​

Determines the position of the floating switcher: bottom-left or bottom-right.

Languages​

In the languages table you manage which languages are shown in the language switcher. For each language you set:

  • Flag — the flag, chosen via the locale dropdown;
  • Text — the display name (for example de or german);
  • Domain — the URL of the relevant language version.

Use Add another language to add a row; use the trash icon to remove a row. Note:

  • URLs always start with https://.
  • Preferably also add the current site itself to the table.

After saving, the changes are applied to the website immediately.

Customising styling with CSS​

The language switcher can be fully customised with your own CSS.

Commonly used CSS classes​

.clonable-language-navigation {
}

.clonable-language-switcher {
}

.cl-language-switcher-menu-item {
}

.cl-language-switcher-link {
}
info

For advanced styling, a complete overview of all available CSS classes is included below.

Full overview of CSS classes
/* Outer container */
.clonable-language-navigation {
}

/* Shortcode variant */
.clonable-language-switcher-shortcode {
}

/* Trigger button */
.clonable-language-switcher {
}
.cl-language-switcher-lan-container {
}
.cl-language-switcher-lan-flag {
}

/* Menu / dropdown items */
.cl-language-switcher-menu-item {
}
.cl-language-switcher-link {
}

/* Block theme (Gutenberg) submenu */
.clonable-language-switcher-block-submenu {
}
.clonable-language-switcher-block-submenu-item {
}
.clonable-language-switcher-chevron {
}

/* Flag helper classes */
.fflag {
}
.ff-rounded {
}
.ff-square {
}
.ff-md {
}

Frequently asked questions​

I don't see a language switcher​

First check that Show flag or Show text is enabled — without at least one of the two, the switcher renders nothing.

Then check, depending on the method used:

  • Floating widget — whether Enable floating language switcher is enabled;
  • WordPress menu — whether the Clonable Language Switcher menu item has been added (classic menu) or whether the Submenu block has the class clonable-language-switcher (block theme);
  • Shortcode — whether [clonable_language_switcher] has been placed on the page.

Also check:

  • whether active clones are available;
  • whether the plugin has been synchronised successfully;
  • whether a caching plugin is serving old pages.

If necessary, clear the cache of WordPress and your caching plugin.

Can I use multiple switchers at the same time?​

Yes, technically you can.

However, we recommend using only one method at a time to avoid duplicate language switchers.

Can I fully customise the styling?​

Yes. The HTML structure and CSS classes of the switcher are publicly available and can be fully overridden via your own stylesheet.

Last updated on