Multilingual website

Simon Grange.

 

Joomla 3 offers a very complete native multilingual system. In this chapter, we are going to create a site with 4 languages, English (which will be the default language), French, German and Arabic (written from right to left).

The site that is used as an example in this chapter is a brand new Joomla! site installed without sample data.

 

Install language packs on your site

First, we need to install the Joomla! language packs which correspond to the languages we want to add to the site. Since the version 2.5.7 of Joomla!, installing language packs has been made easy and can be done directly from the Backend.

To do so, connect to the site's Backend, select ExtensionsLanguage Manager and click the Install Languages button.

We'll be taken to the following page:

Joomla! languages installation

Install languages

Just select the languages that you want to install (English, French, German and Arabic in our example) and then click the Install button.

Now, if you select again ExtensionsLanguage Manager, you should see on the following page that the 4 languages have been installed and that English is the default language (if English isn't the default language, just click the yellow star).

Joomla! language manager

Language Manager

We are now going to create the content languages. To do so, click the Content tab on the left menu. Only one or two languages are currently available. To create a new content language, hit the New button.

You'll be taken to the following page. Fill in the fields, according to the information provided in the table below, in order to create a content language for each language that is installed on the site.

Joomla! new content language

New content language

 

  French English German Arabic
Title French English (UK) German Arabic Unitag
Native title Français English (UK) Deutsch Arabic Unitag
Language code fr en de ar
Image prefix fr en de ar
Language tag fr-FR en-GB de-DE ar-AA

 

Menus

Now that we've created our content languages, we are going to create the menus and the menu items assigned to each language.

 

Create menus

Select MenusMenu Manager. For now, you only have one menu (the Main Menu) which includes only one menu item (Home).
Tick this menu and click Edit.

To avoid confusion, rename this Menu “Main menu - All”, then select the type “mainmenuall” for this menu and save and close.

Then, click the New button.

You'll be taken to the following page. Fill in the fields, according to the information provided in the table below, in order to create a new menu for each language installed on the site.

New Joomla! menu

New menu

 

  French English German Arabic
Title Menu Principal Main Menu Hauptmenü القائمة الرئيسية
Menu type menuprincipal mainmenu hauptmenu arabicunitag
Description Main menu of the site's French part Main menu of the site's English part Main menu of the site's German part Main menu of the site's Arabic part

 

Besides the site's main menu, we now have our 4 menus, one for each language:

Joomla! menu manager

Menu Manager

 

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.

Click the main menu and then the New button, you will see this page:

Joomla! new menu item

New menu item


1 - Select Articles → Featured Articles
2 - Home
3 - Main Menu
4 - Yes
5 - English
Once all fields have been filled, click the Save & New button.

Let's now create the menu item for the French language:

1 - Select Articles → Featured Articles
2 - Accueil
3 - Menu Principal
4 - Yes
5 - French

Click the Save & New button and create the menu item for the German language:

1 - Select Articles → Featured Articles
2 - Home
3 - Hauptmenü
4 - Yes
5 - German

Click the Save & New button and create the menu item for the Arabic language:

1 - Select Articles → Featured Articles
2 - منزل
3 - القائمة الرئيسية
4 - Yes
5 - Arabic Unitag

Each language now has its own default menu item. If you click the Menus menu in the admin drop-down menu, you should see the following image:

Joomla! menu multilinguale website

The 4 default menu items

 

Menu item association

Now that we've created our menu items, we are going to associate them. To do so, select ExtensionsPlugin Manager and edit the System – Language Filter plugin.

 

Plugin system language filter Just enable the plugin and set the "Automatic Language Change" and the "Item associations" plugins to Yes.

 

Click the Save & Close button.
Then, select MenusMain menu and edit the "Home" menu.
A new tab has been added to the top menu: "Associations". Click it and apply the following settings:

Menu item association multilingual

Menu item association

Then click the Save & Close button.

Now, you can see that a small chain icon is displayed on this item line, the icon tells you that this item is associated to the three menu items.

 

Modules

Create modules to display the menus

We are now going to create the modules that will display the menus on the site. Select ExtensionsModule Manager.

If you started from a blank Joomla! site, you should have only 3 modules.
Edit the "Main Menu" module, rename it to "Main Menu All" and disable it.

Click the New button and select "Menu", you'll be taken to the following page:

Module menu Joomla!

 

We are going to create a module for each menu:

The French module:

  • 1 – Title: Menu Principal
  • 2 – Position: Right [position-7]
  • 3 – Language: French
  • 4 – Menu to display: Menu Principal

Click the Save & New button.

The English module:

  • 1 – Title: Main Menu
  • 2 – Position: Right [position-7]
  • 3 – Language: English
  • 4 – Menu to display: Main Menu

Click the Save & New button.

The German module:

  • 1 – Title: Hauptmenü
  • 2 – Position: Right [position-7]
  • 3 – Language: German
  • 4 – Menu to display: Hauptmenü

Click the Save & New button.

The Arabic module:

  • 1 – Title: القائمة الرئيسية
  • 2 – Position: Right [position-7]
  • 3 – Language: Arabic Unitag
  • 4 – Menu to display: القائمة الرئيسية

Click the Save & Close button.

All Menu modules have been created.

 

Add the Language Switcher module

The next step is to create a Language Switcher module. Enter its title, the position "Right [position-7]" and set the language parameter to "All".

If you access the home page, you should see the following:

Home page without article

Home page

You can click the flags, the menu and connection modules will be automatically translated into the selected language. As Arabic is written from right to left, the template will change the layout of the modules as well as the layout of the contents.

Note: The Language Switcher module is not translated because we only created one module that is assigned to all languages. If we want this module to be translated, we just need to create one module per language, like we did for the modules displaying the menus.

Note: The order in which flag icons are listed, in the Language Switcher menu, is based on the way content languages are sorted. If you want to change this order, select ExtensionsLanguage ManagerContent and edit the ordering.

 

Create content

Item association

Since the version 3.0.2, a new and very useful feature has been brought to Joomla!.
We can now associate the categories, and later also the articles, in the exact same way that we associated menu items.
If you're new to Joomla, you probably don't know that before the version 3.0.2, we could only associate the menu items. It was not such a big deal for the small sites (with more or less 10 pages) as we just had to create one menu item per page, but for the others, it was just unmanageable.
So huge thanks to Benjamin Trenkle who wrote the code.

 

Create categories

Now that we've completed the navigation part, let's create the content. Select ContentCategory Manager.
Click the New button, create one category per language and define the language for each category (in the parameters on the right):

Categories Languages
French French
English English
German German
Arabic Arabic Unitag

When you've created your 4 categories, edit one of them (e.g. the English category) and associate it to the others:

Categories association multilingual website

Category associations

Then click the Save & Close button. In the Category Manager, you will see the small chain icon telling you that the categories are associated.

Joomla! categories manager

Category Manager

 

Create articles

Now that we've created the categories, we can create the articles. Select ContentArticle Manager and hit the New button.

To make sure that the associations work correctly, we will create two articles for each language. On article will be set to Featured and not the other. To do so, we're going to take the wikipedia page on Joomla! (http://fr.wikipedia.org/wiki/Joomla!) which is available in the four languages, but you can of course choose a different content.

For the French articles, we will proceed like this:

Article Featured Category Language
Joomla! Yes French French
About Joomla! No French French

Do likewise for the three other languages.

Once created, edit the two French articles and associate them to the corresponding articles in the other languages.
You should now have 8 articles (2 per language) and see the small chain icon:

Joomla! article manager

Article manager

 If you access the Frontend of the site, you should see this page:

Home page multilingual website Joomla!

Home page

This page is the Home page of "Featured articles" type.
If you click the flags, you will access the corresponding page that is displayed thanks to the association of menu items.
If you click the French category, you will be taken to a page displaying all the articles that belong to this category. If you click on the flags, you will see the corresponding categories thanks to the association of categories.
If you click the "About Joomla!" article (which can be accessed from the category page), you will be taken to a page displaying only this article. If you click the flags, you will see the corresponding article thanks to the association of articles.

Note: I speak French and English, but I don't know German or Arabic. If you know these languages and if you find some errors, please let me know in the articles comment boxes. Thank you.