Last updated on:
You’re considering going multilingual. Congratulations on your decision. It is always good to expand your audience and reach international clients.
But, have you ever thought of your WordPress language switchinger?
Multilingual websites require more than simply translating the website’s contents. While translation remains the most important part of the process for your site, it is equally crucial that the translated content be accurate, search engine friendly and easy to find by visitors.
A good language switcher function is crucial for a user working on a multilingual WordPress site.
What is a Language Switcher and how does it work?
A language switcher can be a small button that has a huge impact.
A language switcher allows your visitors to switch between multiple languages that you offer and then choose which one they wish to use for navigation. It is extremely useful for websites with international visitors and allows them to have a better user experience.
Imagine a website with three languages. Now that your entire content has been translated into these languages, the only thing the user needs to do to view your website is to choose their preferred language. The users will be able to navigate your website in the language that they are familiar with, and perhaps even their native language.
Language switches are usually displayed at the bottom of a website, or in a menu or widget. You can use dropdowns to display complete language names, codes or flags.
What Are Your Options?
There are many ways to make a multi-language website. However, not all tools allow you to add a language swapper to your footer or menu.
The best way to add a functional, accessible language switcher is to use
1. TranslatePress
TranslatePress is a visual translation plugin, with an easy-to-use front-end translation editor and the capability to translate 100% of a website’s content.
The plugin provides 3 languages switchers that you can display and modify to suit your requirements. These include a floating language selection that is displayed on each page and a menu item and shortcode switches that are placed anywhere in your website (e.g. in the widgets or footers).
2. WPML
The WPML plugin, a back-end-based translation tool for multilingual websites is compatible with all WordPress plugins and themes.
WPML provides 4 options for language switches: footer, menu item and widget. Also, WPML has direct links to translate posts. Each of these can be customized in their own way.
3. Polylang
Polylang, another multilingual option for WordPress websites that integrates seamlessly with the platform, is also a popular choice.
It comes with a backend translation interface, and offers different display options as well as customization functions for the language switcher. Polylang also offers a menu and widget switcher. You can add it to any page of the website using a PHP template tag.
4. Weglot
Weglot, a SaaS service for small multilingual websites that store translations on its own servers. This is in contrast to other options that allow you full control of the translations and keep them stored on your site.
Weglot defaults to a floating language selection, although its appearance and position can be changed later. The switcher can also be customized to move it to the widget or menu.
All of these plugins allow for great customization, such as where and how they appear.
How To Add A Language Switcher to Your WordPress Website
Now that you are familiar with your options, let us show you how you can implement these features on your WordPress site.
To do this we will guide you through adding a language changer with TranslatePress, the multilingual WordPress plug-in. You can check out this post to learn more about language switches.
Step 1: Install the Plugin
To get started, install TranslatePress first on your WordPress website.
To install the plugin, first go to Plugins – Add New in your WordPress dashboard. Type “TranslatePress” in the search bar (upper right corner) and click Install Now on the first plugin that shows up. After installing the plugin, activate it.
Step 2: Add Languages
Once the plugin has been installed, you are able to choose and add your language to your website.
To do this, go to Settings – TranslatePress and, in the General tab, you’ll find the All Languages section. You can now open the dropdown to select the language you wish to include on your site. Don’t forget to click the Add button after each leach language you select.
Now Save your changes and let’s go to the next step.
Step 3: Select the Language Switcher Type
TranslatePress offers three ways to display your Language Switcher. These can all be used simultaneously, or you may choose to use one of the three depending on what suits your needs.
The 3 kinds of language switchesers are:
- Shortcode
- Menu Item
- Floating Language Selector
To choose your preferred language switcher go to Settings – TranslatePress and scroll just a little bit in the General tab. You’ll find the three types of language switchesers you can activate/deactivate by clicking the boxes to the left.
With any one of the three options you have, you can display complete language names or language codes. Or a combination. TranslatePress offers 5 ways to show your switchers:
Let’s now see how each one can be made to appear on our website.
Shortcode Language Switcher
Shortcode is the simplest way to place your language switcher as a widget in your sidebar or footer. You can use the shortcode depending on which WordPress theme you have to put your switcher elsewhere on your site.
To make your switcher show up on the site, first go to Appearance – Widgets and drag the text widget from the list of Available Widgets to your desired place, be it sidebar, footer, or other.
In the text widget, you’ll have to insert the Language Switcher Shortcode [language-switcher]. Optionally, you can add a title representative of your switcher to make it easy for users to identify.
Don’t forget to click Save in order for your newly added switcher to show up on your page.
If you’d like to customize the way your switcher looks, you can choose one of the 5 display options available in the General tab of the TranslatePress Settings, as previously shown.
Your language switcher will now appear where you have placed it.
Menu Item Language Switcher
The language switcher is also available in the main navigation menu or any other menu on your site, along with all other menu items.
To add this type of switcher, first, go to Appearance – Menus and select the menu you wish to add your switcher to. From the list of items to the left, extend the Language Switcher. You’ll find a listing of the languages that you have included to your site, as well as an “Current Language” item.
To make your drop-down type switcher appear in your menu you will need to add these items to the menu.
Make sure to hit Save Menu when you’re done. The
menu language switcher will look like the following:
Floating Language Switcher
This type of switcher can be especially useful if your visitors want to change the language anytime they like, since it’s displayed on every page of your site.
First, make sure the Floating Language Selection option is enabled in the TranslatePress Settings – General tab.
You can choose between the Dark or Light theme for your floating switcher and you can also place it on your website.
- Bottom right
- Bottom left
- Top right
- Top left
Don’t forget to click Save Changes after you’ve made your selections and that’s it! Look at the new floating switcher:
Step 4: Have Fun and Switch it Up
After you have completed the core configuration, you will be able to explore other customization options. TranslatePress also allows you to:
Add a custom language
Sometimes the language that you’re looking for might not be in the dropdown menu when adding a language to your site. You can still create and add your own language.
Just go to the Advanced tab in the TranslatePress Settings and scroll down to the Custom Languages section or click the Custom languages button at the top of the section.
Here you can insert any language, including its native name and code. When you are done, save all your changes.
After adding your new custom language, add it to your website’s languages from the General tab in the TranslatePress Settings so it can actually show up on the website. If you chose the Menu Item Switcher, don’t forget to add that custom language as an item to the menu as well (from Appearance – Menus).
Replace the default flag with your own
If your website is designed in a particular way and you don’t like the TranslatePress flags, you can replace them with any image you upload to it.
Just go to the Advanced tab in TranslatePress Settings, then go to the Custom Language section and fill in the fields with your custom language’s information and, under Flag URL, paste the URL of any image you have already uploaded to WordPress.
A custom language is a language which’s not in the dropdown list when you add languages. You won’t use the default flag so you will need to enter it again as custom.
Don’t forget the Menu Item Switcher to include it in your menu.
Show the opposite flag in the menu
If your website has a bilingual theme and you wish for the switcher to show the other language, you have two options. It all depends on which type you choose.
Method 1: Shortcode Switcher
To show opposing languages using the Shortcode Switcher you will need to install the Opposite Language Shortcode plug-in.
If your website has only 2 languages, here’s how the Shortcode Language Switcher should appear right after it has been installed.
Method 2: Menu Item Switcher
If you want to perform the same for a Menu Item Switcher you will need to follow some steps. This shouldn’t take too much time, but don’t be discouraged.
First: You can delete the “Current Language” menu item, leaving only the 2 languages you choose as the normal menu items. These should not be sub-items.
Next, go to Screen Options in the top right corner and make sure the checkbox for CSS Classes is selected.
Next, return to your menu. In each language’s CSS Options Class, insert the customized CSS. Make sure you replace the last section with the language of your website.
.translatepress-en_US .tp_en .translatepress-fr_FR .tp_fr
Keep in mind, you will always need to replace your languages in the URL. These are only examples.
Do the same for both languages and click Save Menu.
Next, you can go to WordPress – Appearance – Customize – Additional CSS and add some custom CSS like so:
.translatepress-en_US .tp_en, .translatepress-fr_FR .tp_fr display: none !important
This is how it should look at the end.
Before
After
That’s all!
There it is! This is how you can add a language changer to WordPress.
Now all that’s left to do is translate (if not already). Give your visitors from abroad the best user experience.
Have fun translating!