Show opposite language in language switcher

How to Show Opposite Language in Language Switcher

Showing the opposite language in your language switcher comes in really handy in bilingual websites. You want to set it up so that you see the other language name or flag in the menu, not the current language.

There are two ways to achieve this, which we’ll detail below:

1. In your Menu Language Switcher

Let’s say you want to show just the opposite flag(s) in your menu.

This is possible with a bit of CSS.

    • go to Appearance -> Menus -> Screen Options (top right corner) and make sure “CSS Classes is checked”
    • next, edit your language menu items, and add for each language a custom class: tp_en for English, tp_fr for French, etc. You won’t be needing the “Current Language” item.
    • now, you can go to WordPress -> Appearance -> Customize -> Additional CSS and add some custom CSS like:
.translatepress-en_US .tp_en, 
.translatepress-fr_FR .tp_fr
{ display: none !important }
  • the “translatepress-en_US” CSS class is added automatically for each language to the body of your HTML page. It contains the locale, not the language slug (from the TranslatePress settings), that’s why it’s en_US and not just en.

Note: You’ll have to replace the language locales with your own website languages.

2. In your Shortcode Language Switcher

Another place where you might want to display the opposite flag(s) could be in the shortcode language switcher. You can achieve this by enabling the “Show opposite language in the shortcode language switcher” option from the Advanced tab. You have to scroll all the way down as this option is above the Custom language section.

Show opposite language in the shortcode language switcher

Note: This option only works when there are exactly two languages, the default one and a translation one.

Looking to go multilingual?

Get full access to TranslatePress and join 200.000+ website owners that grow their multilingual traffic.

Unlock PREMIUM Features

Or download FREE version