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 Language Switcher Shortcode

Another place where you want to display the opposite flag(s) could be in the language switcher shortcode. You can achieve this if you install the following plugin: Opposite Language Shortcode (2455 downloads)