How to Add More Languages to a Joomla Site

3 Different Approaches to Multilingual Joomla Sites

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:

  1. Install a new language.
  2. Set up a content language.
  3. Enable the two language plugins.
  4. Publish the Language Switcher module.
  5. 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: 

login to admin

  • Go to Extensions > Language(s):

go to extensions languages

  • Click on the Install Languages button:

click install languages

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":

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

click install

  • After a few moments, you will see a screen like the one below, which should tell you that the installation was successful:

installation 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":

go to content languages

  • At the moment, only English is set up with the details that you need:

only english is listed

  • Click "New" in the top-left corner:

click new

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:

edit content languages

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

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.

url language code

  • "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.

p13 image

  • Finally, click on the "Save and Close" button:

click save close

  • You will see that French is now also listed as a content language:

french is listed now

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":

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:

click search

  • 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!

the only two plugins

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":

go to extensions modules

  • The module you want doesn't exist yet, so click "New":

click new

  • Choose the "Language Switcher" module:

select language switcher

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

note position 1

  • Click on the "Save & Close" button:

click save and close

  • Go to the front of the site and refresh the page. You should see your new module on the right-hand side:

go to the front end

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":

go to menus add new menu item

You are going to make a new menu specifically for you English content.

  • Title: English menu
  • Menu type: english menu

menu type english menu

  • Click the "Save and Close" button:

click save and close

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

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.

three different menus

Now that you have an English menu, make an English homepage too.

  • Go to "Menus" > "English menu" > "Add New Menu Item":

go to english menu add new menu item

  • Menu Title: English Homepage

menu title english homepage

  • Menu Item Type: Click "Articles" and choose "Featured Articles":

menu item type featured articles

  • Status: Published
  • Default Page: Yes
  • Language: English (en-GB)

published yes

  • Click on "Save & Close":

click save and 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.

english home page

Now repeat that process and create a French homepage.

  • Go to "Menus" > "French menu" > "Add New Menu Item":

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

enter details click save and close

  • You should now see that your French homepage has the French flag next to it:

french flag

  • 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:

both flags at the front end

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.

parts of the page 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.

site is set now

What's Next?

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.

Additional Reading

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.