Interested in having multiple languages for your website? Xili Language is one of the best free multilingual or language switcher plugin that is available for WordPress developer. It provides a function to change language with easy to use interface plus a rich setting page that requires only a bit time of learning.
Even though it’s easy to use, it can be a bit confusing to setup. In this tutorial, I’ll be showing the step by step in order to get this plugin ready for your website. This will cover the basic function of the plugin including website content translation, menu translation and enabling translation for custom post type.
Follow these steps and your website will be multilingual in no time.
Step #1: Installing and enabling the plugin
The installation process is similar to other WordPress plugins. You can either download it here or install directly from your admin dashboard by searching for ‘Xili Language’ in the add new plugin page.
After done installing, activate the plugin from your admin dashboard under plugin menu and we are ready to setup the language setting.
Step #2: Selecting or creating language
We can now setup the plugin under the settings menu. Just navigate to settings and select Xili language. See below screenshot.
Here we can start adding the preferred language that we want to add to our website.
I have set up my website for two languages, English and Malay. Just fill in the ‘Add a language’ section to add other languages and we are ready to create our first multilingual content.
Step #3: Creating multilingual content
Here comes the fun part that will make you realize how easy it is to translate your content using this plugin.
Create a new content normally you do with WordPress. Under the content field, you will now have a new options box to select the languages. See below for the screenshot.
If you are unable to see it, make sure that the option ‘Translation of this Page’ under screen option is checked. See below screenshot.
By default, the first language is selected. You can add the content for your first language and then create the content translation by clicking ‘edit’ beside the language in the language box.
The edit button will toggle and change to the language you have selected. Don’t forget to save the content before going to another language. Create some content for each language. When done, we are now ready for the multilingual menu.
Step #4: Menu setup
Xili language also has menu translation feature. Please follow below steps carefully because it can be a bit confusing to setup.
Go to ‘Appearance’ and select ‘Menus’ from the admin dashboard. We will first need to create the menu for both languages. Type the name English Menu and click ‘Create menu’.
You will see some new option in the left menu for Xili language option. Select ‘Pages’ for now, what we need to do is to add the appropriate menu from content that we have created from Step 2. Select all the pages for English language and click ‘Add to Menu’. Rearrange the structure by dragging them as desire and click ‘Save Menu’.
We are done for the English language. Now create the Malay language menu using the same step as the ‘English Menu’.
You should now have two languages menu under the menu drop down. If not, repeat Step 3 and make sure you follow every instruction carefully before proceeding.
We will now create another menu that will act as a parent menu for the ‘English Menu’ and ‘Malay Menu’ that we have created.
Name the menu Navigation Menu’ and click ‘Create Menu’. Under the ‘[©xili] Language list’ select your desired option for the menu. There are five options to choose from. I will explain each of them below.
Nav menu – All the languages will be shown and will redirect the user to the home page when clicked.
Nav Menu (w/o current lang.) – The active language is hidden (Toggle). Only the inactive language will be shown and will redirect the user to the home page when clicked.
Nav Menu Singular – All the languages will be shown and will redirect the user to the current page if the translation for the content is available.
Nav Menu Singular (w/o current lang.) – The active language is hidden (Toggle). Only the inactive language will be shown and will redirect the user to the current page if the translation for the content is available.
Nav Menu Singular (w/o curr. lang and if exists) – Not sure what’s the difference but from testing it is basically similar to Nav Menu Singular (w/o current lang.).
For this tutorial, I will select the ‘Nav Menu Singular’. Click the ‘Add to Menu’ to add the option to your menu.
Next go to ‘[©xili] Menus selection’ from the left menu and add the previous menus that we have created to match languages for the dropdown.
Click ‘Add to Menu’ and ‘Save Menu’ to save all the changes. Next select the ‘Manage Location’ tab from the top, and assign the ‘Navigation Menu’ to your theme layout. Click ‘Save Changes’ and go to your website.
Bravo! We are done. You should now see the multilingual menu in your website. Try clicking on the menu and your content will be change based on what language is currently active.
There is endless possibility what we can do with Xili Language. You can change the language list to country flag image, adding your own language and so on. Below I will show you how you can add multilingual function to custom post type that you have created or create by another plugin such as ‘eCommerce Product Catalog’. This is great if you have an e-commerce website and prefer your product description to have multilingual content.
Adding multilingual function to custom post
By default, only the current WordPress post and page type is available for translation. You can add another custom post by going to the setting page and selecting managing authoring rules tools tab.
Go to ‘Custom post authoring multilingual rules’ section and select your custom post type to enable multilingual function.
Good job! Now your custom post type will have the similar language options box as the default page type.
How to add language selection in different theme location
- Create a menu for language selection and add the ‘Nav Menu Singular’ to menu structure (right side). Add this to the location for language selection
- Create own menu for each language for example Main menu Eng and Main menu My. Add appropriate pages for each of them.
- Create another menu that will contain both menus created above (Main menu Eng and Main menu My). Add the menus via menus selection. Add assign this menu to the menu location.
- You are done!