Rate for post

In this tutorial, we provide a complete walkthrough of the steps involved in creating a multilingual Joomla! site.

1. Creating the 2 menus

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

Step 1: Navigate toย Menusย >ย Manageย >ย Add New Menu.

Step 2: Create a menu for the French language articles:

  • Title: ย English Menu..
  • Menu Type: enter englishmenu.
  • Description: Menu for English content.

Step 3: Clickย Save & Close.

Step 4:ย Create another menu for French language articles:

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

Step 5: Clickย Save & Close.

Lang1

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

2.ย Adding menu items

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

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.

3. Assigning language-specific homepages to the new menus

Letโ€™s set one of the menu items to be the default homepage for this language. Your French and English 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).

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

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: Save & Closeย this menu item.

Repeat the previous steps to create associations for all three French menu items.

Lang4

5. Finalizing the new menus by adding menu modules

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.

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

In theย Modules:Menuย screen, enter the following details:

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

Step 3: Clickย Save & Close.

Lang6

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

Step 5: Clickย Save & Close.

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

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

Comments

  1. Sandra Bruins

    Dear reader,

    I did this but it doesn’t work. My default is NL and when I go to the homepage of EN I get Call to a member function get() on null. The rest works, but home doesn’t. How do I fix this

Leave a Reply

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

Summer Sale Get 50% OFF for your purchase on today! Coupon code: SUMMER2024 Redeem Now
๐ŸŽƒ[Last call] Happy Halloween Sale๐ŸŽƒ! Get 50% OFF for your purchase on today! Coupon code: ETCOUPON50 Redeem Now