Warm-Up
Today, English has become a global language and is one of the most popular languages on the internet. A large number of websites are created that prioritize or pay attention to posting content in English. However, not everyone can read and understand English. Having websites that support multiple languages opens up great opportunities to reach a wider audience, especially in the regions you’re looking to target. In fact, content administrators around the world have been doing this for years, and the demand for multilingual websites is increasing day by day. Fortunately, Joomla is one of the content management platforms that supports the most languages and is available in 75+. Therefore, building a multilingual website is also much easier with this platform.
If you were skeptical about the ease, I can ensure, starting a Joomla multilingual website is easier than you could imagine, simpler than it might sound. Let’s see!
So today, in this tutorial, I will show you how to create a multilingual website in Joomla 4. This way, you don’t have to use any third-party extensions, and of course, it’s completely free.
Now let’s go!
Step by step Setting up a Multilingual Website in Joomla 4
Follow along step by step to completely set up a multilingual website in Joomla 4.
Installing New Languages
In Joomla 4, there are two methods that you can use to install languages.
-
Install via Joomla Update
From the Home Dashboard, go to System, then under Install, click Languages to access the Extensions: Languages page.
Here, click the Install button on the languages you wish to install. You can install as many languages as you want.
For illustration purposes, in this article, I will install two additional languages: French and Chinese (Simplified).
-
Install Manually
With this method, you first need to download language packages from Official Joomla! Language Packages.
Then, go to System > Install > Extensions, upload your ZIP packages and install your languages.
Now, navigate to System > Manage > Content Languages and enable (publish) your languages.
* Notice: You can update/change language info by clicking on each language’s title and modifying its options, e.g. Titles, Title in Native Language, Language Tag, Image (Flag), Status, Description, etc. It’s a bit like a language profile that contains all the details Joomla needs to be able to use either the English or the French language as “switchable” content languages.
Enabling “System – Language” plugins
Now, we’ve completed installing new languages and published them for content. For the next step, we need to enable the language filter and language code plugins. This helps Joomla filter the content and show them based on the language you choose.
Navigate to System > Manage > Plugins, then search for “System – Language“.
Here, Joomla will display System – Language Code and System – Language Filter in the search result. Enable them both!
You can also modify the plugin settings by clicking on its name, for example, System – Language Filter. This plugin enables the CMS to recognize the different languages installed and display only the content relevant to the current language.
* Notice:
- This plugin filters the displayed content depending on the language.
- This plugin is to be enabled only when the Language Switcher module is published.
- If this plugin is activated, it is recommended to also publish the Administrator multilingual status mode.
- Item Associations — Set to Yes. This option allows item associations when switching from one language to another.
- Remove URL Language Code — This option removes the defined URL language code of the content language corresponding to the default site language when the SEF URLs feature is enabled/turned on.
Now that you’ve set up the language files properly and enabled Joomla’s built-in Language Filter. By default, this plugin will try to detect the language settings of the visitor’s browser and display the site in his language (if available).
Adding Multilingual Content
Now that you have multiple languages ready on your website. You can use them to generate multilingual content. But first, let’s create new categories and new articles.
- Create a new category for each language
- Create new articles in each language.
Add New Category
Let’s create separate categories for each language!
- Go to Content > Categories > Add New
- Give your new category a title
- Select a language from the drop-down
- Click Save & Close to complete
- Repeat the same steps for other languages
Add New Articles
Next, let’s add new articles for each language to create different language content.
- Go to Content > Articles > Add New
- Provide a title for your new article
- Choose a language for the article from the drop-down
- Compose/update your content
- Click Save & Close when you’re done
- Repeat the same steps for your other languages
Creating Multilingual Menus
Now you need to assign categories and articles on the Joomla menu. It will allow them to display on the front end. To do that, create each menu for each of your languages.
From the Home Dashboard, navigate to Menus > Manage > Add New. Enter a Title, choose a Unique Name, then press Save & Close.
And repeat for the other languages:
Add Menu Items
The new menus which you’ve just created above are still empty. We need to go ahead and add new menu items for each of the menus.
- Go to Menus > Main Menu (en-GB) and add new items
- Select a Menu Item Type
- Choose a category that corresponds to a specific language
- Choose a language from the drop-down
- Click Save & Close
Repeat the above steps for the other languages:
Right now, inside each main menu item, you need to set a default menu (e.g. Main Menu EN), for when you click on the Home menu item that will become the default Home item for English pages.
Add New Modules
In order to display a menu item on the website’s front-end, you must add a module for the menu item and indicate an exact position. Navigate to Menus > Manage, select a menu and assign it to a module, or go to Content > Site Modules to get started.
For detailed instructions on how to create a menu and then assign it to a module, please refer to this article.
- Go to Content > Site Modules > Add New.
- Under Select a Module Type, click Menu.
- Give the new menu module a Title. (Required)
- Select a language menu to assign to this module, e.g. Main Menu (en-GB).
- Specify a module Position to feature it on your site.
- Choose a language from the drop-down.
- Click Save & Close to apply.
Repeat the same steps for the other languages:
Back in Menus > Manage, you can see all your menus that have been linked to the respective modules.
Now, let’s move on to the next step!
Multilingual Associations
General speaking, this enables you to perform translating contents (articles, menus, etc.) from one language to another when you hit the language switcher. Make sure the Associations option is enabled by navigating to System > Manage > Extensions, search for “System – Language Filter” and check if the Item Associations option is toggled on (Yes).
Menu Associations
When adding a new menu item and assigning it a language, you can find the options for “Associations” in the “As Associations” tab that it will show. You can also select different menu items for different languages. The same goes for modules, articles, and other content items.
Click Save & Close when you’re done. Repeat for other menu items.
Do the same for articles, categories, and other language contents.
Multilingual Associations
Navigate to Components > Multilingual Associations:
Here are some main options of the components:
- Articles — You can select this filter to provide all the articles/categories of a language with associations.
- Contacts — lists contacts for language associations.
- Menus — With this option, you can associate languages for all your menu items.
- News Feeds — Helps translate feeds if you’re using the Joomla newsfeed component
Setting Default Page for Each Language
Now we’re going to define the home page for each language. This is one of the most important steps that need to be done.
- Navigate to Menus > Main Menu (en-GB)
- Click on the star icon (Set as Home) to set it as the default
- It will then be changed to the English (en-GB) flag to indicate that this is the default page for the Main Menu (en-GB) menu
- Repeat for the other languages
As for the French, Chinese, or whatever language you have:
Duplicating Template
With the different languages you have installed on your website, there must be a specific template for each one of them. Simply duplicate your default template and name them accordingly for each language.
Create Template Style for Each Language
- Go to System > Site Template Styles (under Templates)
- Select your current default template style, then click the Duplicate button at the top
- Rename the duplicated template for the EN language (for English language pages only)
Do the same for the fr-FR and zh-CN languages:
Creating Language Switcher Module
Now comes the final step!
A language switcher is a mechanism that allows site visitors to switch between languages anytime they want. By creating a language switcher module, you are going to feature a useful way for the visitors to easily view the content in their desired language.
- Navigate to Content > Site Modules.
- Click the New button in the upper left.
- Select Language Switcher as the module type.
- Give your new module a title, e.g. Language Switcher
- Assign a module position matching in with your template (choose from the drop-down)
- Enable the Use Dropdown option if you want your language switcher as a drop-down menu.
- Make sure to select All in the Language field on the right.
- Finally, click Save & Close to save the switcher and make it ready for use.
Okay, now it’s time to check the results on the front end.
If you want to change the order in which languages are displayed in the Language Switcher, you can do so using the Content Languages Manager.
- Navigate to System > Content Languages (under Manage)
- Drag and drop each language to your desired position, one by one.
- Review the changes on the front end. That’s it!
Phew! You’ve successfully created a fully functional multilingual website in Joomla 4. Congrats!
Wrap-Up
So I just showed you a straightforward approach to building a multilingual website in Joomla 4. Hope you enjoyed the article. Don’t hesitate to leave us your comments should you have any questions. Besides, check out our awesome Joomla 4 templates to get your own responsive, high-performance, and SEO-optimized websites. Thanks for reading, and stay tuned for future how-tos!
- 7+ Best WordPress Crypto Plugins - April 24, 2024
- Taking Inspiration From One of the World’s Leading Eyewear Ecommerce Sites: Eyebuydirect - March 22, 2024
- Navigating Success: The Role of UX/UI Agencies in Business Growth - March 12, 2024
Recent Comments