5/5 - (3 votes)

In this tutorial, you’ll find a complete walkthrough of the steps involved in creating a multilingual Joomla! site.

I. Creating the 2 menus

Please create a menu for each of the languages. You need a menu pointing to the English articles and a separate menu pointing to the French articles.

Step 1: Navigate to Menus > Manage > Add New Menu. First create a menu for the French language articles:

  • Title: French Menu.
  • Menu Type:  frenchmenu.
  • Description:  Menu for French content.

Step 2: Click Save & Close.

Lang1

Step 3: Create menu for the English language:

  • Title:  English Menu.
  • Menu Type:  englishmenu.
  • Description:  ie Menu for English content.

Step 4: 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.

II. Adding menu items

Step 2: Navigate to Menus > French Menu > Add New Menu Item.

  • Menu Item Type: Select the type Single Article.
  • Select the ArticleFrench Article 1.
  • Menu Title: Enter French Article 1.
  • Make sure the Menu Location is set to French Menu and the Language to Français.

Step 2: Click Save & Close.

Lang2

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.

III. 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.

Step 1: Navigate to Menus > Manage and click on English Menu to open it.

Step 2: 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.

Step 3: Navigate to Menus > French Menu and click the Home star next to the first French article. The star turns into a French flag.

Lang3

IV. Connecting menu links to their translated counterparts

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.

Step 1: Navigate to “Menus > French Menu and click the first menu item to edit it (in our example, French Article 1 menu item).

Step 2: Click on the tab Associations and open the English (UK) drop-down list. Select the appropriate English menu item: English Article 1.

Step 3: Click 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.

Lang4

V. 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!

Step 1: Navigate to Menu > Manage

Step 2: Click on Add a module for this menu type in the column Linked Modules. It will open a new Menu Module.

Lang5

Step 4: Enter the following details:

  • Title: French Menu.
  • Language: Select Français (FR).
  • Position: Select position-7.

Step 5: Click Save & Close.

Lang6

Step 6: 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

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:

– 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.

Leave a Reply

Your email address will not be published. Required fields are marked *

Join All-In-One Marketplace DEV package Access all 1000+ paid PRO items and save 99% compare with single purchase! More Details
Black Friday & Cyber Monday Sale! Grab 50% OFF for all products at AgeThemes. Code: BFCM50 More Details