Joomla! Documentation™

Tutorial
How to setup a Multilingual Joomla! Site

Articles in this Series

1. Introduction
2. Step 1: Installing a new language
3. Step 2: Creating a Content Language
4. Step 3: Enabling the Language Plugins
5. Step 4: Adding Multilingual Content
6. Step 5: Creating Menus for the Multilingual Content
7. Step 6: Duplicate your Template for each Language
8. Step 7: Adding a Language Switcher
9. Step 8: Exploring the multilingual site

Joomla! allows you to create easily a multilingual website, without having to install any third party extension. In this tutorial, you’ll find a complete walkthrough of the steps involved in creating a multilingual Joomla! site.

Step 5 - Creating menus for the multilingual content

Creating the 2 menus

It's now time to create a menu for each of the languages. We’ll need a menu pointing to the English articles and a separate menu pointing to the French articles.

• Navigate to Menus → Manage → Add New Menu.
• First create a menu for the French language articles:
  • Title: enter French Menu.
  • Menu Type: enter frenchmenu.
  • Description: enter a description, ie Menu for French content.
  • Click Save & Close.

Now create another menu for the English language:

• Title: enter English Menu.
• Menu Type: enter englishmenu.
• Description: enter a description, ie Menu for English content.
• Click Save & Close to create this menu.

You’ve now got two sets of content and two menus, ready to be filled with menu items.

Adding menu items

The two new menus are still empty, so let's add a set of menu items to them.

• Navigate to Menus → French Menu → Add New Menu Item.
• Menu Item Type: Select the type Single Article.
• Select the Article French Article 1.
• Menu Title: Enter French Article 1.
• Make sure the Menu Location is set to French Menu and the Language to Français.
• Click Save & Close.

Repeat the actions described above until you’ve got your three menu items in the French Menu, each pointing to one of the three available French articles. Now navigate to Menus → English Menu and create three menu links pointing to the three English articles. To do this, repeat the actions above and change the details as needed.

Assigning language-specific homepages to the new menus

Your English and French menus both contain all necessary menu links. However, Joomla! needs to know what menu link in either of these menus should be the default link (the default homepage to be displayed for either the English site or the French site). Let’s set one of the menu items to be the default homepage for this language.

• Navigate to Menus → Manage and click on English Menu to open it.
• Click on the star in the Home column, next to the first article.

The star icon will be changed into an image of the British flag, indicating this is the default page for the English part of the site.

• Navigate to Menus → French Menu and click the Home star next to the first French article. The star turns into a French flag.

Connecting menu links to their translated counterparts

Although you have two sets of articles (original articles and their French "translations"), up to now there’s no connection between these articles. Joomla! has no way of knowing which French article is the translated alternative of a particular English menu item. Let’s associate the English menu items with their translations.

• Navigate to "Menus → French Menu and click the first menu item to edit it (in our example, French Article 1 menu item).
• Click on the tab Associations and open the English (UK) drop-down list. Select the appropriate English menu item: English Article 1.
• Save & Close this menu item.

Repeat the previous steps to create associations for all three French menu items. Now, you should have three Menu Items associated with French Menu Items. Note: Hover your mouse cursor over the EN icon to see the associated menu item.

Finalizing the new menus by adding menu modules

Both new menus are now created, and menu links have been assigned to them. However, when you create a new menu in Joomla, you’ll need to add a menu module in order to be able to display the menu on the frontend of your site. Let’s do it!

• Navigate to Menu → Manage
• Click on Add a module for this menu type in the column Linked Modules. It will open a new Menu Module.
  
• In the Modules:Menu screen, enter the following details:
  • Title: French Menu.
  • Language: Select Français (FR).
  • Position: Select position-7.
  • Click Save & Close.

Repeat the previous steps in order to create a Menu Module for the English, and of course, don't forget to change the details:

• • Title: English Menu.
  • Language: Select English (UK).
  • Position: Select position-7.
  • Click Save & Close.

Unpublishing the default Main Menu

Apart from our two new menus, the website also contains the Main Menu which is part of the Joomla! default setup. If you have installed Joomla! without sample data, this menu contains only a Home item. Even if our bilingual site will use the new English Menu and the new French Menu, Joomla! still needs this default Main Menu and its Home Item to be able to function. Joomla! also requires the Main Menu module to remain assigned to Language: All. As this Main Menu doesn’t need to be displayed on the site, we’ll unpublish the associated menu module:

1. Navigate to Extensions → Modules, locate the Main Menu module and unpublish it.

The menus for the multilingual content are now set up. Just one more step to go: adding a language switcher module so that your users can select their prefered language.

Step 4 - Adding multilingual content

Step 6 - Duplicate your template for each language