How to Add a WordPress Language Switcher

Are you thinking about adding a WordPress language switcher to your website? If so, keep reading!

Adding a language switcher to your WordPress site and translating your content so visitors can read it in their own language can help you reach new markets, provide greater opportunities for SEO and online visibility, and help you establish trust with new audiences. Not sure which plugin to use? Check out our comparison of best WordPress language switcher plugins.

With Weglot, you can add multiple languages to your WordPress site or WooCommerce store with no code required, and review every translation in context before it goes live.

In this article, we’ll provide a detailed step-by-step guide on how to add a WordPress language switcher to your site and how to customize it to fit your site’s design.

Tutorial: Add a WordPress Language Switcher with Weglot

A WordPress language switcher is a navigation element that lets visitors select their preferred language and switch between translated versions of your site. You can add one to any WordPress site by installing a translation plugin, selecting your languages, and placing the switcher in your menu, widget area, or page via shortcode.

Weglot 2.0 builds on the Weglot you know: an AI-powered translation plugin for WordPress that adds a language switcher automatically, translates your site with no code using AI translations built around your brand, and creates SEO-ready language subdirectories with hreflang tags and translated metadata. You can choose to add a WordPress language switcher to your site in a variety of locations, including your menu, to a widget, or in the source code of your HTML page. 

In this tutorial, we’ll add a language switcher to your site's navigation. By default, Weglot adds the language switcher to the bottom right of your site. We’ll then show you how to move it either via your plugin settings or from Weglot’s Visual Editor, where the Switcher Editor also lets you change its design. 

Step 1: Install and Activate the Weglot Plugin

Install and activate the Weglot plugin on your WordPress site. Then, create a Weglot account: during setup you’ll enter your site’s URL, pick your original and target languages, and set up your Brand Voice and Translation Guidelines so the translations match how you write. Your Weglot dashboard is where you’ll manage and edit your translations and copy your unique API key for the integration.

Step 2: Connect Weglot and Select Your Languages

Click into the Weglot tab in your WordPress dashboard, open Settings, and paste your API key. Your original language and the languages you chose when you created your project appear underneath (to change them later, head to your Weglot dashboard). Click save. 

Step 3: Check Your Site and Language Switcher

Your WordPress website is now multilingual! Weglot has automatically detected your site’s content, used AI to translate it, and displayed it under language subdirectories.  

Take a look at the front end of your site, and you’ll see a new WordPress language switcher at the bottom-right corner.

When you click it, it’ll expand to display your available languages and let you choose and display your preferred translation.

This is the default design that comes with Weglot, and you can now customize the look and location of your WordPress language switcher in a few different ways.

Customize Your WordPress Language Switcher

To start making basic customizations, go to Weglot > Settings in the WordPress back end. The Language switcher section is where you set the placement: in a menu, in a widget, with a shortcode, or in the source code of your page (we’ll walk through this below):

The look of the switcher is handled in the Switcher Editor, which opens from Weglot’s Visual Editor when you click the language switcher on your site. In the editor, you can choose:

• Whether to use a drop-down menu
• Whether you will use flags within your switcher, and the type
• If you display the names of your languages
• To display only the language code

There’s also a Custom CSS field for your own selectors, and we’ll come to this in a second. For now, let’s customize the language switcher to display language names without flags but keep the drop-down menu.

To do this, turn flags off and full language names on, click Save, then take a look at your site:

‍

You may also want to carry out some advanced customizations. For example, let’s display the language switcher in the navigation menu or the sidebar.

Language Switcher Placement Options

You can display the Weglot language switcher in five places:

• Menu: Go to Appearance > Menus, select your menu, tick Weglot Switcher, and drag it into position.
• Widget: Go to Appearance > Widgets and add the Weglot Widget to any widget area (header, sidebar, or footer).
• Shortcode: Paste [weglot_switcher] into any page, post, or template where you want the switcher to appear.
• HTML / source: Add the switcher directly in your page’s HTML for full placement control.
• Floating button: Keep the switcher in a fixed corner that stays visible as users scroll (Weglot’s default).

Weglot's switcher works with all WordPress themes, including FSE and block themes.

To control where your language switcher appears, head back to the Language switcher section in Weglot > Settings (shown above) and follow the link on the card for the placement you want. In this instance, we’ll go to Appearance > Menu and drag and drop the switcher to change the order of the items in the menu. 

When you’re ready and have saved your changes, take a look at your front end once more:

While the language switcher is within the header, it’s not displaying in the right way. You could also use inline language codes, rather than a drop-down menu.

Advanced Language Switcher Styling

This is where you use CSS. In the Switcher Editor (more on it below), turn off the drop-down layout, display language codes instead of full names, and add a few selectors for your fonts, colors, and text weight so the switcher fits your site design. This is the result on the front end:

With the right placement and a few lines of CSS, you can quickly and easily style Weglot’s language switcher to match your site without the need for complex template editing, HTML, or PHP coding skills. 

Note that custom CSS modifications are entirely optional. You can move and change the design through the ready-made options in the Switcher Editor. 

To open it, go to Weglot’s Visual Editor and click the language switcher on your site. The Switcher Editor appears next to a live preview, so you see each change as you make it, and its Custom CSS panel (click Edit custom CSS to reveal the field) is where the selectors from the previous step go: 

Set the position and layout from the panel, then click “Save” to make the changes live on your WordPress site. 

Best Practices for Displaying WordPress Language Switchers

Language switchers tend to fall into one of four camps:

• Non-existent. In other words, the website doesn’t offer translations at all.
• It is difficult to find. The language switcher might be hidden in the navigation or some other location, forcing the user to play hide-and-seek and provides a terrible user experience.
• Easy to find. In contrast, you might find the WordPress language switcher in a clear, relevant place, such as the header or footer.
• Very easy to find. You’ll have good fortune if the WordPress language switcher is in prominent screen real estate, such as the header. This lets you choose the right language fast.

As such, it’s crucial you make it easy for your site’s visitors to choose a preferred language and provide a user-friendly experience for your international site visitors. In an ideal world, you should be able to do this without the need for add-ons. With that in mind, consider the following:

1. Choose your languages options carefully. Just because you can enable every language doesn’t mean you should; you should only look to activate the languages you need. 
2. Make your language switcher easy to find. It’s a good idea to place your language switcher in the header or footer of your page, both are great locations. For mobile devices, you often find language switchers in the main navigation as a menu item.
3. Style your WordPress language switcher to match your design. While it may be tempting to stick with the generic language switcher provided, customizing it to match the look and feel of your site is a great idea.
4. Select flags or names for your chosen languages. While flags are tempting for designers to use for many reasons (they’re colorful, iconic, and space-efficient), flags aren’t designed to depict languages. This throws up various problems.

Achieve a Well-Designed WordPress Language Switcher

Adding a WordPress language switcher to your site is simple with the right plugin. With Weglot, you get a language switcher added automatically, full AI translation from day one, Image Translation for the text inside your images, and complete editing control, no developer needed. The plugin runs in the background, keeping your brand-aligned translations up to date as your content changes. You can also enable auto-redirection from your Weglot Dashboard: it detects a visitor's browser language and automatically serves them the correct language version of your site.

Weglot is also built with multilingual SEO in mind. It automatically creates language subdirectories for each translated version of your site, adds hreflang tags, and translates your metadata, so search engines and AI-powered discovery experiences can find and index every language version from day one.

Choose a WordPress translation plugin that’s also built with multilingual SEO in mind. Thanks to automatically created language subdirectories, translated metadata, and hreflang tag implementation, Weglot handles the technical, SEO, and translation side of your multilingual site.

Ready to add a WordPress language switcher to your site? Get started with Weglot’s free plan, no credit card required.