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.
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, French, Spanish and Japanese.
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.
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 it blends in with the existing design, yet is very easy to spot right away.
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.
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 WordPress multilingual plugin for their eCommerce site.
After experimenting with another WordPress multilingual 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%.
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.
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.
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 after a google search and seeing Spanish or Chinese characters — if you don’t speak those languages, the first thing you would look for is a language switcher, right? But typically, language switchers are one of four things:
If someone can’t read your site, they’re going to close the browser tab. They might try using google translate, but the results won’t be as good as if you use a language switcher. If it’s difficult to find your 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. Ideally, you should be able to do all of this without needing to use add-ons. So let’s take a look at some best practices for displaying a language switcher.
Multilingual plugins for wordpress.org such as WPML and Polylang usually offer automatic translations (or machine translations) in dozens of different languages. However, unlike WPML and Polylang, Weglot 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 multi languages (and often also multiple regional websites). If you’re running a WooCommerce store, think about the territories you sell to.
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.
It shouldn’t take visitors more than a couple of seconds to find your 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 navigation as a menu item.
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 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 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 multilingual WordPress 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 language switcher so visitors can still choose their preferred language.
Most translation plugins 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 language flags. Many multilingual WordPress plugins like WPML, Polylang and Weglot 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 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 is 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.
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.”
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 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) in the WordPress backend. On this screen, you can choose:
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. You can choose from a menu item, a language switcher widget, a shortcode, or in the source code:
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, it’s 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. Another option if my theme had a widget area in the header is to display the switcher that way.
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:
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 including custom post types and custom taxonomies.
“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. It’s a user-friendly and flexible alternative to WPML or multisite.
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 new 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 is a key component of any international website, and, armed with this knowledge, designers can create translation experiences that empower users rather than hinder them.
Some cookies are required to provide core functionality. The website won’t function properly without these cookies and they are enabled by default and cannot be disabled.
Any cookies that may not be particularly necessary for the website to function and is used specifically to remember preferences or to help us improve our website by collecting and reporting information on its usage.
Let Laura tell you in less
than 2 minutes.