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 top WordPress multilingual plugins.

With Weglot, you can add multiple languages to your WordPress site or WooCommerce store in less than 5 minutes, with no code required.

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.

With Weglot, an AI-powered translation plugin for WordPress, you can add multiple languages to your site in 5 minutes and customize the design without any code. The same setup works on WooCommerce stores – the switcher appears and behaves identically whether you're running a standard WordPress site or a WooCommerce store.

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 left of your site. We’ll then show you how to move it either via your settings or using Weglot’s language switcher visual editor. 

Step 1: Install and Activate the Weglot Plugin

Install and activate the Weglot plugin on your WordPress site. Then, create a Weglot account, where you’ll manage and edit your translations and get your unique API key for the integration

Step 2: Connect Weglot and Select Your Languages

Click into the Weglot tab in your WordPress dashboard and add your API key, select the original language of your site and the language(s) you want to add, and 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 > Language button design (Optional) in the WordPress back end. On this screen, 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 section for overriding CSS and replacing it with your own custom selectors—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, uncheck “With flags” and check “Is fullname”, 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

There are a few ways to do this, either in a menu, as a widget, using a shortcode, with HTML, or as a floating button that stays in the corner of the screen as the user scrolls. You can also place the switcher directly within post or page content using the shortcode [weglot_switcher] – paste it into your page editor where you want it to appear. Weglot's switcher works with all WordPress themes, including FSE and block themes.

Head back to the Weglot screen in the WordPress dashboard and scroll down the page until you see options to display the language switcher:

Simply follow the prompt depending on where you want the language switcher to be. 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. Also, you could also use inline language codes, rather than a drop-down menu.

Advanced Language Switcher Styling

This is where you use CSS. First, turn off the drop-down setting within the Weglot menu in WordPress. Then, check the box to display language codes.

From here, you can use the Override CSS text area to set selectors for your fonts, colors, and text weight so it fits your site design:

Finally, take a look at your design 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 options available in the Weglot tab section of your WordPress admin. 

You can also use Weglot’s language switcher visual editor if you prefer to do things more visually: 

The language switcher visual editor allows you to control the same settings as within your WordPress dashboard. You can simply drag the switcher to the position you’d like it to appear, then click “Save” to make the changes live on your WordPress site. 

Best Practices for Displaying WordPress Language Switchers

Language switchers often fall into two camps with relevant attributes:

• 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.

3 Examples of Successful Language Switchers

You’ll often see language switchers as you browse the web. However, if you don’t speak another language (or don’t look for an option), you may not be aware of just how diverse they can be regarding their design and location on the page.

1. Microsoft Translator

The Microsoft Translator site lets visitors choose from almost 40 languages using a dropdown (or in this case, a ‘drop-up’) located near the page footer. They’ve also opted to display each language name in full using the native language. Doing this lets visitors recognize their language at a glance, and ensures the language switching options are clear.

2. Etsy

As an international marketplace where crafty people can sell their handmade goods, it’s no surprise Etsy offers a well-designed language switcher. You can find it in the footer of every page on their site.

You can choose a region, language, and currency. Clicking this pops up a modal box, where you can change each of these options – a clean approach that avoids forcing users to navigate to a regional site.

3. Evernote

Popular note-taking app Evernote keeps its language switcher simple, using a drop-down menu in the footer to change languages.

It’s easy to find and offers clear labeling – proving that a minimal switcher can still deliver a clear, frictionless experience.

Achieve a Well-Designed WordPress Language Switcher

Adding a WordPress language switcher to your site is simple with the right tools. With Weglot, you get a language switcher added automatically, full AI translation from day one, and complete editing control – no developer needed. The translation tool runs in the background, keeping your translations up-to-date, on-brand and hands-off. 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. It adds hreflang tags and translates your metadata. Search engines 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, hreflang tag implementation, Weglot handles the technical, SEO and translation 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.