How to create a multilingual (multi language) site in Joomla 3.x

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 Extensions > Language Manager

language_manager

2- Click the Install Language button towards the top of the page.

install_language

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.

install_language

5- When the language has been installed correctly, You should see a similar message:

Message

Installing Vietnamese was successful.

6- Now, the new language is showed in the list. Continuously, you go to Extensions > Language Manager. In here, you can install default language for front end (Installed-site, Installed-Administrator, and Content).

language_manager

7- In this Step, you will also go to create New Content Language. Click the Content tab, then click New button.

joomla3_-multilanguage_site_configuring_7

8- Create a new content language with unique parameters. For example, for Vietnamese the fields should be filled in this way

1

9- Click on Save and Close. You will see a message saying Content Language successfully saved:

9

10- With Step 10, you will go to Extensions and choose Plug-in Manager

10

  1. Look for one called System > Language Filter. The plugin ‘System – Language Filter’ has to be enabled and configured.

11

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.

top_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 Extensions > Module Manager > click the New button:

joomla3_-multilanguage_site_configuring_13

13- Select the Language Switcher in the modal popup window.

joomla3_-multilanguage_site_configuring_14

14- Enter the module name, make sure its set to published, select its position and click Save button.

language_swithcer

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:

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 Menus > Menu Manager > Add New Menu:

joomla3_-multilanguage_site_configuring_16

17- Enter all necessary fields for the Vietnamese language & English language and click Save and Close:

  • Vietnamese language:

vietnamese_menu

  • English language:

eng_menu

18- When you creating completely Main Menus for two languages, it will display like below image

menu_

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.

  • Click Menus > Main Menu en-GB > Add New Menu Item, you will see this page:

main_menu_en

  • 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

home

3. 1. 2. For Vietnamese language


20- Secondly, you will also can create English Menu Item that is similar to Vietnamese Menu Item:

vi-menu

  • Similarly, you can see English Menu Item after creating. you also click to “home”

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:

22- Access Extensions > Template Manager > [your_template] > Zo2

  • Create a profile name: default-vi by clicking Save As button which is available right next to the profile list.

specific_profile

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:

name-default

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.

use_profile

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-VN as a menu type you want to use.

menu-type

26- In Menu Assignments, assign all English menu for default profile & all Vietnamese menu for default-vi profile.

  • Click the Toggle Selection button to toggle menu separately that is created for a specific language.

For Menu Vietnamese:

toggle

For Menu English:

menu_default

  • Click the Save & Close button 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.

final_step

27- Save Changes

Check changed languge site. In our case, Template Style in Main Menu translated to “Vietnamese”.

So that’s what changed:

demo