Weglot blog

How to Add a WordPress Language Switcher to Your Site

Thinking about adding a WordPress language switcher to your website? 

Translating your content into other languages so that site visitors can read your content in their preferred language offers enormous benefits for your business, not limited to helping you reach new markets, providing greater opportunities for SEO and online visibility, and helping you establish trust with new audiences.

For a minimal investment of your time and money, the return on investment (ROI) that WordPress multilingual websites offer is also attractive. According to the Swiss-based trade body, the Industry Specification Group for Localization (ISG), for every US$1 spent on localization, a business will make a return of $25

That’s a 2,500% return, and certainly not to be sneezed at. Rather, it’s something you should seriously consider if you want to better position your company for success in overseas markets.

To make the most of the above benefits — including the high ROI — it’s crucial that you make it incredibly easy for site visitors to change languages on your site with an easy-to-find, well-designed, and intuitive-to-use WordPress language switcher. 

So in this guide, you’ll find everything you need to know when it comes to adding a WordPress language switcher to your site, including lots of real-world examples, some best practice tips, and how to create and customize one using Weglot.

What is a WordPress Language Switcher?

A WordPress language switcher is, at its simplest, a button on a page that visitors can click to change the language used for the content.

When you dig into the details, language switchers aren’t always buttons — they can be text, language codes, a drop-down, or flags, and these can be placed anywhere on the page. Typically, you’ll find a WordPress language switcher in the header, footer, or in the navigation.

Below, you can see Weglot’s WordPress language switcher is located prominently right next to the logo in the top-left of the page. It features a dropdown design, enabling visitors to switch between English and French.

6 Examples of Successful Language Switchers

So what does a language switcher look like? You’ve no doubt seen them as you’ve browsed the web, but if you don’t speak another language or don’t actively go looking for them, you may not be aware just how diverse they can be in terms of their design and location on the page.

So let’s take a look at some examples of language switchers.

1. Yellow

Text links are a great way to offer your website in other languages, especially if you have a minimalist design, such as design and development agency Yellow, below. Additionally, language codes let you indicate a language is available without having to spell it out, providing a simple and uniform way for designers to display WordPress languages switchers in a small space, such as the header of a page. After all, language codes are usually just two letters.

Yellow offers translations in English and French. What’s great about this particular language switcher design is that is blends in with the existing design, yet is very easy to spot right away.

2. Microsoft Translator

The Microsoft Translator site lets visitors choose from 14 different languages using a drop-down located just above the footer of the page. They’ve also opted to display each language name in full — doing so lets visitors recognize their language at a glance, ensuring your language switching options are clear.

What’s great about this site is that it lets you choose whether you want to visit a regional version of the site as a separate option. Too often, big brands make it difficult to choose a language, instead, forcing users to switch regions.

3. Polaroid

The Polaroid website provides a language switcher in the bottom. With its white background, the language codes used really stand out against the black background of the footer. When you click one of the language codes, the site is instantly translated into English or French.

4. La Machine Cycle Club

Passionate about cycling, Rens and Sander had been thinking about creating a clothing brand around their favorite hobby for a long time, and they founded La Machine Cycle Club in 2013, a clothing brand driven by their love for the Velo, racing and good looks.

Given that cycling has enthusiasts all over the world, it was only natural for Rens and Sander to create an international brand, both in its message and its availability. The need to expand internationally was quickly confirmed as La Machine Cycle Club received orders from all around the world as soon as the brand was launched. It was, therefore, essential to have a site in multiple languages. Rens and Sander thus started looking for a multilingual plugin for their eCommerce site.

After experimenting with another plugin, Rens, co-founder of La Machine Cycle club found it too heavy, and it also affected the speed of their website, not to mention that “We were also below our objectives in terms of site speed”. The conversion rate of a website can indeed be heavily affected by its speed.

They then discovered Weglot, which immediately met their requirements in terms of performance and reliability. “Weglot is very easy to install and its server-side integration allows our site to remain fast and reliable”.
Thanks to Weglot, La Machine Cycle Club was able to offer its website in English, German and Dutch to support its international growth. “Our percentage of sales from outside the Netherlands has quickly grown to 50%.” The conversion rate has also grown by 25%.

5. Etsy

As an international marketplace where crafty people can sell their handmade goods, it’s no surprise Etsy offers a well-designed language switcher, which you’ll find in the footer of every page on their site. To the left, you’ll see the region, the language (and locale) in the middle, and the currency on the right.

When you click one of the three buttons — really, it’s just one big button — a modal appears, which gives you options for changing your region, preferred language, and currency. It’s a slick design that’s intuitive and, again, lets the user choose their language without having to be redirected to a regional version of a site.

6. Evernote

Evernote keeps its language switcher simple with a dropdown in the footer that you can click (or tap, depending on your device) to change languages. It’s easy to find and is clearly labeled — i.e. “Choose a language” — so when you click it, you know you’re going to see a bunch of languages.

Best Practices for Displaying WordPress Language Switchers

For much of the world, reading in a native language is a luxury. While English is ranked the third most popular spoken language in the world (with 360 million native speakers), it claims the top spot amongst the most commonly used languages online (with 873 million internet users). Tellingly, 53.3% of online content is written in English.

