In the "Installing a New Multilingual Joomla Site" tutorial, you learned how to create a new multilingual Joomla website. This is the easiest method because Joomla does so many things automatically for you.
However, not all of us are going to be lucky enough to be in that situation. Some will need to translate an existing unilingual website. That is what you will learn by the end of this tutorial.
You are going to start with a normal Joomla website you built in the previous lesson. You will learn how to translate it into French. You're going to use the following five-step process:
- Install a new language.
- Set up a content language.
- Enable the two language plugins.
- Publish the Language Switcher module.
- Set up the menus.
Step #1. Install a New Language
Your first step will be to install the new language for your Joomla site.
- Log into the administrator area for your Joomla site:
- Go to Extensions > Language(s):
- Click on the Install Languages button:
In this example, we're going to install the French language for our site. This process will install many of the language strings we need to complete the translation of our site.
- Search for "French":
- Click "Install" next to the French result, as shown on the screen below.
Don't worry if it says that the language pack doesn't match the Joomla version. In my experience (especially with more popular languages like French) all of the language strings you need are going to be there.
This message may be showing because someone just hasn't tagged this language pack for the very latest release of Joomla.
- After a few moments, you will see a screen like the one below, which should tell you that the installation was successful:
Step #2. Add a Content Language
In this step, you're going to define the settings for the French content on our site.
- Go to "Extensions" > "Language(s)"> "Content Languages":
- At the moment, only English is set up with the details that you need:
- Click "New" in the top-left corner:
On this next screen, you can choose the flag, the settings, the URLs and other options for the French language.
- Title: French (FR)
- Title Native: Français (France)
Notice that these two settings are different. The Title box is the word for French according to the default language of the site, which in this case is English.
The Title Native box is the word for French in French.
If someone is browsing the site in English, they are going to see French referred to as French (FR). If someone is browsing the site in French, they are going to see French referred to as Français (France).
It is not essential to put (FR) and (France) after the title, but that might help eliminate confusion for people who don't speak the version of French spoken in France.
This is similar to the English (en-GB) setting that you saw earlier in this post:
- Language Tag: fr-FR
This is one of the trickier elements of this setup. You are going to use "fr-FR", but there are different possibilities here:
The lowercase "fr" is the way we refer to French. The uppercase "FR" refers to the French language as is spoken in France. But, you can also have versions of French spoken in Canada, Belgium, Switzerland, and other countries.
This site has a complete list of options: https://lingoes.net/en/translator/langcode.htm. For example, "en-GB" is the default for our site, but we can have "en-US" for American English, or "en-CA" for Canadian English.
And then we have multiple possibilities for Spanish, different possibilities for Portuguese. These different variations of English and French use different words and different spellings, and so it is possible to enter different choices in this language tag.
- The "URL Language Code" field refers to the letters that are going into the URL. If you have a contact page in English, it is probably going to start with the letters "en" before the word "contact". If you have a contact page in French, "fr" is going to be your choice for the URL.
- "Image" is more simply known as the flag. You can choose whatever flag you want to represent French. Although it may make more sense to choose the French flag. This is what people are going to see on the front end of the site when they click to change from one language to another.
- Finally, click on the "Save and Close" button:
- You will see that French is now also listed as a content language:
Step #3. Enable the Two Language Plugins
In this step, you will enable two different plugins that will power the multilingual features in your site.
- Go to "Extensions" >"Plugins":
- One plugin is called "System - Language Filter". The other one is called "System - Language Code". Both of these can easily be found if you type "language" in the search box:
- Those were the only two plugins that came back when you searched for "language". You will enable both of them to complete Step #3 of the setup process!
Step #4. Publish the Language Switcher Module
In this step, you are going to create a module that will show the language flags on the front end of the site.
- Go to " Extensions" > "Modules":
- The module you want doesn't exist yet, so click "New":
- Choose the "Language Switcher" module:
- Title: Language Switcher
- Position: position-1
Note that position-1 is the right sidebar area for the default Joomla template. If you are not using the default Joomla template, you may need to choose another position.
- Click on the "Save & Close" button:
- Go to the front of the site and refresh the page. You should see your new module on the right-hand side:
You can see the module but, oddly, it is blank. You can't actually see the flags yet. The reason that you can't see any flags is that you haven't actually defined any content as being specifically English or specifically French yet. That is going to be the fifth and final step in you process.
Step #5. Set up the Menus
- Go to the Joomla admin area.
- Go to "Menus" > "Manage" > "Add New Menu":
You are going to make a new menu specifically for you English content.
- Title: English menu
- Menu type: english menu
- Click the "Save and Close" button:
You are going to repeat the same process again because you also need to define a French menu for your French content.
- Click "New"
- Title: French menu
- Menu type: french menu
- Click "Save and Close".
You now have three different menus. All of your English links are going to be put in the English menu. All of your French links will go into the French menu.
Now that you have an English menu, make an English homepage too.
- Go to "Menus" > "English menu" > "Add New Menu Item":
- Menu Title: English Homepage
- Menu Item Type: Click "Articles" and choose "Featured Articles":
- Status: Published
- Default Page: Yes
- Language: English (en-GB)
- Click on "Save & Close":
You now have an English homepage. You can tell it is actually your homepage because there is a British flag under the "Home" column. Normally you have a golden star in Joomla to mark the homepage.
With multilingual sites, you have the language flag in order to indicate that this is a homepage for this particular language.
Now repeat that process and create a French homepage.
- Go to "Menus" > "French menu" > "Add New Menu Item":
- Title: French Homepage
- Menu Item Type: Featured Articles
- Status: Published
- Default Page: Yes
- Language: French (FR)
- Click "Save and Close".
- You should now see that your French homepage has the French flag next to it:
- If you go to the front of your site and refresh your homepage, you are going to see both flags that are now available in the Language Switcher module:
If you click on the French flag, you should see that some parts of the homepage are now translated into French:
- The Login Form now has French text.
- The URL now contains /fr/. You now are browsing a home page that has "fr" in the URL instead of "en".
- The breadcrumbs are now in French.
Click on the English flag to test it. The Login Form has turned back into English, the URL contains "en", and the breadcrumbs have also been translated into English.
Excellent! It appears that you have now gone through the five-step process and have successfully set up your multilingual site.
At this point, you have a site that can be called "multilingual". You can move back-and-forth from the French version of the site to the English version.
However, there are limits to what you've done so far. Much of the site's content remains untranslated.
In the next tutorial, you'll start to translate your Joomla content.
- Introduction to Joomla Multilingual Sites
- 3 Different Approaches to Multilingual Joomla Sites
- Installing a New Multilingual Joomla Site
- What are Multilingual Associations in Joomla?
- How to Create a Multi-Lingual Sitemap with OSMap
Do you want to learn more about Multilingual Joomla? Join the Joomlashack Everything Club and instantly download the "Multilingual Joomla Explained" book by Igor Muhaljko and Steve Burge.