Joomla Tutorial:
Building a Multilingual Site using the extension M17n

How to build a multilingual website in Joomla, one that would be divided into two or more sections, and each one of them in a different language? Is there a way to direct Joomla to separate and group pages and menu items according to the language they belong to, in a way that they don't get all mixed up? Lots of people wonder if something like this is possible. Just like those people, there was a time when I had to face the same situation of needing a bilingual website. I had to spend countless hours investigating, reading numerous forum threads, where everyone had a different opinion and nobody seemed to agree on how to achieve what I needed. Finding the solution to my problem was not easy for me, so when I finally learned the process, I thought I should write a detailed tutorial to help Joomla newbies, instructing them step by step, in simple terms, so they could comprehend the technique without a major effort on their part, regardless if they possess or not an extensive experience in Joomla.

Let's suppose our website should be divided into two sections: English and Spanish (Español). Let's imagine also that in the English section we would need an item with the name "Contact" displayed on the main menu. But it would be really important that when switching from the English section to the Spanish one, the "Contact" menu item would disappear and instead another one would take over in the same spot: the menu item "Contacto", which means "Contact" in Spanish. Both items, "Contact" and "Contacto" would be actually two different items placed side by side on the main menu, but each one of them would only show up in one of the sections of our website (one would be visible in the English section and the other one in the Spanish version of our website). Regularly, on a website that is not multilingual, if we created two items on the same menu, Joomla would display them together and at the same time, unless one of them was unpublished, but if both of them were enabled, there would be no way to let Joomla "understand" a particular item should be visible only in certain occasions and in another ones not. That's why we need to install extra components, which are totally free of charge and which will let us achieve that separation in our menu items and to turn our website into a multilingual one. The components I'm talking about are:

• The desired Joomla language translation package and
• Joomla multi-lingual content Multilang M17n by g17l.com

There is a wide variety of translation packages available for Joomla. I can't tell you which ones you should install since it only depends on your own particular needs. I personally chose two translation packages for my website: the Joomla Spanish Translation by TodosJuntos.org and the Joomla English (United States) Translation by Dave Morgan. I also installed the M17n extension, which is the one I'll show you how to use in this tutorial. M17n will let you separate your menu items and the articles linked to them according to the language they belong to.

Notice: For a more detailed information about the M17n extension, you may download its manual in Adobe Reader's format from here.

It is important to mention that neither the Joomla translation packages (regardless of the name "translation"), nor Multilang M17n will help you translate our own articles to another language. The translation packages help when our website visitors interact with our web pages. Let's say, for instance, that they do a search. The text Joomla will display will be in the language assigned to the section where the search took place. For example, when I did a search today under the keyword "autos" on the Spanish section of my website, among another things, this was the response I got from Joomla:

“Buscar palabra clave autos

Total: 7 resultados encontrados.”

But when I performed the same search (autos) within the English section of my website, Joomla responded:

“Search Keyword autos

Total: 7 results found.”

This is thanks to the translation packages I installed. On the other hand, what M17n does is making sure the menu items and articles written in different languages won't be displayed together, for instance, the ones I assigned to the group “Español” won't be seen within the section "English" and vice versa. If we want to translate our own writings, we can even translate them ourselves, or, if we don't know how, we may find someone to help us or simply use any program or a free online translation service. Here's a few you may use if you need to translate your writings:

• http://translate.google.com/#
• http://www.worldlingo.com/products_services/worldlingo_translator.html
• http://babelfish.yahoo.com/
• http://translation.babylon.com/

Now let me step you though the process to turn your website into a multi-lingual one.

Step N° 1: Installing the Language Translation packages and the extension M17n

First you'll have to download the Joomla language translation package(s) and Multilang M17n extension. The next step will be installing them from your Joomla administrator's page. If you are new at Joomla, when I talk about the "administrator's page", I'm meaning the URL where you find the control panel for your Joomla site. For instance, let's say your domain name is MyPersonalSite.com, your Joomla administrator's page would be:

