By Md. Iqbal Hasan on Monday, 11 December 2017
Category: Tutorials

The Beginner's Guide to Create Multilingual Joomla Website

Joomla is considered as one of the most popular Content Management System (CMS) for managing dynamic websites. English is set its primary language initially, but it doesn't prevent you populating your site with content written in any other languages. Even it doesn't require creating multilingual options to do so.

However, a multilingual website does have the ability to show its content in multiple languages, perhaps with triggering a switch or button.

But the question is- if you find a website where contents in different languages are placed here and there, does it make any sense to you, and will you deal with them?

We know your answer- that's a big NO!

Genuinely, it's not a good practice having contents in multiple languages without having a multilingual option. It greatly makes the visitors confused which leads the reason they leave forever.

So, the notable factor's been found here- Multilingual Option but can you yet guess, why we're strongly mentioning that having Multilingual Option is beneficial for your site?

Well, you might already know- a multilingual website is able to hold the traffic twice sometimes even more than a single language based site does. So naturally, the conversion rate in a multilingual site is much higher than single language based one.

Joomla previously couldn't let users creating multilingual websites through its existing features. Sort of third-party extensions had to be used for doing so. But the stressful period is over now..

And the most exciting news is- Joomla currently is allowing users to create multilingual websites without using any 3rd party extensions and it's absolutely free of cost.

In this tutorial, I'm going to show you- how to create a multilingual site with Joomla, through TEN simple and straightforward steps. 

Let's have a quick look at the index.

  1. Install your Desired Language
  2. Enable Installed Language
    • Enable Language Plugins
  3. Create Multilingual Content
    • Create new Categories
    • Add contents
  4. Create Multilingual Menus
  5. Set Default Homepage for Each Language
  6. Display Menu Items on Front-End
  7. Enable Associations Component
  8. Make Association Between two Articles
  9. Duplicate the Template
  10. Add Language Switcher Module

