---
title: "How to Add Elementor Language Switcher with Translatepress in Header?"
url: https://theplusaddons.com/docs/add-elementor-language-switcher-with-translatepress-in-header/
date: 2023-10-28
modified: 2026-09-14
lang: en
author: "Aditya Sharma"
description: "If you translate your site with TranslatePress, visitors need a way to change language from any page. The header is the obvious place for it. The Header Meta Content widget..."
image: https://theplusaddons.com/wp-content/uploads/2023/10/How-to-Add-Elementor-Language-Switcher-with-Translatepress-in-Header_-1024x536.jpg
word_count: 728
---

# How to Add Elementor Language Switcher with Translatepress in Header?

## 

- The Plus Addons for Elementor Header Meta Content widget renders a TranslatePress language switcher inside its own Meta Content repeater, so the switcher uses the same Elementor panel for color, spacing, and layout as the rest of the header.
- TranslatePress language switcher settings include a Display Language Switcher toggle, a TranslatePress selection in the Select dropdown, and Before Text and After Text fields such as a “Language:” prefix.
- Responsive Device visibility lets the language switcher show or hide independently on desktop and mobile, while Icon Left Space and Icon Right Space adjust spacing around the icon.
- The switcher only shows languages already configured in TranslatePress, and only one language-switcher source can drive an item at a time because WPML and TranslatePress are separate code paths.

If you translate your site with TranslatePress, visitors need a way to change language from any page. The header is the obvious place for it.

The Header Meta Content widget in The Plus Addons for Elementor adds TranslatePress's own switcher as one item in its header row, so it sits in line with your search icon, cart or buttons instead of floating on its own.

*To check the complete feature overview documentation of The Plus Addons for Elementor Header Meta Content widget, [click here](https://theplusaddons.com/docs/header-meta-content-widget-settings-overview/).*

***Requirement - This part of the widget needs the PRO version of The Plus Addons for Elementor, installed and activated.***

[LIVE WIDGET LINK](https://theplusaddons.com/elementor-builder/header-builder/?utm_source=tpae&utm_medium=docs&utm_campaign=text)

Table Of Contents

## Before You Start

- **Edition:** **Pro** — the **Language Switcher** item needs the Pro version. In the free plugin the **Select Options** dropdown labels it **(Pro)**, and turning its **Display** switch on renders nothing.- **Widget to enable:** Header Meta Content, switched on under **The Plus Addons > Widgets**.- **TranslatePress** installed, activated and configured with at least one extra language. The switcher shows whatever TranslatePress is set up to publish.- **Where to add it:** your header template, so the row shows on every page. The widget's own **Use with Theme Builder** section links to a **Create Header Template** button.- **Two steps, always:** adding an item in **Meta Content** is only half of it. Nothing appears until you also turn on that item's own **Display** switch in its section further down the Content tab.

## Set Up the Languages in TranslatePress First

Add your translation languages in **Settings > TranslatePress** before you add the switcher to the header.

![TranslatePress settings screen showing the languages configured for the site](https://theplusaddons.com/wp-content/uploads/2023/10/translatepress-languages.png)

## Add the Language Switcher Item

- Add the **Header Meta Content** widget to your header template.- In **Meta Content**, open the item and set **Select Options** to **Language Switcher**.

![Select Options set to Language Switcher in the Header Meta Content widget](https://theplusaddons.com/wp-content/uploads/2026/09/headermeta-select-lang-select-icon-list.webp)

- Turn on **Display Language Switcher** in the **Language Switcher** section and set **Select** to **Translatepress**.

![Select set to Translatepress in the Language Switcher section](https://theplusaddons.com/wp-content/uploads/2026/09/headermeta-lang-trp-select-trans.webp)

- If you want a label, fill in **Before Text** or **After Text**.

![Before Text field in the Language Switcher section](https://theplusaddons.com/wp-content/uploads/2026/09/headermeta-lang-trp-before-language-text.webp)

## What Applies on the TranslatePress Path

| Setting | Applies? | Notes |
| ------- | -------- | ----- |
| Display Language Switcher | Yes | Nothing renders without it |
| Select | Yes | Set it to **Translatepress** |
| Before Text | Yes | Printed immediately before the switcher |
| After Text | Yes | Printed immediately after the switcher |
| Style, Layout, Skip Language | No | WPML only — they disappear from the panel once you choose Translatepress |
| Country Flag, Native Name, Translated Name, Language Code | No | WPML only. On this path the flags and names come from TranslatePress's own settings |

## How It Behaves

The widget hands the switcher to TranslatePress and wraps it in the header row. What you see is TranslatePress's own switcher, with the languages, flags and names configured in its settings.

![TranslatePress language switcher open in a site header, listing English, French and German](https://theplusaddons.com/wp-content/uploads/2026/09/headermeta-result-trp.webp)

![Animated demo of the header language switcher](https://theplusaddons.com/wp-content/uploads/2023/10/header-meta-content-language-switcher-demo.gif)

- Selecting a language loads that language's version of the page.- The switcher lists only the languages TranslatePress publishes. Adding a language there adds it here, with no change to the widget.- **Before Text** and **After Text** are printed once, around the whole switcher.- The **Translatepress Language Switcher** section on the Style tab styles the wrapper this widget puts around it.

## Limitations

- Only **Before Text** and **After Text** affect this path. The flag, native-name, translated-name, language-code, style and layout options belong to the WPML path and are hidden once you choose **Translatepress**.- The switcher's own layout — dropdown or list, flags on or off, how it opens — is set in TranslatePress, not here.- One language plugin per item. WPML and TranslatePress cannot both drive the same switcher.- The widget does not translate anything. It only shows TranslatePress's switcher.- The whole item needs Pro. In the free plugin the dropdown shows **Language Switcher (Pro)** and nothing is drawn.

## Troubleshooting

### The switcher does not appear

Check that a **Meta Content** item is set to **Language Switcher**, that **Display Language Switcher** is on, that **Select** is **Translatepress**, and that TranslatePress has at least one extra language published.

### The flag and name options are missing from the panel

They are WPML-only and are hidden while **Select** is **Translatepress**. Change what the switcher shows in the TranslatePress settings instead.

### Two language switchers appear on the page

TranslatePress also has its own floating switcher, which is on by default. Turn it off in **Settings > TranslatePress** if you only want the one in the header.

### The switcher is squashed or sits oddly in the row

It is a full TranslatePress dropdown, not a single icon. Give the item more room with **Icon Left Space** and **Icon Right Space** on the repeater item, or with **Icon Padding** in **Extra Options**.

## Related Docs

- [Header Meta Content Widget Settings Overview](https://theplusaddons.com/docs/header-meta-content-widget-settings-overview/)- [How to Add Elementor Language Switcher with WPML in Header?](https://theplusaddons.com/docs/add-elementor-language-switcher-with-wpml-in-header/)- [How to Add Search Icon to Elementor Navigation Header Menu?](https://theplusaddons.com/docs/add-search-icon-to-elementor-navigation-header-menu/)