When working with Multilingual WordPress site, you’ll need a Language Switcher as well. In this tutorial, we’ll create a WordPress Language Switcher which can work with any translation plugin.
This tutorial is just a showcase on how something can be done. There are already a lot of great WordPress plugins used for creating multilingual sites which incorporate their own language switcher.
While I was working on a new project idea, I wanted to provide two languages: English and Croatian. Since this project is an MVP, I wanted a simple solution for this without too much work.
What I needed:
- Have a way to switch languages
- Provide a translation of text
This solution won’t be there to change slugs or URLs or anything like that, but if you have a solution for that, this should work as well since it changes the
locale of WordPress.
For translating the text with our WordPress Language Switcher I decided to use the Loco Translate plugin. This plugin provides a simple way of translating text and create new .po/.mo files that WordPress will load on its own.
But, how will this be provided? We will use the filter
pre_determine_locale. This locale is used by WordPress core to determine a locale before it begins loading the locale from the settings.
That way, we’ll skip everything else what WordPress does to provide the language for the site and return the language we want early in the process.
Creating the Language Switcher
For this WordPress language switcher, we will use a simple flow. Due to that, you can create the switcher using the WordPress menu builder.
Preparing the menu
So, go to your menu builder in WordPress and create two menu custom links for this example:
- English with URL ?locale=en
- Your language (for example: Croatian with URL ?locale=hr)
Be sure to go to Settings > General and select the second language so WordPress core can download their core translations as well. Then, you can switch it back to English (if that was your default language).
This will then, on any page, append
?locale query and load the same page with the changed language.
How do you know which locale is correct? You can go to this page: https://translate.wordpress.org/ and find out which locale you need. We’ll use that information in the code.
Coding the Language Switcher
Let’s now create the code behind the WordPress Language Switcher. We’ll need this:
- Check for the
- Save that to a cookie
- Get value from the cookie if it exists and change the locale
You can add this code in your theme or as a separate plugin. I’ll create a plugin since it’s easier to remove the code from running. Add this code to the
set_locale will set the cookie for our language switcher if we have such query parameter. The method
get_locale will filter the locale before WordPress loads the default locale.
Get the Locale from URL
Let’s now create a method that will check for the locale that we need from the
If you want, this method can return directly the
$_GET if it’s set and instead of using
locale=en, you could use
locale=en_US. In this method, we are returning the second language as
hr which is the Croatian locale.
Saving the locale from WordPress Language Switcher
We’ll now work on the
We are setting the cookie
my_language to 1 year. You can change that and the cookie name for your needs. Once we are setting the cookie, we are also switching it directly just in case (although, that might be skipped since we filter it later).
Filtering the WordPress Locale
Now that we have a way to store the language we choose, let’s use that to filter the WordPress locale using the method
get_locale which is hooked to the filter
In this method we’ll first check for the $
_GET parameter. If that’s set, we’ll use that information. If not, we’ll check for the cookie or default to the provided locale.
Now, you just need to go to Plugins and activate the Simple WordPress Language Switcher. Use the Loco translate to translate a text to your language. Then, if you’ve created a menu, click on those or visit your site with appending
?locale=your_locale. Just be sure to have your locale set inside of the code above.