Making your Joomla site multilingual can be easy with our step by step guide. Unlike to WordPress, you don't need to install anything extra. This tutorial can be used for all Helix Ultimate based templates.
Step 1: Install New Languages
In this tutorial, we will use English as the default language. And French & Arabic as the secondary languages to make our Joomla website multilingual. First, we need to install our preferred languages. Let’s see how to do that.
From the Joomla administrator control panel, go to Extensions > Languages
Click on the Install Languages button.
A list of languages will appear. Search and find your desired language, and install. The system will show the message “Installation of the package was successful” upon the language installation.
Step 2: Publish Content Language
In this step, we will create language profiles for the site contents. Go to Extension > Languages > Content Languages.
Select the newly installed languages and publish them.
Step 3: Assigning Language-specific Pages
Once you have installed and published your desired languages, it is time to create copies of the web pages. In our case, we are going to demonstrate using the Home page. From the dashboard go to SP Page Builder > Click on the Home page > Save > Save as Copy.
Create a copy of the Home page for each of the languages you have installed. Once you have created the copies, it’s time to edit the pages and assign them a language.
Let’s see how to do that for the French language.
Click on the Home (2) page to edit. Set the title to ‘Home- FR’.
Then, go to Options > Publishing > Language > Select French (Franch). Click Apply to save the changes.
Repeat the process for the other languages.
Now we’ll create menus for each of the languages. For English contents and another menu for French contents. For our tutorial, we will create separate menus for English, French, and Arabic. Let’s have a look at an example.
Go to Menus > Manage > Add New Menu.
Title: Home - FR
Menu Type: Home - fr
Click on Save & Close. Repeat the process for the other languages as well.
Once you have created the menus, it’s time to add menu items to our menus.
Navigate to Menus > Home - FR > Add New Menu Item.
Let’s see how to do that for the Home - FR menu.
- Menu Title: Home
- Menu Item Type: Select SP Page Builder > Page
- Select Page: Select Home - French
- Menu*: Home - FR
- Language: French (France)
Click Save & Close.
Tap on the star sign button for the language flag to appear. Follow the above method to create menu items for the other menus.
Step 6: Duplicate Template Styles
With each language, we need to assign the Helix Ultimate template to its content. To do that, we have to create duplicates of our Helix Ultimate template so that we get the same look and feel for each of our multilingual pages. This is pretty simple to do and will only take a minute.
Navigate to Extensions > Templates > Styles. Select shaper_helixultimate - Default and click on the Duplicate tab on the top.
Let’s see an example.
Click on the shaper_helixultimate - Default (2)
Style Name: shaper_helixultimate - FR
Default: French (France)
Save and go to Template Options > Navigation > Select > Home - FR
Repeat the process for as many languages you have selected to make your Joomla site multilingual. In our tutorial, we have selected English, Arabic, and French, so we had to create 3 duplicates of the original template. So that means, you now have shaper_helixultimate - Default (original), shaper_helixultimate - EN, shaper_helixultimate - AR, shaper_helixultimate - FR.
Step 7: Enable Language Filter Plugin
Now we need to enable the Language Filter plugin in Joomla. This built-in plugin will help Joomla to filter the contents according to the language we choose.
Go to Extensions > Plugins. Search for “System - Language”.
Language Filter and Language Code plugins will be displayed in the search result. Enable the Language Filter plugin.
Step 8: Add the Language Switcher Module
So far, we have three sets of Home pages and menus. Now we need a mechanism to switch between them. For example, while a visitor is on an English page, he/she needs a switcher to visit the French version of the current page.
To add the language switcher, go to Extensions > Modules, click ‘New’ and select the ‘Language Switcher’ module.
Then, set the Title to ‘Language Switcher’, Position to ‘Top 2 [top 2]’, and Show Title to hide.
Let’s see the changes on the frontend.
Wrapping Up
Congratulations! You now have a fully functional multilingual Joomla website. We hope this article will remove any confusion that you previously had on creating a multilingual site using Helix Ultimate.
If you want to make your articles multilingual, you need to make an association between two counterpart articles. This will let Joomla change the content accordingly when you switch the article. To know more about this, you can refer to our article on how to use the multilingual association feature.