This tutorial is going to show you how to configure a multi-language site based on Joomla 3.x. In order to do this:
1. Install a new Language
Installing a new language in Joomla 3.x is much easier than changing languages in Joomla 2.5. This is because of the new Install Language Tool from Joomla 3.x , which allows you to install new languages without manually needing to find and download them from other sites on the web.
1- In the top menu of you Administraton Panel, click
2- Click the
Install Language button towards the top of the page.
3- Here, you can find the language you want to install using Search box or by browsing through the list of available languages.
4- When you find a language you would like to install, select it by checking the checkbox in front of it’s name in the list and click on the
Install button in the Joomla toolbar.
5- When the language has been installed correctly, You should see a similar message:
Installing Vietnamese was successful.
6- Now, the new language is showed in the list. Continuously, you go to
Language Manager. In here, you can install default language for front end (Installed-site, Installed-Administrator, and Content).
7- In this Step, you will also go to create New Content Language. Click the
Content tab, then click
8- Create a new content language with unique parameters. For example, for Vietnamese the fields should be filled in this way
9- Click on
Save and Close. You will see a message saying
Content Language successfully saved:
10- With Step 10, you will go to
Extensions and choose
- Look for one called
Language Filter. The plugin ‘System – Language Filter’ has to be enabled and configured.
2. Create a language switcher
This module allows you to switch between available Content languages. Selecting a language will take you to the home page for that language.
12- In this step, you will go to Module Manager to create “Language Switcher” Module. This module will help your site change language in front end. To add a new Language Switcher module, navigate to the
Module Manager > click the
13- Select the Language Switcher in the modal popup window.
14- Enter the module name, make sure its set to published, select its position and click
Pre-text: This is the text or HTML that is displayed above the language switcher.
Post-text: This is the text or HTML that is displayed below the language switcher
Use Dropdown: (Yes/No). If set to ‘Yes’, the display parameters below will be ignored. The content languages native names will display in a dropdown.
Use Image Flags: (Yes/No). If set to ‘Yes’, will display language choice as image flags. Otherwise will use the content language native names.
Horizontal Display: (Yes/No). Default is set to ‘Yes’, i.e. to horizontal display.
Active Language: (Yes/No). Display or not the active language. If displayed, the class ‘lang-active’ will be added to the element.
Languages Full Names: (Yes/No). If set to ‘Yes’ and image flags set to ‘No’, full content language native names are displayed. If set to ‘No’, upper case abbreviations from the content language’s URL Language Code are used. Example: EN for English, FR for French.
15- After you finish creating Language Switcher:
3. Create Menu for every language
To this section, you will have a chance to learn about creating Main Menu for two languages.
16- Now you need to create a menu for every installed language and leave one additional for both languages. That is, if you have English and Vietnamese installed, you will have to create menus both for English and Vietnamese. Check, which of your menus is set to be the default menu (has a home icon). For example, if you have the Main Menu with the default menu item, you are going to use it for all languages, and additionally you will need to create two more Main Menus for English and the new language you have just installed.
- Go to
Add New Menu:
17- Enter all necessary fields for the Vietnamese language & English language and click
Save and Close:
- Vietnamese language:
- English language:
18- When you creating completely Main Menus for two languages, it will display like below image
3. 1. Create Menu Items
Let’s create one default menu item in each menu. The default menu item of the “Main menu – All” is already created, its name is “Home”. This menu item link is assigned to every language, Joomla! needs it but it won’t be displayed on the site.
In here, we also show you how to create Menu Item for Vietnamese & English language in Main Menu.
3. 1. 1. For English language
19- Firstly, We will guide you on how to create Menu Item for English Language.
Main Menu en-GB>
Add New Menu Item, you will see this page:
- This is image that you have completed creating menu item for English Language. You will click ” Home” to choose language for menu when it display in Home page
3. 1. 2. For Vietnamese language
20- Secondly, you will also can create English Menu Item that is similar to Vietnamese Menu Item:
- Similarly, you can see English Menu Item after creating. you also click to “home”
21- After you create New Menu Item in Main Menu. It will appear icons for two language in your site
Configuration! At this point, you configured the multiple-language in Joomla 3.x sucessfully.
But it is not enough to have a pefect multiple- language Joomla site if you are using one of Zootemplate's Joomla template packages.
There are some other steps you need to take.
3. 2. Assign Menu Item to a Profile
If your template is based on Zo2 Framework, you need to create profile for each language, then assign pages to languages. Perform the following procedure to have done our configuration for multiple language:
Template Manager >
- Create a profile name:
Save Asbutton which is available right next to the profile list.
23- Once new profile created, hit the
Save As Copy button in the toolbar to clone the template style for each language.
If everything goes correctly, you will see the message:
Message Style successfully saved
Duplicated Hallo template name looks as follows:
You can change its name directly in Style Name field of this duplicated template page.
24- Select your new profile from this
Use Profile drop-down, which will insert be used for your new language.
25- Once the new template style for Vietnamese language is ready to use, you need to assign it to the menu item that you want to look different than other languages’s site pages.
Select menu English in default profile, and menu Vietnamese in default-vi profile
- Open Mega Menu settings on the left side of Zo2 settings page, select
Main Menu vi-VNas a menu type you want to use.
26- In Menu Assignments, assign all English menu for default profile & all Vietnamese menu for default-vi profile.
- Click the
Toggle Selectionbutton to toggle menu separately that is created for a specific language.
For Menu Vietnamese:
For Menu English:
- Click the
Save & Closebutton to apply the changes.
26- Now, let’s take the final step. Just go to
Menu > select a specific Main Menu: here, we select
Main Menu vi-VN > click the
Menu Item to assign your just created template styles to this menu items.
27- Save Changes
Check changed languge site. In our case, Template Style in Main Menu translated to “Vietnamese”.
So that’s what changed: