How to Build a Bilingual Website

Building a bilingual website has never been a simple undertaking. Translating primary content is challenging enough but then translating all the smaller global content throughout the site, from navigation and CTA's to testimonials and blog posts, can be exhausting.

Any one who has attempted this knows Google Translate, while convenient and easy, does not do the best job translating content. It might get you 60-70% of the way but with some unexpected or confusing translations.

Marketpath CMS Makes it Easy

In Marketpath CMS, there are few ways you can go about doing this. I'll present one of them, which is the most comprehensive for a bilingual site. A multilingual site, with more than two languages, would require a different approach.

For a bilingual site, we'll add a new group with two fields to our header template - that way every single page of the site includes those fields. The editor simply selects the language of the page and its corresponding counterpart. In the image below, the page language is selected as English and the translated Spanish version of the same page is selected.

Our header template then checks if a corresponding language is selected and if so, shows the language button at the top of page.

Here's the code that performs this logic:

{% if entity.language.is_valid %}
  <li class="nav-item pt-2 px-5 fw-bold text-white bg-secondary">
    {% if entity.language.value == "spanish" %}
      <a class="text-white fw-bold" href="{{ entity.english_version.value }}">English</a>
    {% else %}
      <a class="text-white fw-bold" href="{{ entity.spanish_version.value }}">Espa&ntilde;ol</a>
    {% endif %}
  </li>
{% endif %}

Want More Details and Instruction?

Hopefully, it's pretty straightforward. If not, feel free to check out the How-to article How to Build a Bilingual Website for more granular details. Or send us your questions at support@marketpath.com. We're always happy to be your guide.