{"id":344681,"date":"2023-04-03T13:17:33","date_gmt":"2023-04-03T13:17:33","guid":{"rendered":"https:\/\/colorlib.com\/wp\/?p=344681"},"modified":"2023-04-03T15:59:34","modified_gmt":"2023-04-03T15:59:34","slug":"wordpress-language-switcher","status":"publish","type":"post","link":"https:\/\/colorlib.com\/wp\/wordpress-language-switcher\/","title":{"rendered":"How to Add a WordPress Language Switcher to Your Multilingual Website"},"content":{"rendered":"\n

Turning your WordPress website multilingual can be a great way to reach new audiences. It’s also one of the top methods to make sure that you always present your content, offers, or services in a language that matches the reader’s preferences hand-in-glove. There’s just one problem with that – or a challenge, rather – how to actually add a language switcher module to your WordPress website?<\/p>\n\n\n\n

This is what we’re here to show you today. What follows is a quick beginner’s guide to website language switchers. We’re going to explain what a language switcher is, what it actually does, what the main types of language switchers are, and how to add one to your WordPress website.<\/p>\n\n\n\n

What is a website language switcher?<\/h2>\n\n\n\n

Simply speaking, a website language switcher is an item such as a drop-down menu, link, or button, typically in one corner of the page’s structure.<\/p>\n\n\n\n

For example, it can be something like this:<\/p>\n\n\n\n

\"An<\/figure>\n\n\n\n

The switcher enables the reader to change the language of the site’s content to one that suits them better. This can be incredibly helpful if your site caters to audiences in a handful of countries and you want to provide them with more options than just English.<\/p>\n\n\n\n

A language switcher can help foster brand retention, show that you understand your audience’s needs, and can deliver solutions tailored to them.<\/p>\n\n\n\n

Types of website language switchers<\/h3>\n\n\n\n

There’s a handful of language switcher types you can use on your website. First of which you’ve already seen in the example above. \u261d\ufe0f That demo from Duolingo’s website is a good example of an “icon plus text”<\/strong> language switcher.<\/p>\n\n\n\n

Arguably, it’s the best type of language switcher you can use since it presents flags of countries along with the name of the language in writing to make the selection highly scannable and super clear to readers.<\/p>\n\n\n\n

One simplification of this idea is to display text only<\/strong> – simply the name of the language on its own. Such language switchers are usually found in navigation menus or drop-downs<\/a>. That is because there’s usually not a lot of room for icons<\/a> in crowded site menus, plus they might overpower the rest of the menu.<\/p>\n\n\n\n

Here is an example of a text-only language switcher:<\/p>\n\n\n\n

\"IBM's<\/figure>\n\n\n\n

The next type of language switcher is the full-page website language switcher<\/strong>. The idea behind it is to not let the reader pass through until they decide and pick a specific language.<\/p>\n\n\n\n

A restriction like that is often needed on sites that are bound by law to limit some of their services or restrict them to certain areas. This sort of language switcher controls not only the content language itself but also the whole localization of the site<\/a>.<\/p>\n\n\n\n

Here’s an example of a language switcher like that:<\/p>\n\n\n\n

\"Adobe's<\/figure>\n\n\n\n

Benefits of making your site multilingual<\/h2>\n\n\n\n

Before you can add a language switcher to your website, you’ll need to make that site multilingual. The whole “making it multilingual” means that you’re simply adding other language versions to your site and filling them with content translations<\/a>.<\/p>\n\n\n\n

So it goes: multilingual website first, and then language switchers second. \ud83d\udc4d<\/p>\n\n\n\n

The benefits of making your site multilingual go way above just the mere fact that you can then put a language switcher on it. Here are some of the key ones:<\/p>\n\n\n\n

Reach a wider audience<\/h3>\n\n\n\n

A study by Statista<\/a> reveals that only 25% of internet users are native English speakers, while over 50% of all web content is in English. This gap creates a lot of opportunity for businesses that decide to offer different language versions of their sites. As of January 2023, there are 5.16 billion internet users worldwide, so the market for non-English content is quite huge to say the least.<\/p>\n\n\n\n

While there are products and services that can only be offered in certain areas, humans generally have similar needs when it comes to content consumption across the world. Having a multilingual website thus can help you reach new and potentially lucrative markets in non-English-speaking countries.<\/p>\n\n\n\n

Plus, even in countries where English is<\/em> the native language, like the United States, you’ll find sizable communities that speak languages such as Spanish, French, Mandarin Chinese, and more. A multilingual website can therefore expand your business to people of all languages, both domestically and internationally.<\/p>\n\n\n\n

Better multilingual SEO<\/h3>\n\n\n\n

Not every website owner knows this, but there’s something called multilingual SEO<\/a>. To give you the “in the nutshell” brief, Google basically presents different search results based on the language set in the user’s system and browser.<\/p>\n\n\n\n

Plus, interestingly, ranking for certain terms in English is way harder than ranking for them in Spanish or German. Once you add the fact that you might indeed have a good reason for reaching those international audiences, then dabbing into multilingual SEO is a very good idea.<\/p>\n\n\n\n

In simple terms, you want your content to be found regardless of the language in which the user enters the phrase into Google.<\/p>\n\n\n\n

Making your site multilingual and also making sure that the content is all well optimized and crawlable by Google is a great investment.<\/p>\n\n\n\n

Reduce bounce rate and increase conversions<\/h3>\n\n\n\n

CSA Research surveyed 8,700+ online consumers in 29 countries and found that 76% of them<\/a> prefer purchasing products with information in their own language.<\/p>\n\n\n\n

What does this mean in practice? For once, it means that there are lots of people who will leave your site immediately if they can’t find their preferred language version on it. Or, rather, they will go to a competitor who has that language version.<\/p>\n\n\n\n

Similarly, making your site multilingual gives you an edge over the competitors who didn’t make this move.<\/p>\n\n\n\n

Best practices when using a website language switcher<\/h2>\n\n\n\n

With the “why” out of the way, let’s now list some things to keep in mind when designing the language switcher for your site:<\/p>\n\n\n\n

Place the language switcher in a visible spot<\/h3>\n\n\n\n

The standard for language switcher placement is usually somewhere in the top-right corner – next to the main menu of the site, or in the footer. An example from Notion:<\/p>\n\n\n\n

\"Notion's<\/figure>\n\n\n\n

Or, alternatively, a lot of sites opt for displaying a language switcher that floats somewhere near the bottom-right corner and remains visible at all times. Like this one:<\/p>\n\n\n\n

\"Floating<\/figure>\n\n\n\n

No matter what specific placement you choose, the main goal is to make it as easy to find as possible. If someone doesn’t understand the language that the site is in, then the language switcher is literally the first thing they’re going to be looking for.<\/p>\n\n\n\n

Avoid using country flags on their own as the language switcher<\/h3>\n\n\n\n

Flags are great as a language identifier in the most basic cases. However, they’re also excluding big groups of users.<\/p>\n\n\n\n

First off, flags alone are not an accessible solution. Meaning, a visually impaired person might not either distinguish between similar looking flags or see them at all.<\/p>\n\n\n\n

Secondly, some countries might be home to two or more languages, so it’s not immediately clear which one the language switcher refers to.<\/p>\n\n\n\n

For example, the United Language Group points out<\/a> that though India uses Hindi and English as their official languages, the country is home to 448 unique languages. Using an Indian flag in the language switcher can therefore be confusing for Indian natives as they cannot know which language the flag represents.<\/p>\n\n\n\n

Using a flag plus the name of the language is a much better solution. It’s accessible and clear to everyone.<\/p>\n\n\n\n

\"Flags<\/figure>\n\n\n\n

Experiment with automatic language switching<\/h3>\n\n\n\n

Depending on what type of site you run and what type of content you offer, it might be a good idea to set the language switching operation to be triggered automatically.<\/p>\n\n\n\n

The way this works is that your language switching software can detect the language setting of the visitor’s web browser plus their location settings through cookies, and then adapt the site’s content based on that automatically.<\/p>\n\n\n\n

This enables your audience to have a seamless experience without having to interrupt their activities by looking for a manual language switcher. Ideally, your site visitors should not have to do any additional work to get the information they need.<\/p>\n\n\n\n

At the same time, your visitors don’t lose the ability to switch back or alter the language settings later on.<\/p>\n\n\n\n

How to add a language switcher to a WordPress website<\/h2>\n\n\n\n

If your site runs on WordPress<\/a>, then adding a language switcher to it – and actually making it multilingual under the hood – is very easy.<\/p>\n\n\n\n

To make it work, you’ll need the free TranslatePress<\/a> plugin. It’s one of the most popular translation and localization plugins for WordPress.<\/p>\n\n\n\n

You can get it installed straight from your WordPress dashboard<\/a>. Simply go to Plugins \u2192 Add New<\/strong> and search for “TranslatePress.” Then, click on Install<\/strong> and Activate<\/strong>.<\/p>\n\n\n\n

\"How<\/figure>\n\n\n\n

TranslatePress allows you to do a lot more than just add a language switching module to your site. In fact, you can use it to add complete translations of your website content into hundreds of supported languages, optimize for multilingual SEO, plus also enable automatic translations based on tools like Google Translate or DeepL<\/a>.<\/p>\n\n\n\n

But let’s focus just on the plugin’s language switching ability. Here’s how to set that up:<\/p>\n\n\n\n

Pick your languages<\/h3>\n\n\n\n

First things first, you’ll need to select the languages in which you want to display your site’s content. In the free version of TranslatePress, you can pick one additional language. To set this, go to Settings \u2192 TranslatePress<\/strong>, and use the section marked in the image:<\/p>\n\n\n\n

\"Adding<\/figure>\n\n\n\n

Click on Save Changes<\/strong> when done.<\/p>\n\n\n\n

Choose your language switcher<\/h3>\n\n\n\n

TranslatePress allows you to pick from three available types of language switchers. Actually, you can use all three of them at the same time.<\/p>\n\n\n\n

You’ll find those language switchers in Settings \u2192 TranslatePress<\/strong>, at the very bottom of the page:<\/p>\n\n\n\n

\"Switcher<\/figure>\n\n\n\n

Here’s what they are:<\/p>\n\n\n\n