If you are interested in creating the multilingual site using JA Multilingual Component, you are always welcome to check our another Comprehensive Guide from right here.​

        <h2> <span>Step 01 : Install your Desired Language<span class="redactor-invisible-space">​</span></span> </h2>      <p>This is the very first thing you need to do. Since <strong data-redactor-tag="strong" data-verified="redactor">English</strong>&nbsp;is set as the default language primarily, you have first to install your desired language to get started creating multilingual option. </p><p>Note that- a multilingual website doesn't automatically translate the whole content itself. So, if you are planning to make your site supports in two different languages, you have to create entire contents in that two languages.</p><p>Follow the below instruction of how you can install a new language.</p><ul><li>​<span>Go to&nbsp;</span><code data-redactor-tag="code" data-verified="redactor">Extensions&gt; Language(s)&gt; Installed</code></li><li><code data-redactor-tag="code" data-verified="redactor"></code>Click on <strong data-redactor-tag="strong" data-verified="redactor">Install Languages</strong><span>&nbsp;button at left-top.</span></li></ul><amp-img width="700" height="415" layout="responsive" src="images/easyblog_articles/510/01.png"></amp-img><ul><li>​<span>Use the </span><strong data-redactor-tag="strong" data-verified="redactor">Search </strong><span>button to find your preferred language and having found it, click on the </span><strong data-redactor-tag="strong" data-verified="redactor">Install </strong><span>button to install it.</span><span>&nbsp;</span><br></li></ul><amp-img width="701" height="439" layout="responsive" src="images/easyblog_articles/510/02.png"></amp-img>
        <div class="alert alert-warning" role="alert">I'm installing Spanish language for instance.<span class="redactor-invisible-space">​</span></div>        
        <h2> <span>Step 02 : Enable Installed Language<span class="redactor-invisible-space">​</span></span> </h2>      <p>Now, it's a must to enable the installed language before you proceed. Find the approach below.</p><ul><li>​<span>Go to <code data-redactor-tag="code" data-verified="redactor">Extensions&gt; Language(s)&gt; Content Languages</code></span><br></li><li>Click on the <strong data-redactor-tag="strong" data-verified="redactor">Publish Item</strong> button pointed on the screenshot below to enable the just installed language.<span>&nbsp;</span><br></li></ul><amp-img width="729" height="428" layout="responsive" src="images/easyblog_articles/510/03.png"></amp-img>
        <h3>Enable Language Plugins</h3>        <p>Make sure, the language plugins are enabled for the new language. You can enable language plugins from the <strong data-redactor-tag="strong" data-verified="redactor">plugin manager</strong>.</p><ul><li>​<span>Go to <code data-redactor-tag="code" data-verified="redactor">Extensions&gt; Plugins</code></span></li><li><span>Use the search box to find them quickly. Write <em data-redactor-tag="em" data-verified="redactor">language</em>&nbsp;on the box and hit enter.</span><span>&nbsp;</span><br></li></ul><amp-img width="621" height="409" layout="responsive" src="images/easyblog_articles/510/04.png"></amp-img><ul><li>Click <strong data-redactor-tag="strong" data-verified="redactor">publish </strong>button to enable both plugins.<span>&nbsp;</span><br></li></ul>
        <h2> <span>Step 03 : Create Multilingual Content<span class="redactor-invisible-space">​</span></span> </h2>        <p>Now, you are ready to generate multilingual content. But before that, let's create two new categories; one is for <strong data-redactor-tag="strong" data-verified="redactor">English </strong>and the other is for your desired language. <strong data-redactor-tag="strong" data-verified="redactor">Spanish </strong>is my chosen language for instance.&nbsp;</p>
        <h3> <span>Create new Categories<span class="redactor-invisible-space">​</span></span> </h3>        <ul><li><span>Go to </span><code data-redactor-tag="code" data-verified="redactor">Content&gt; Categories&gt; Add New Category</code><span>&nbsp;</span><br></li><li>Give a category <strong data-redactor-tag="strong" data-verified="redactor">Title </strong>for Spanish language, select <strong data-redactor-tag="strong" data-verified="redactor">Spanish </strong>from the language drop-down menu and click <strong data-redactor-tag="strong" data-verified="redactor">Save &amp; New</strong>.<span>&nbsp;</span><br></li></ul><amp-img width="953" height="582" layout="responsive" src="images/easyblog_articles/510/05.png"></amp-img><ul><li>&nbsp;<span>Give a category </span><strong data-redactor-tag="strong" data-verified="redactor">Title </strong><span>for English language, select </span><strong data-redactor-tag="strong" data-verified="redactor">English </strong><span>from the language drop-down menu and click </span><strong data-redactor-tag="strong" data-verified="redactor">Save &amp; Close</strong><span>.</span><br></li></ul><amp-img width="947" height="575" layout="responsive" src="images/easyblog_articles/510/06.png"></amp-img>
        <h3> <span>Add Contents<span class="redactor-invisible-space">​</span></span> </h3>     <p>Now, let's create articles for both Languages (<strong data-redactor-tag="strong" data-verified="redactor">English </strong>and <strong data-redactor-tag="strong" data-verified="redactor">Spanish</strong>). First let's create for English.</p><ul><li>​<span>Go to <code data-redactor-tag="code" data-verified="redactor">Content&gt; Articles&gt; Add New Article</code></span><br></li><li>​<span>Give the article title on the <strong data-redactor-tag="strong" data-verified="redactor">Title </strong>text box.</span><br></li><li>​<span>Put the content on the <strong data-redactor-tag="strong" data-verified="redactor">editor area</strong>.</span></li><li>Choose <strong data-redactor-tag="strong" data-verified="redactor">English </strong>from both the <em data-redactor-tag="em" data-verified="redactor">category drop-down</em>&nbsp;as well as <em data-redactor-tag="em" data-verified="redactor">Language drop-down</em>&nbsp;at the right side of the module.<span>&nbsp;</span></li></ul><amp-img width="875" height="556" layout="responsive" src="images/easyblog_articles/510/07.png"></amp-img>
        <div class="alert alert-warning" role="alert">Make sure, Published is selected on the <strong data-redactor-tag="strong" data-verified="redactor">status</strong>&nbsp;drop-down.<span class="redactor-invisible-space">​</span></div>      <ul><li>​<span>Click on <strong data-redactor-tag="strong" data-verified="redactor">Save &amp; New</strong> button at the top-left.</span><br></li></ul><br><p><span>Now, let's create another article for <strong data-redactor-tag="strong" data-verified="redactor">Spanish </strong>language. Follow the same procedure above.</span>&nbsp;</p><amp-img width="873" height="549" layout="responsive" src="images/easyblog_articles/510/08.png"></amp-img>
        <h2>Step 04 : Create Multilingual Menus</h2>        <p>Now, it's the time to create menus for each language. Let's create the menu for English language first.</p><ul><li>​<span>Go to <code data-redactor-tag="code" data-verified="redactor">Menus&gt; Manage&gt; Add New Menu</code>.</span></li><li><span>Give a menu name on the <strong data-redactor-tag="strong" data-verified="redactor">Title </strong>text box.</span></li><li><span>Write the menu type on the&nbsp;<strong data-redactor-tag="strong" data-verified="redactor">​Menu Type&nbsp;</strong><span>​text box.</span></span></li><li><span><span>Click on&nbsp;<strong data-redactor-tag="strong" data-verified="redactor">​Save &amp; New&nbsp;</strong><span>​button to add menu for the&nbsp;<strong data-redactor-tag="strong" data-verified="redactor">​Spanish&nbsp;</strong><span>​language.</span></span></span></span></li></ul><amp-img width="656" height="435" layout="responsive" src="images/easyblog_articles/510/09.png"></amp-img><p>&nbsp;Similarly, create another menu for the <strong data-redactor-tag="strong" data-verified="redactor">Spanish </strong>language.</p><amp-img width="644" height="459" layout="responsive" src="images/easyblog_articles/510/10.png"></amp-img>
        <h3> <span>Creating Menu Items<span class="redactor-invisible-space">​</span></span> </h3>      <p>Till now, the newly created menus are empty as we haven't added any sub-menu items. So, let's create sub-menus under those two menus. First, I'm creating a sub-menu under the main menu- <strong data-redactor-tag="strong" data-verified="redactor">English</strong>.</p><ul><li>​<span>Go to <code data-redactor-tag="code" data-verified="redactor">Menus&gt; English&gt; Add New Menu</code></span><br></li><li>​<span>Give a sub-menu title on the <strong data-redactor-tag="strong" data-verified="redactor">Menu Title</strong> text box.</span><br></li><li>​<span>Click on the <strong data-redactor-tag="strong" data-verified="redactor">select </strong>button next to the <strong data-redactor-tag="strong" data-verified="redactor">Menu Item Type</strong> option and a pop-up modal will appear.</span><br></li><li>​<span>Select&nbsp;<code data-redactor-tag="code" data-verified="redactor">Articles&gt; Single Article</code></span><br></li></ul><amp-img width="675" height="387" layout="responsive" src="images/easyblog_articles/510/11.png"></amp-img><p>Click on the <strong data-redactor-tag="strong" data-verified="redactor">S</strong><strong data-redactor-tag="strong" data-verified="redactor">elect </strong>button next to the <strong data-redactor-tag="strong" data-verified="redactor">Select Article</strong> option and from the next pop-up modal, choose the article we previously created for <strong data-redactor-tag="strong" data-verified="redactor">English </strong>language.&nbsp;</p><amp-img width="695" height="323" layout="responsive" src="images/easyblog_articles/510/12.png"></amp-img>
        <div class="alert alert-warning" role="alert">Make sure, English is selected under the Menu drop-down as well as <strong data-redactor-tag="strong" data-verified="redactor">Language drop-down</strong>*<span class="redactor-invisible-space"></span></div>       <p>Click on <strong data-redactor-tag="strong" data-verified="redactor">Save &amp; New</strong> to add another sub-menu.&nbsp;</p><amp-img width="874" height="672" layout="responsive" src="images/easyblog_articles/510/13.png"></amp-img><p>Unlikely the above instruction, create a sub-menu item for the main menu <strong data-redactor-tag="strong" data-verified="redactor">Spanish </strong>as well.&nbsp;</p><amp-img width="875" height="679" layout="responsive" src="images/easyblog_articles/510/14.png"></amp-img>
        <h2> <span>Step 05 : Set Default Homepage for Each Language<span class="redactor-invisible-space">​</span></span> </h2>     <p>Now, you have to define the article page in each language as their corresponding default homepage. Let's make the default homepage for English menu first. To do so-</p><ul><li>​<span>Go to <code data-redactor-tag="code" data-verified="redactor">Menus &gt; English</code></span><br></li><li>Click on the <strong data-redactor-tag="strong" data-verified="redactor">star icon</strong> pointed on the below screenshot and it'll turn yellow in color, meaning- the English article page has successfully set as your default homepage for English menu.<span>&nbsp;</span><br></li></ul><amp-img width="937" height="517" layout="responsive" src="images/easyblog_articles/510/15.png"></amp-img><p>&nbsp;Same instruction to be followed in order to set default homepage for <strong data-redactor-tag="strong" data-verified="redactor">Spanish </strong>menu.</p><amp-img width="920" height="502" layout="responsive" src="images/easyblog_articles/510/16.png"></amp-img>
        <h2> <span>Step 06 : Display Menu Items on Front-End<span class="redactor-invisible-space">​</span></span> </h2>        <p>In Joomla, the only way to show a menu item on website's front-end is to add a module for the menu item and show the module on front-end by setting a position. Find below- how you can do so;</p><ul><li>​<span>Go to <code data-redactor-tag="code" data-verified="redactor">Menus &gt; Manage</code></span><br></li><li>Click on the <strong data-redactor-tag="strong" data-verified="redactor">Add a module for this menu</strong> button next to the English menu.<span>&nbsp;</span><br></li></ul><amp-img width="885" height="549" layout="responsive" src="images/easyblog_articles/510/17.png"></amp-img><p>From the next window, give a title on the <strong data-redactor-tag="strong" data-verified="redactor">Title </strong>field, select English from the <strong data-redactor-tag="strong" data-verified="redactor">Select Menu</strong> drop-down and define the module position from the <strong data-redactor-tag="strong" data-verified="redactor">Position </strong>drop-down at the right sidebar.&nbsp;</p><amp-img width="839" height="508" layout="responsive" src="images/easyblog_articles/510/18.png"></amp-img><ul><li>​<span>Scroll-down the page and choose </span><strong data-redactor-tag="strong" data-verified="redactor">English </strong><span>from the language drop-down at the right-bottom.</span><br></li><li>​<span>Click on Save &amp; Close.</span><span>&nbsp;</span></li></ul><div><br></div><div>Now, follow the same instruction to add menu module for Spanish language.<span class="redactor-invisible-space">​</span><br></div><amp-img width="841" height="506" layout="responsive" src="images/easyblog_articles/510/19.png"></amp-img>
        <h2> <span>Step 07 : Enable Associations Component<span class="redactor-invisible-space">​</span></span> </h2>      <p>The most recent version of Joomla is packed with <strong data-redactor-tag="strong" data-verified="redactor">Multilingual Associations</strong> feature, that allows you to perform translating contents from one place. Make sure, the <strong data-redactor-tag="strong" data-verified="redactor">Associations </strong>option is enabled. To check and enable the association option.</p><ul><li>​<span>Go to <code data-redactor-tag="code" data-verified="redactor">Extensions&gt; Plugins</code></span></li><li><span>On installed plugin list, find the <strong data-redactor-tag="strong" data-verified="redactor">System - Language Filter</strong> and click on it.</span><br></li></ul>
        <div class="alert alert-warning" role="alert">To find it quickly, write <strong data-redactor-tag="strong" data-verified="redactor"><em data-redactor-tag="em" data-verified="redactor">language</em>&nbsp;</strong>on the search box and hit enter.<span class="redactor-invisible-space">​</span></div>       <p>Make sure the <strong data-redactor-tag="strong" data-verified="redactor">Associations </strong>option is enabled but if not, then toggle it to enable.&nbsp;</p><amp-img width="713" height="518" layout="responsive" src="images/easyblog_articles/510/20.png"></amp-img>
        <h2> <span>Step 08 : Make Association Between two Articles<span class="redactor-invisible-space">​</span></span> </h2>      <p><span>Suppose,</span><span>&nbsp;a visitor lands on an article page which is written in English. But unfortunately, he's from Spain. In that case, if you had previously been associated that article with its Spanish version, just by choosing the </span><strong data-redactor-tag="strong" data-verified="redactor">multilingual </strong><span>option, the visitor can see the article in his native language.</span><br></p><p>Let's see, how you can associate multiple articles with one another.</p><ul><li>​<span>Go to <code data-redactor-tag="code" data-verified="redactor">Content &gt; Articles</code>&nbsp;and open/edit the article.</span><br></li><li>Under <strong data-redactor-tag="strong" data-verified="redactor">Associations </strong>tab, click on the <em data-redactor-tag="em" data-verified="redactor">Select</em>&nbsp;button to choose the article to associate with, <strong data-redactor-tag="strong" data-verified="redactor">Save &amp; Close</strong>.<span>&nbsp;</span><br></li></ul><amp-img width="858" height="480" layout="responsive" src="images/easyblog_articles/510/21.png"></amp-img>
        <div class="alert alert-warning" role="alert">Use the create button to <strong data-redactor-tag="strong" data-verified="redactor">create </strong>the new article to associate with the article you are on the edit mode.<span class="redactor-invisible-space">​</span></div>     <p>Now you're ready to utilize the <strong data-redactor-tag="strong" data-verified="redactor">Multilingual Associations Component</strong> if you have successfully done the above steps.&nbsp;</p><ul><li>​<span>Go to&nbsp;<code data-redactor-tag="code" data-verified="redactor">Component &gt; Multilingual Associations</code></span></li><li>​<span>Choose an article from the <strong data-redactor-tag="strong" data-verified="redactor">Select Item Type</strong> category filter and select a language from the <strong data-redactor-tag="strong" data-verified="redactor">Language </strong>box. Click on the fetched article from below then.</span></li></ul><div></div><amp-img width="745" height="423" layout="responsive" src="images/easyblog_articles/510/22.png"></amp-img><p>Select the <strong data-redactor-tag="strong" data-verified="redactor">Targeted </strong>language from the right-top box to translate the article into.&nbsp;</p><amp-img width="945" height="540" layout="responsive" src="images/easyblog_articles/510/23.png"></amp-img>
        <div class="alert alert-warning" role="alert">Now the article on your desired language will be loaded on the right side of the screen. You can edit the both articles as per your needs.<span class="redactor-invisible-space">​</span></div>       <p>You can find two button at left-top to save the changes. Where- <strong data-redactor-tag="strong" data-verified="redactor">Save Reference</strong> button to save changes the first article and the <strong data-redactor-tag="strong" data-verified="redactor">Save Target</strong> button to save changes the second article.</p><amp-img width="941" height="623" layout="responsive" src="images/easyblog_articles/510/24.png"></amp-img><ul><li>Close the window once you're done.<span>&nbsp;</span><br></li></ul>
        <h2> <span>Step 09 : Duplicate the Template<span class="redactor-invisible-space">​</span></span> </h2>     <p><span>Now, you have to create two different templates for two languages. The approach is absolutely simple- just duplicate your default template twice and name them accordingly for the two languages.</span></p><ul><li>​<span>Go to <code data-redactor-tag="code" data-verified="redactor">Extensions &gt; Templates</code>. Duplicate your default template twice. (One for English and the other for Spanish)</span></li><li><span>To duplicate, select your default template and click on the <strong data-redactor-tag="strong" data-verified="redactor">Duplicate </strong>button at left-top.</span><br></li></ul><amp-img width="942" height="506" layout="responsive" src="images/easyblog_articles/510/25.png"></amp-img><ul><li>​<span>Click on your duplicated template&nbsp;</span><br></li><li><span>Modify <strong data-redactor-tag="strong" data-verified="redactor">Style Name</strong> as you prefer and choose <em data-redactor-tag="em" data-verified="redactor">English</em>&nbsp;from <strong data-redactor-tag="strong" data-verified="redactor">Default </strong>drop-down menu (for English)</span><span>&nbsp;</span><br></li></ul><amp-img width="960" height="500" layout="responsive" src="images/easyblog_articles/510/26.png"></amp-img><ul><li>&nbsp;<span><strong data-redactor-tag="strong" data-verified="redactor">Save &amp; Close</strong> the window.</span><br></li></ul><div>Follow the similar procedure from the template for <strong data-redactor-tag="strong" data-verified="redactor">Spanish </strong>language as well.<span class="redactor-invisible-space">​</span><br></div><amp-img width="960" height="478" layout="responsive" src="images/easyblog_articles/510/27.png"></amp-img>
        <h2> <span>Step 10 : Add Language Switcher Module<span class="redactor-invisible-space">​</span></span> </h2>       <p>Now, just one last task left on your hand. A language switcher allows the visitors switching language anytime they want. You can find language switcher module on the modules list.</p><ul><li>​<span>Go to <code data-redactor-tag="code" data-verified="redactor">Extensions &gt; Modules</code>&nbsp;and hit on the <strong data-redactor-tag="strong" data-verified="redactor">New </strong>button from the left top.</span></li><li><span>Find the <strong data-redactor-tag="strong" data-verified="redactor">Language Switcher</strong> module and click on it to go to its configuration mode.</span><br></li></ul><amp-img width="818" height="545" layout="responsive" src="images/easyblog_articles/510/28.png"></amp-img><ul><li>​<span>Give the module title on the <strong data-redactor-tag="strong" data-verified="redactor">Title </strong>field.</span><br></li><li>​<span>Select the module position from the <strong data-redactor-tag="strong" data-verified="redactor">Position </strong>drop-down.</span><br></li><li>​<span>Enable the option <strong data-redactor-tag="strong" data-verified="redactor">Use Drop-down</strong> if you want the language switcher as a drop-down menu.</span><br></li><li><strong data-redactor-tag="strong" data-verified="redactor">Save &amp; Close</strong> to successfully save the switcher.<span>&nbsp;</span><br></li></ul><amp-img width="941" height="611" layout="responsive" src="images/easyblog_articles/510/29.png"></amp-img><p>See, a language switcher option has been successfully added to the site front-end which allows readers/ visitors to switch content language just by a single mouse-click.&nbsp;</p><amp-img width="984" height="924" layout="responsive" src="images/easyblog_articles/510/30.png"></amp-img>
        <h2> <span>Conclusion<span class="redactor-invisible-space">​</span></span> </h2>       <p>This is the most straightforward approach to convert a Joomla website into a multilingual site within possibly the shortest time. If you find any of the above procedures critical, and fail to do by yourself, feel free to use the below comment section for letting us know. We would love to help you out.&nbsp;</p>
Leave Comments