A multi-language site is a single website that’s reproduced and published in more than one language. Most of the content on the site is the same but is localized to reflect the language and culture of customers in various regions. As you can imagine, producing and maintaining a website with multiple language variants can be difficult and time-consuming. This can be done easily if you are building up a website using Umbraco…

In the Umbraco backend, go to the ‘Settings’ section, and click on the ‘Languages’ node. In here we can create a new language, for this tutorial, I am going to create a Arabic variant.

In a single language website, you will have one homepage. When we implement a multi-language website we will need to have multiple home pages, one for each language we want to implement. As we have two homepages you will also need to think how you want your websites URL’s to look. You basically have two options available to you, sub-domain, or, subdirectories. A sub-domain would look something like, ar.website.com.

The AR.website.com sub-domain will direct a visitor to the Arabic version. I’ve always found this approach to be a bit fiddly and not as good for SEO, instead the alternative approach is to use sub-directories, like http://www.website.com/ar/.

In case you have never set-up a host in Umbraco before, I’ll quickly cover it. In the Umbraco backend, go to the content section, right click on the homepage and select ‘Culture And Hostname’.

Creating Multiple Homepages

Now it’s time to create the second homepage. Under the content root, select properties and hit create and create a new homepage.. Before you start it is probably worthwhile checking that you can create a new homepage under the content route. So in the Umbraco back-end, go to the settings section -> Document Types -> Homepage (or whatever your homepage document type is called). In here make sure the ‘Allow At Root’ is ticked:

Dictionary

So now you know the basics of setting up a multi-lingual website, what data-types and settings you need and how to configure everything… we still have the one big dilemma to discuss… how do you implement multi-lingual values for things like placeholders and labels.

In most .Net sites, you would normally use a resource file, but this file is not easily editable by the content editor. Instead, Umbraco provides us with a Dictionary type. The dictionary type is very different from the C# dictionary. The C# dictionary is a key/value pair. In Umbraco, a dictionary is a key, multi-value pair. After you set-up multiple languages and create a new dictionary, you can add different values for each country as seen below:

Lastly, all we need to do is display the Dictionary. To do that we use this handy snippet

Conclusion

To create a new language, in settings we enable a new language, we create a new separate home page for that language under root and set the ‘Culture and Hostname’ settings to use the new language and add a hostname to a subfolder.