See all tutorials

Tutorials » How to implement localization in a web application

Often the same web application needs to serve users from different countries and cultures. One of the main aspects of the localization is the ability to easy translate the application content in the language(s) used by the application users.

Webpagebytes CMS makes the localization process very easy, through the dynamic urls and Webpagebytes CMS Messages features.

The tutorial will use the menu site navigation created in a previous tutorial How to reuse content across web site pages.
Website menu navigation example

To localize the web application managed with Webpagebytes CMS take the following tasks

  1. Extract the text strings from the content
  2. Enable the required languages in the web application
  3. Translate the Messages in the required languages
  4. Replace the text strings with references to Messages
  5. Create new site urls to support the languages
  6. Test the localized pages

Extract the text strings from the content

Step 1

This steps requires to extract all individual texts that appear in content (in site pages and page modules) and add them as Message records.
The following strings are identified in the web menu navigation example
  • Home page
  • Demo menu
  • home
  • documentation
  • blog
  • download
  • about

To create a site message, a text identifier (Message Key) needs to be set.
At this step the text Messages are representing the default web application language, English (en).

Enable the required languages in the web application

Step 2

In Webpagebytes CMS administration interface navigate to 'Site settings' > 'Locale settings' and add the languages required by the web application.
This tutorial will enable French in addition to the default English language.

Translate the Messages in the required languages

Step 3

In Webpagebytes CMS administration interface navigate to Messages section add add translations for the new added languages.

Replace the text strings with references to Messages

Step 4

In Webpagebytes CMS administration interface navigate to site pages, page modules and replace the texts with references to the added messages.

Use the Freemarker wpbMessages model key ${wpbMessages["message_key_here"]} to insert the language specific text.
The home page code will become

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="./bootstrap-3.3.2-dist/css/bootstrap.min.css">
</head>
<body>
    <div class="container">
        <@wpbModule externalKey="b11743e9-f493-4c3f-a6fa-9823c6328cd3" />
        <h2> ${wpbMessages["Home.title"]} </h2>  
    </div>
</body>
</html>

Create new site urls to support the languages

Step 5

Webpagebytes CMS allows to create separate urls that are language specific in the sense that contains a language identifier in the hierarchical url part. In this way the web application from the current tutorial will expose the following urls
Url Description
/ The home page corresponding to the default language (en)
/about The about page corresponding to the default language (en)
/{language}/ The home page corresponding to one of the supported languages. /en/ and /fr/ will return the home page
/{language}/about The about page corresponding to one of the supported languages. /en/about and /fr/about will return the about page

When {language} url customization parameter is set, 'Overwrite from url' must be set to YES and 'Parameter locale type' must be set to 'Language'
Create the rest of the site urls with prefix /{language}/ to have all the content available in the supported languages.

Test the localized pages

Step 6

To load the French page just visit http://localhost:9090/fr/
Localized French web page with Webpagebytes CMS

To load the English page just visit http://localhost:9090/en/
Localized English web page with Webpagebytes CMS

The default language (en) version is still available at http://localhost:9090
Fork me on GitHub