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.

To reap the full benefits—including high ROI—it’s crucial to make it simple for visitors to change languages on your site with an easy-to-find, well-designed, and intuitive-to-use language switcher.

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

Adding a WordPress language switcher is simple and fast, thanks to the translation plugin for WordPress, Weglot. 

With Weglot, you can add multiple languages to your site in under 5 minutes and customize the design without any code. 

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

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

Your WordPress website is now multilingual! Weglot has automatically detected your site’s content, translated it using a first layer of machine translation, 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.

There are a few ways to do this, either in a menu, as a widget, using a shortcode, or with HTML. Note that you don’t need any knowledge of PHP or have to access your core templates. This gives you developer-level power without the need for expert experience.

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.

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.
• 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. 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 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 drop-down (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.

We like how you can choose to visit a regional version of the site too, as a separate option. Too often, big brands make it difficult to choose a language, instead, forcing users to switch regions.

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. It’s a slick design that’s intuitive and lets the user choose their language without having to be redirected to a regional version of a 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 – “Choose a language”. As such, if you click it, you’ll know what you’re going to see.

Sometimes, you don’t need complicated language switchers if it’s not necessary. After all, if you impede the visitor, it could turn them off from your site.

Achieve a Well-Designed WordPress Language Switcher

Adding a WordPress language switcher to your site is simple with the right tools. Thanks to Weglot, you not only get an automatically added language switcher but also one you can change the design of without a developer. 

What’s more, Weglot gives you a first layer of machine translation that you then get full editing control over, so you can make changes, add teammates, and order professional translations to perfect translations. 

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, and more! 

Ready to add a WordPress language switcher to your site? Try Weglot’s 10-day free trial; no credit card required.