Skip to main content

Multi-language Support

There are multiple components to multi-language support in Backlight, addressing different areas of the website. Let's first tackle language profiles.

Language Profiles​

To begin, go to Admin => Settings => Languages.

Here, you may create interface profiles for each language you would like to support. When more than one language profile exists and is enabled, the language picker will automatically appear in the top pallet of your webpage, allowing the user to select their preferred language.

For each profile, use "Edit" to adjust the profile settings, and "Manage Language" to set your text.

On the Edit Language page, pay close attention to the ISO Language Code. This will be important. For example, the language code for English is "en"; the language code for German is "de".

Authoring Content in Multiple Languages​

Note: At present, the following techniques are not available in our WordPress theme.

The first point to understand that that for each page created in Backlight, there is only ONE instance of that page. This means that content will appear in multiple languages all on a single page, and that we do not create separate pages for separate languages.

Instead, on a given page, we display only the content for the currently selected language.

Content is designated a language by assigning the ''data-lang'' attribute to any HTML element on the page, the value of which is the ISO Language Code for the language.

For example, consider the following:

<h2 data-lang="en">English</h2>
<h2 data-lang="de">Deutsch</h2>

When English is selected as the current language, only the first H2 element, with data-lang="en" will be displayed. Elements with any other data-lang value will be hidden. In this way, you may provide content for any number of languages, all in a single page.

We believe this method of authoring content allows for great flexibility, while also being very SEO-friendly. Whichever language you weigh more highly for SEO purposes should probably be top-most on the page.

You may wrap elements in a DIV block, as follows:

<div data-lang="en">
  <h2>English Heading</h2>
  <p>This is an English-language paragraph.</p>
</div>

Everything within the DIV will display for the chosen language.

Elements lacking a data-lang attribute will display for all languages. For example:

<h2 data-lang="en">English Heading</h2>
<h2 data-lang="de">Deutsche Überschrift</h2>

<img src="image.jpg" alt="I display for every language!" />

<p data-lang="en">Some English-language text...</p>
<p data-lang="de">Einige deutschsprachige Texte...</p>

In the example above, the IMG element will display for all languages.