In this tutorial, we provide a complete walkthrough of the steps involved in creating a multilingual Joomla! site.
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.
Youโve now got two sets of content and two menus, ready to be filled with menu items.
2.ย
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.
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.
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.
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.
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.
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.
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.
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
What template are you using? try switch to default template (Protostar) to check.