User

MATsxm/Setup a Multilingual Joomla Site-Adding a language

< User:MATsxm
This page contains changes which are not marked for translation.

Text to translate

Documentation all together tranparent small.png
Under Construction

This user page or section is in the process of an expansion or major restructuring. You are welcome to assist in its construction by editing it as well. If this user page or section has not been edited in several days, please remove this template.
This page was last edited by Sandra97 (talk| contribs) 19 months ago. (Purge)

Tutorial
How to setup a Multilingual Joomla! Site
Joomla! 
3.x

Joomla! allows you to to create relatively easy 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 1 - Installing a new language

Option 1: Setup a Multilingual site on an existing site

In this tutorial, the default language of the site is English. For users speaking another language, there should be a language switch available giving them access to the same content but in a different language. Here, we’ll use French as the second site language - but that’s just for demonstration purposes. You can follow along with the steps below using any language you need.
Although creating a multilingual website isn’t complicated, it involves following a number of essential steps. Therefore, we’ll start with a fresh install of Joomla! 3.x, without sample data. This way, we can keep things simple and get a good idea of the full process. After you’ve mastered the basic principles, it’s easier to apply them to an existing site that already contains content in one language.

Checking which languages are currently available

After installing Joomla, one language is available. You can check this by navigating to Extensions  Language(s). In this example, the currently installed language is British English (en-GB).

J3.x-Multilingual-Installed-Languages-en.png

In the side menu, Installed - Site indicates the language Joomla! uses in the frontend (texts such as Read more, Articles and Category). By clicking on Installed - Administrator you can see what language is installed for the backend.

Adding a new language

First, let’s add the language files for the language we want to use as the second language on our site. This involves two steps:

  • installing the French language package
  • telling Joomla! we want to use it as a content language.

Installing a new language package

Let's install the French language package.

  • Go to Extensions  Language(s)
  • Click the button at the top left Install Language.

A list of available translations is displayed. You can easily find the desired language by using the Search function. In this field, enter French.

J3.x-Multilingual-Install-Language-en.png

Check the box on the left side of French language and click the top left button Install. Then, a message is displayed: Installation of The French(FR) was successful. Mission accomplished! In the Languages screen (accessed through Extensions  Language(s)), you can now see that French (fr-FR) language is now available.

J3.x-Multilingual-Install-French-en.png

Option 2: Setup a multilingual site during a new installation

CHUNCK

Step 2 - Creating a Content Language

The next step is to create a Content Language. Although you’ve already installed a second language pack (in this example the French language pack), you still need to add the appropriate details for this language. To do this, you need to add what Joomla! calls a Content Language. It's a bit like a "language profile", containing all the details needed by Joomla! to be able to use either the English or the French language as "switchable" content languages.

J3.x-Edit-Content-Languages-en.png
  • In the Language Manager screen, click on Content Languages in the left sidebar. At this step, there is just one Content Language available: English.
  • Click the button New.
  • In the Edit Content Language screen, add the following details for the new language:
    • Title: Français (FR). This is the language name as it will appear in the lists.
    • Title Native: Français (FR). This the original language name. This title will be displayed in the Language Manager, in the list of Content Languages.
    • Language Tag: fr-FR. This should be the exact prefix used for the language installed (or to be installed). It consists of the language code (in lowercase), an hyphen and the country code (in uppercase). If you’re not sure about the Language Tag, you can find it next to the language name in the list of installed site languages in the Language Manager.
    • URL Language Code: fr. This is the code Joomla! will append to the site URLs. In our example, the output will be: www.example.com/fr/ if SEF is activated (if SEF is disabled, the output will be &lang=fr). Each installed language must have a unique code.
    • Image Prefix: select fr. Joomla! uses this code to display a country flag image enabling the visitor to select a site language. When fr is selected, Joomla! will display the flag image fr.gif located in the folder media/mod_languages/images/.
    • Status: this should be set to Published.
    • Access: this should be set to Public.
  • Click Save & Close. The Content Language profile is now ready!
CHUNCK

Step 3 - Enabling the Language Filter plugin

Joomla! comes with a language filter plugin, which enables the CMS to recognize the different installed languages and display only the content relevant to the current language.

J3.x-Language-Filter-Plugin-en.png

Edit this plugin to change its settings:

  • Go to Extensions  Plugins.
  • Search and edit the plugin System - Language Filter.
  • Switch its Status to Enabled.
  • Item associations: Set to Yes. This option will allow item associations when switching from one language to another.
  • Remove URL Language Code: To create search engine friendly URLs in the multilingual site, set Remove URL Language Code to Yes.
  • Click Save & Close.

The language files are new set up properly and you’ve switched on Joomla’s built-in Language Filter. By default, this plugin will try to detect the language settings of the visitor browser and display the site in this language (if available).

Step 4 - Enabling the Language Code plugin

Joomla! comes with a built-in language code plugin, which provides the ability to change the language code in the generated HTML document to improve SEO. The fields will appear when the plugin is enabled and saved.

  • Go to Extensions  Plugins.
  • Search the plugin System - Language Code.
  • Switch its Status to Enabled.

J3.x-Language-Code-Plugin-en.png