Imagine landing on a web page and seeing Spanish or Chinese characters — if you don’t speak those languages, the first thing you would look for is a WordPress language switcher, right? But typically, language switchers are one of four things:

  • Non-existent, i.e. the website doesn’t offer translations.
  • Difficult to find, i.e. they are hidden in the navigation or some other location, forcing the user to play and seek.
  • Easy to find, and displayed in a location typically reserved for WordPress language switchers, such as the header or footer.
  • Very easy to find, and displayed in prominent screen real estate, such as in the header.

If someone can’t read your site, they’re going to close the browser tab. If it’s difficult to find your WordPress language switcher, users might question the quality of your design and lose trust in your company.

That’s why it’s crucial you make it very easy for visitors to your site to choose their preferred language. So let’s take a look at some best practices for displaying a WordPress language switcher.

1. Choose your languages carefully

Multilingual plugins for WordPress usually offer translations in dozens of different languages. Weglot, for example, offers 100+ languages. But just because you can enable all 100+ languages doesn’t mean you should.

Instead, you should only activate the languages you need. This means taking the time to consider your target audience and the languages they speak, and any new overseas markets you would like to expand your company into, in the future.

Smaller companies typically provide 2-3 languages, while big brands and multinationals like Apple, will offer multiple languages (and often also multiple regional websites).

Being selective about the languages you offer on your site will also ensure you don’t create extra work for yourself and your team, i.e. the more languages you offer, the more content you’ll need to review for mistranslations and cultural nuances. Ideally, the fewer and more targeted your languages, the better.

2. Make sure your language switcher is easy to find

It shouldn’t take visitors more than a couple of seconds to find your WordPress language switcher. Ideally, it’s best to place your language switcher somewhere in the header or footer of your page — both are great locations. For mobile devices, language switchers are usually found in the main menu. 

Designers should avoid straying too far from these established norms, as users who aren’t native speakers of your site’s default language may have trouble finding your language switcher if it’s difficult to find or in an unusual position.

The important thing is, you want bilingual and multilingual visitors to your site to feel welcome and comfortable browsing and accessing your content, no matter their native language. Placing your WordPress language switcher somewhere that is easy to find will go a long way to helping you achieve this.

For example, check out how prominent WordPress development agency Human Made’s language switcher is — it’s hard to miss in the top-right corner!

Often, some modern sites will automatically set the language for visitors, based on web browser. While this does minimize the amount of work needed on the user’s part (i.e. they don’t have to search for your WordPress language switcher and change languages manually), what if some users land on the “wrong” version of your site?

For example, a visitor could be physically located in Germany and your multi language site might autodetect that and display German, but what if the user is an Australian traveller who doesn’t know German? 

Auto-detecting geographic locations is a cool feature to have, but you should also provide a WordPress language switcher so visitors can still choose their preferred language.

3. Style your WordPress language switcher to match your design

Most translation plugins for WordPress will provide some kind of default language switcher button that you can use (though it’s worth noting that some don’t and you’ll have to create your own). While it may be tempting to stick with the generic language switcher provided, consider customizing it to match the look and feel of your site.

This might involve configuring your plugin’s settings to display text instead of buttons, or language codes instead of flags. Many multilingual plugins also let you customize the CSS for your WordPress language switcher, so you can make more advanced styling changes to your language switcher.

For example, Weglot provides both basic and advanced options for customizing the design of your site, which we’ll explore in more depth in the “how-to” section later in this article. But to show you an example of how styling your WordPress language switcher can make a world of difference, here’s a look at the default language switcher that comes with Weglot:

By default, Weglot places the language switcher in the bottom-right corner, which okay, but is not ideal for my test ecommerce site I’ve created. In this case, the language switcher sticks out like a sore thumb mostly due to its placement but also because it doesn’t fit with the overall design of this very minimalist site.

Now, take at the IChO France 2019 website below, which also uses Weglot for translations. For this bold design, the WordPress language switcher is grouped with the social media icons away from the main navigation. 

The designer has used CSS to style shapes around the language codes, eluding to boxes. This draws the visitor’s eye to the top-right of the page where the WordPress language switcher is located, ensuring anyone who visits the site — in particular, the children who will be taking part in this year’s International Chemistry Olympiad (IChO) in Paris — will know right away to select their preferred language.

4. Flags or Names?

Country flags are often used to represent different languages for language switchers. While flags are tempting for designers to use for many reasons — i.e. they’re colorful, iconic, and space-efficient — flags were never designed to depict languages and throw up various problems, as United Language Group points out.

For instance, consider Portuguese. It’s the official language in Portugal, Brazil, Cape Verde, Guinea-Bissau, Mozambique, Angola, São Tomé & Príncipe, East Timor, Equatorial Guinea, and Macau. It also has cultural presence (in both traditional and creole variants) in India, Sri Lanka, Malaysia, the ABC islands in the Caribbean, and the Indonesian island of Flores. So…which country’s flag should represent the Portuguese language?