http://www.mypersonalsite.com/administrator

So, open your Joomla administrator's page, login and go:

Extensions > Install/Uninstall

You'll find a "Browse" button right where it says "Upload Package File / Package File". Click on that button, select the file you need to install (start installing the language translation packages and finish with M17n). The files will be in a zip format and you won't need to unzip them. Click on "Upload File & Install". If the installation was successful, you will see a text displayed on the screen confirming this for you.

Step N° 2: Verifying if the M17n plugin and module are enabled

In order to do so go to:

Extensions > Plugin Manager

Look for the plugin "System Multilingual (M17n)". If it's enabled it will show a green check. If not, you'll see a red circle with a white "X" in the middle. In such case, just click on the red circle to enable the plugin.

Now we'll need to verify if the M17n Language Selector module is enabled and we'll need to position it on a place on our page where it will be easy for our website's visitors to find it, so they can decide in which one of the available languages they would rather read our articles. The M17n Language Selector module may look something like this:

Now let's go to:

Extensions > Module Manager

Look for "M17n - Language Selector" and click on it.

Make sure "Enabled" is set to "Yes", "Position" should be set to the area where you want your M17n Language Selector module to be displayed at.

For the "Menu Assignment" section we'll find three options:

1. All: If we select this the M17n Language Selector module will be displayed on every page on your site (this is the one I would recommend).
2. None: This is if you don't want the module to be displayed anywhere (choosing this option would not be a good idea, since your website users/visitors would have no way to select which one of the available languages they feel more comfortable with)
3. Select Menu Item(s) from the List : This is if you want to decide on which pages the module will be displayed (you should at least select the main menu)

Look at the Module Parameters on the right. I usually leave "Selector Prefix", "Selector Suffix", "Style for languages" blank, but that's totally up to you. For "Language Labels" I prefer it to be set to "Short Text (eg. English), but again, this is just my personal preference. You may change the settings for the "Module Parameters" as many times as needed, until you are completely satisfied with what you see. Just keep refreshing your page every time you make any changes for the M17n's module so you can see what happens every time you change the settings.

Important: As per M17n manual instructions, in order for the package to work, M17n menus need to have their menu style set to "List" and not to "Legacy - *". M17n is only implemented into 1.5 menus.

To change this go:

Extensions > Module Manager

Select the module corresponding to your menu (Main Menu by default).

Step N° 3: Assigning a language to your pages and menu items

When there are more than one language installed on a Joomla site, when creating a new article you'll notice on the right side of the page, under "Parameters (Advanced)", there is a menu with a drop down arrow that will let you choose what language that page belongs to, like this:

New Article "Content Language" Menu:

Make sure every time you publish a new article, you don't forget to select a language for it.

Now here's the part that will show you how to separate the menu items according to the language they belong to. Here's the trick: when you create your menu item, you'll find a new section that didn't exist before you installed M17n. This section is "M17n Parameters" and you'll see it on the right side of the page. Under that section there is a drop down menu "Language", like this:

New Item "Language" Menu:

By selecting a language here you'll be able to determine where that item will be visible. So, if I create two pages, one called "About us" (English), and another one "Acerca de mí" (Spanish), I will have to create ONE menu item for EACH one of them. The item linked to my page "About us" would be assigned to "English" and the item linked to the page "Acerca de mí" would be assigned to "Spanish" (remember, we do this selection under M17 Parameters on the right side of the page). What this will do for you is, when people click on the "English" link on the M17n Language Selector module, they will see the "About us" item ONLY, and if they click on the "Español" link, they will see just the "Acerca de mí" menu item. The "About us" item won't be displayed.

So that is basically what you need to know in order to have a multilingual Joomla site. I hope this tutorial could have been of some help to you. If you have any comments or questions, don't hesitate to post them at the bottom of this page. Thanks!