Looking for professional advice or a quote?

Answer within 2 hours!

Quotation Call us




How to Create a Multilingual Website in Joomla 3

Here is a step-by-step guide to creating a multilingual site in Joomla 3. In the example I am going to show you how to set up a multi language website with English as the default language and Italian as the second language. Joomla has over 50 language packs – you can apply the same method to get a multi language Joomla website for as many languages as you like.

To follow this tutorial, you will need a freshly installed and configured Joomla 3 website uploaded and configured on your domain.

» How to choose the best domain for your international website

Step by step guide to correctly set up a multiple language website in Joomla 3

Step 1 – Configure Joomla

1.1 Check which language is installed

Check the default language installed with your Joomla. Logon to your admin panel and select Extensions / Language(s) from the navigation menu. In this example, English is the installed default front-end language. The Installed – Administrator tab will show the languages installed for the admin panel (usually you will not be concerned with changing these).

Step 1 - Check the default language installed with Joomla

1.2 Install the language pack for the second language

Now we will install the Italian language pack (a file containing all of the translations for Joomla default texts). Click the “Install language” button and a list of languages will appear. Check the language you wish to add and hit install.

Step 2 - install the second language

This will take a few moments before you see a success message. Returning to the Extensions / Language(s) page, you should see two languages now installed, with a gold star for your default language (see below):

Two languages now installed on website

1.3 Create the content language

Now we must create the content language for the second language and add the details so Joomla will know how to handle it.

Still on the Extensions / Language(s) page, select the Content Languages tab and hit the New button.

Add a content language to tell Joomla how to handle the second language

A configuration screen will pop up as shown below. The important fields are

  • Language Tag – used to set the website language meta tag, which is important for SEO. Most langauge codes are obvious, but some languages have their own special language codes such as de-ch for Swiss German. If you are unsure, here’s a full list of website language codes.
  • The URL language code gets tagged on to your website URL to distinguish the second language section of the website. In my case /it/ will get tagged on the end of all Italian language URLs as follows: mysite.com/it/.
  • The “Native Title” – is what will be displayed on the website front end to visitors, so this should be the language name in as written in the website’s second language.

Add a content language to tell Joomla how to handle the second language

Click Save and close when finished.

1.4 Configure the Language Filter Plugin

Now to switch on and configure the Language Filter Plugin. This plugin allows Joomla to filter and display the correct website content depending on the current language. Browse to Extensions / Plugins and search for “Language Filter” as shown below:

How to enable the Joomla Language Filter Plugin

Select the “System – Language Filter” plugin and a configuration screen will pop up as shown below. The important fields and recommended settings for website SEO are:

  • Status = “Enabled” for all multi-language websites.
  • Item Associations = “Yes”. This will allow you to link language variations of the same content pages and allow users to jump directly between the two. Without this enabled, clicking the language flags will return the user to the homepage of the language.
  • “Remove URL Language Code” = “Yes”. In our example this will remove the /en/ from the URLs of all English content – essential if you want your homepage to display as mysite.com rather than mysite.com/en/
  • Add Alternative Meta Tags = “Yes”. Important for multilingual website optimization, Alt language tags tell search engines where to find the same piece of content served in the other languages.

How to configure Joomla Language Filter Plugin

Click Save and close when finished.

Step 2 – Create multilingual website content

Time to create the website content.

2.1 Create Content Categories (optional but practical for large websites)

To organize things nicely, it is best practice to create a separate category in which you will add the content for each language.

From the Joomla Admin menu select Content / Categories / Add new category. For “Title” I will add “English”, and Language, I select “English (UK)”. Click “Save and new” and configure another category for your second content language, in my case, Italian.

How to create a category for website content

Click Save and close when finished.

The category manager screen should now contain 3 categories – in my case uncategorised, English and Italian.

The category manager screen showing 3 categories

2.2 Create your articles in the default language

Create an article in the default language. From the menu select Content / Articles / New article. Give each article a title, some texts for the page, and make sure you set the category to “English” (the category for the default website language), and the language filed to “English” too – see below.

Repeat this step at least 3 or 4 times so that your new multilingual website has a decent number of content pages for us to work with. You can change the page names and descriptions later.

How to create a Joomla Article in Default language

2.3 Create translated articles in the second website language