CHUNCK

Step 5 - Adding multilingual content

The next step is to create the actual content that needs to be displayed in different languages. To neatly organize the content that belongs to different languages, you need to create specific categories holding (in this case) English and French content.

Creating language categories

We’ll add two top-level categories: one which will contain our English content, the other one for the French content.

  • Go to Content  Categories
  • Click New at the top left to create a new category. This new category will become the parent category for all French articles, so let’s call it Français.
  • In the Language drop-down list, select Français.
  • As it’s a parent category, it should have No parent.
  • Click Save & Close.
  • Repeat these steps to create a second category for the English Articles called English. Set the Language to English.
  • You now have two categories in your site! The Categories screen should now contain a parent category called Français and one called English. You'll may need to organize the site content using subcategories of these two main categories. In this example, we'll not create any subcategory.

J3.x-Multilingual-Create-Categories-en.png

Adding content to the new categories

Next, create a set of (dummy) articles. We’ll create a few English articles and their French counterparts. In this example, we’ll create four articles in the English category and four articles in the French category.

  • Navigate to Content  Articles.
  • Create a new article called English Article 1.
  • Add some dummy text.
  • Make sure to assign the article to the English category.
  • In the Language drop-down list, select English.
  • Repeat the actions described above step to create a set of articles called English Article 2, English Article 3.

You now have three English articles. Instead of creating three corresponding French articles from scratch, let’s copy the English articles. To do this:

  • Select all three articles in the Content  Articles screen and click the Batch button of the toolbar.
  • In the Batch process the selected articles popup screen, choose the following settings:
    • Set Language: Français.
    • Select Category for Move/Copy: French.
    • Click the Copy select box.
    • Then, click on Process.

J3.x-Multilingual-Batch-Articles-en.png

You’ve now got a set of six articles: three articles assigned to the English category and their copies, assigned to the French category. Open the first of the four articles that are assigned to the French category.

J3.x-Multilingual-Batched-Articles-en.png

Change the following details:

  • Title: enter the French title. In this case we’re only testing things out, so we won’t bother translating. Let’s enter French Article 1.
  • Alias: delete the content of the Alias field. Joomla! will add a unique alias for this article after saving it.
  • In the article text, just change a few words to be able to check later if the "French" text is displayed.
  • Status: change the status to "Published.
  • Click Save & Close.

J3.x-Multilingual-French-Articles-en.png

Repeat the steps above for the other French articles, and change the details accordingly. The output should be French Article 2, French Article 3, all assigned to the French category and to Language Français. The dummy content is ready. We have our two small groups of articles; each of these articles has been assigned to the appropriate language.

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

J3.x-Multilingual-French-Menu-en.png

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

J3.x-Multilingual-French-Menu-Item-en.png

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.

J3.x-Multilingual-Menu-Set-to-Home-en.png

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 now have three Menu Items associated with French Menu Items. Note: Hover your mouse cursor over the EN icon to see the associated menu item.

J3.x-Multilingual-Menu-Associations-en.png

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.
    J3.x-Multilingual-Add-Module-en.png
  • In the Modules:Menu screen, enter the following details:
    • Title: French Menu.
    • Language: Select Français (FR).
    • Position: Select position-7.
    • Click Save & Close.

J3.x-Multilingual-Menu-Module-en.png

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 7 - Duplicate your template for each language


We’ll now assign a template copy for each language. In this tutorial, we need a copy of the default template for the English content and one for the French content. In this way, we can assign different menus depending on the selected language (but not only, it also allows you to have different settings and styles according to the language).

  • Navigate to Extensions  Templates.
  • Select your default template and click on the Duplicate button.
    J3.x-Multilingual-Duplicate-Template-Button-en.png
  • Edit the duplicated template and change the details according to the language. You can assign the language-specific menu and, depending of the template you’re using, you can assign a language to the override and much more.
  • Repeat the above steps for the 2nd language.

J3.x-Multilingual-Duplicate-Template-en.png

Step 8 - Adding a Language Switcher


We have now two sets of articles: one French, one English. Of course, only one menu will be displayed on the frontend: either the English Menu or the French Menu. Joomla! would decide between serving English or French content depending on the language settings of the visitors browser. As we want the user to be able to switch from a language to another, we need to add the built-in Language Switcher Module.

  1. Go to Extensions  Modules, click on the button New and select Language Switcher module type.
  2. Enter a Title: for example, Choose your language.
  3. Position: Select position-7.
  4. Language: Select All, as this module will be displayed regardless of the selected language.

J3.x-Multilingual-Language-Switcher-Module-en.png

After saving this new module, have a look at the frontend of your site. Here it is, the langauge switcher is displayed in the right column.

J3.x-Multilingual-Langauge-Switcher-Frontend-en.png

Step 9 - Exploring the multilingual site


Congratulations! You have just built your first multilingual website! When the user visits the site using a browser which is set to use the English language, Joomla! will display the site with the English content: all articles and modules that have been assigned to English as their content language. Should visitors wish to see the French version of the site, they just have to click on the French flag icon to display the content in Fench.


Cat to: Tutorials Languages

Advertisement