There’s also the issue that visitors might not recognize a flag (because of the icon size) or they might be confused by similar looking flags. 
Flags are not languages, a blog about designing global user experiences, recommends always using the name of a language in its local format, i.e. for German and Chinese, label them as “Deutsch” and “中文,” not “German” and “Chinese.”

How to Create a WordPress Language Switcher with Weglot

For this example, I want to show you how to set up a simple WordPress language switcher with Weglot. Then I’ll show you how to style it using CSS for advanced customizations.

Weglot is one of the most popular and easy-to-use WordPress language switcher plugins for WordPress. With Weglot, you can add another language to your site in less than 5 minutes, and start styling it to suit your site’s design.

You can add a WordPress language switcher to your site in a variety of locations — in your navigation, using a widget, with a shortcode, or with code. For this “how-to,” I’ll show you how to add a language switcher to the footer of your site that uses language codes.

First, though, you’ll need to set up Weglot on your WordPress site. After installing the Weglot plugin on your site and completing the 3-step set-up, you’ll be prompted to enter your API key, your original language, and the language you would like to translate your content into.

If you don’t already have a Weglot account, you’ll need to create one to get your API key.

Save your changes and refresh the front-end of your site — you’ll see a new WordPress language switcher in the bottom-right corner. When you click it, it’ll expand to display your available languages, allowing you to choose and display your preferred translation.

This is the default design that comes with Weglot, but it’s by no means the design you’re stuck with! With Weglot, you can completely customize the look and location of your WordPress language switcher.

To start making basic customizations, go to Weglot > Language button design (Optional). On this screen, you can choose:

  • Whether or not to use a dropdown
  • Whether or not to use flags
  • Types of flags
  • To display the name of languages
  • To just display the code for languages

You’ll notice there is a section for overriding CSS, but just ignore that for a moment — we’ll get to it shortly. For now, I want the language switcher to display language names without flags, but I want to keep the dropdown for now. So I’ll uncheck “With flags” and check “Is fullname.” 

Here’s what my WordPress language switcher looks like now:

Okay, let’s do some advanced customizations.

I want to display the language switcher in the header next in between the navigation and the “Contact us” button. To do this, I’m going to use a shortcode since I’ve used a page builder to create this site and I can use a code element to drop the shortcode in place.

Going back to the Weglot screen in the WordPress admin, when you scroll a bit further down the page you’ll see options for display the language switcher:

In my case, I want to use the [weglog_switcher] shortcode. So I’ll go ahead and drop that into a code element and drag it to the header where I want the language switcher to be displayed.

Here’s what my updated WordPress language switcher now looks like: 

While the language switcher is now positioned in the header where I want it, thanks to the shortcode, not displaying quite as I’d like (it’s showing underneath the main image). Also, I want to display just the two language codes sitting next to each other.

So let’s play with some CSS styling. First, I’ll turn off the dropdown setting and enable the display of language codes in the basic settings. Then I’ll use CSS to change the font, color and weight of the text so that it better fits my site design.

And voilà! Here’s what my WordPress language switcher looks like now:

With a shortcode in the right place and just a few lines of CSS, you can quickly and easily style Weglot’s language switcher to match your site.

Here’s the CSS I added to the “Override CSS” textarea:

Case Study: How Baltazare is Using Weglot

Founded in 2014, web agency Baltazare designs and develops websites for big brands like Candia, Royal Monceau and AXA. Using WordPress, the agency develops more than 40 website projects each year.

Multilingual projects were always painful for Baltazare prior to discovering Weglot. The team struggled to find a good translation solution that matched their clients’ needs. For a while, it seems WPML, another popular WordPress translation plugin, was a good solution. But the team wished for something less complex and more efficient.

After testing the WordPress multisite approach with one site per language, and finding it too much of a headache to manage maintenance, the team discovered Weglot. Baltazare Founder Guillaume Vergano said he was delighted to find Weglot seamlessly integrated with any WordPress site, including themes and plugins, and translated all content.

“Learning to use Weglot is very easy for us or for our customers. We always create a short video tutorial that explains in a few minutes how to use Weglot to each of them and that is it,” said Guillaume.

Baltazare is now using Weglot for 7 live sites — including the IChO France 2019 site we looked at earlier, and the team always recommends Weglot to clients as a trusted solution for multilingual sites.

Achieve full cultural optimization with a well-designed WordPress language switcher

At the end of the day, a designer’s job is to create meaningful designs that delight users. When it comes to multilingual websites, a designer’s job is even more important — translations are only helpful if language switchers are easy to find and intuitive.

A well-designed language switcher is a bonus, but also something you should aim for. When your language switcher looks and feels like a seamless part of your website experience, visitors and customers will feel more at home browsing your translated content. This helps establish (and increase) trust, and goes a long way to building a strong connection with your brand.

A language switcher that has been thoughtfully designed a key component of any international website, and, armed with this knowledge, designers can create translation experiences that empower users rather than hinder them.

Want more? Read: 3 Top WordPress Form Plugins for Multilingual Websites, A Best Practice Guide for WordPress Multilingual Websites, How to prepare your WordPress plugin for a critical update.

About the author
Alex Denning

JOIN 50,000+ WEBSITES ALREADY USING WEGLOT

Try Weglot for free