Now we will create the same articles as in step 2.2 for the second website language. This time I set the “Category” and “Language” to Italian as this is my second website language.

To ensure the website language switcher works correctly, I will need to associate each article with the corresponding article in the default language. Still in the article screen, click on the “Associations” tab. Clicking on “Select” produced a list of all English language articles from which I select the English language equivalent of the current Italian Article. The articles are now related.

How to associate language equivalent Joomla articles

Repeat this step at least 3 or 4 times so that your new multilingual website has some content pages to work with.

Click Save and close when finished.

» Safely Editing your Joomla Website

Step 3 – Set up Joomla Menus

Now we have 2 sets of articles – one for each language, it’s time to link the articles to menus items so that they become actual webpages. As you would expect, we’ll need a menu pointing to the English articles, and a separate menu pointing to the Italian articles.

3.1 Create a menu for each set of articles

From the navigation bar select Menus / Manage / Add new menu and create a menu called “English nav menu” as shown below.

Create a Joomla menu for the default language

Click Save and close” and create a similar Italian menu.

You should now have two sets of content, and two menus, ready to be filled with menu items.

3.2 Add menu items for the default language

The menus are currently empty so we must add items to each menu. Let’s add our first menu item to the English menu.

Navigate to Menus / “English nav menu” / Add new menu item”. Here is how to set up a menu item in a nutshell (there are other options but this will suffice for our tutorial):

  • Add a suitable Menu title – this will be the actual title that appears on your website
  • Set the language to English (or your default website language).
  • For Menu Item Type choose Articles/ single article.
  • Select the article that you want to link to the menu from the “Select Article” popup window.
  • Save and close.

How to add Joomla menu items

Repeat the above to create menu items for each English article.

3.3 Add menu items for the Italian language

Now repeat step 3.2 for the Italian articles and Italian menu making sure you set the menu language as Italian. Again, to get the Language switcher working correctly you will have to link the English menu items with their Italian equivalents using the Associations tab.

3.4 Set a language specific homepages

We must tell Joomla which menu will be the home page in each language. To do this navigate to Menus / English nav menu. Under the “Home” column each item has a greyed out star next to it. Click this star to set any item as the current language home page. If this has worked correctly, the country flag should now appear in place of the star!

How to set a language-specific homepage

Repeat for the Italian homepage.

Step 4 – Display the menus on your website

As with any Joomla menu, to show you multilingual menus on your website, you will have to display them through modules.

4.1 Display the Menus on your website

Navigate to Extensions / Modules and click the new button to create a new module. Select “Menu” from the list of module types. The following settings are enough for demonstration purposes:

  • TIP:Choose a Title so you remember what the module does (if you have a lot of menus you will be glad of this clarification later). Set Display Menu to “No” as you don’t want the title to show on your website.
  • Use Select Menu to choose the menu to display on your website
  • The Position field will determine where on the page the menu shows up. The options here will depend on the template you use. We use Gantry Template so “top-a” is a suitable position for the navigation menu.
  • Finally ensure the Language is set to English.

How to create a module to display your Navigation menu

Repeat the above to create a menu module displaying the Italian navigation menu on the Italian language pages.

4.2 Turn on the Joomla Language Switcher

Finally you turn on the Language Switcher so that users can manually change language on the website. This is done by adding a language switcher module to the website.

Navigate to Extensions / Modules and select “New”. From the next screen select under the column Module type select “Language switcher”. The following configuration will show a classic language switcher with a series of flags on your website to hop between languages:

  • Choose a memorable Title so that you understand what the module does at a later date. Set Show Title to “Hide” as we don’t want the module title to display on the front end of the website.
  • Ensure Language is set to All so that the language switcher appears on all pages.
  • Choose a suitable Module Position based on your Joomla template. This determines where switcher will appear on your website – usually upper right corner of your webpages.
  • Status = “Published”.
  • Click Save & Close

How to configure Joomla language switcher

Congratulations!!!

If you followed this tutorial through, you should now have a fully functional Joomla multi language website. You can toggle between content languages using the flag icons in the language switcher module.

You can add as many languages as you like to your website, following the steps above.

Here are some useful links to getting your multilingual website up and running:

» How to choose the best domain for an international targeting
» SEO tips for multi location businesses
» Download Joomla 3 here
» How good is your website? Take the test!
» Safely Editing your Joomla Website