Case Study: Building a multilingual WordPress website with Weglot

When building out this WordPress website I opted for Weglot to implement our two main site languages. Not only did I want a perfect translation of every piece of the website, I had some special requirements too. Follow me in my journey to implement Weglot on this website, and learn why this plugin might be a good fit for your next project.

I’ve done multilingual websites before I started building out this website. Up till now I always used WPML, as this seems to be the plugin to use when building multilingual WordPress websites. It does the job quite well, but to be honest, I always found it a bit cumbersome and confusing to work with. WPML also has a reputation for slowing down your website. In all honesty, I have to say I’ve never tested this statement myself. I can only tell that for instance the last multilingual WPML website I’ve built does have really good loading speeds.

When I started thinking about the Webmatic website, it was clear to me I wanted to implement two languages: Dutch (my native one) and English (the language I spent most of the time with online). I was pretty sure to use WPML once again to implement this functionality. Then a few months ago, I picked up some positive words on Weglot (I can’t remember anymore where it was) and decided to give it a try.

I’m very happy I did, because as it turned out, to me, the only real downside in using Weglot, was that I had to pay another monthly or yearly bill while having a lifetime license for WPML. And Weglot is not the cheapest plugin to get.

In this blog post I want to show you the real life development process of the Webmatic website focused on implementing Weglot.

Implementing Weglot in WordPress

Bold statements on the Weglot website
Bold statements on the Weglot website

Weglot is stating on their website that you can integrate it within minutes. For WordPress they even have a plugin you can use. So, that’s what I did. I installed the Weglot plugin and activated it.

Weglot settings in WordPress: enter the API key and choose your languages
Weglot settings in WordPress: enter the API key and choose your languages

First you need to enter your API key. You can use Weglot for free for 14 days (they also have a free tier for websites with limited requirements), so I made an account with them and got my API key. Then you need to choose your original language (mine was Dutch) and choose one or multiple destination languages. I added English as a destination language.

Then you need to implement a language switcher. Weglot gives you options to add it to your menu automatically, add it as widget, use a shortcode or add specific HTML into your page. Plenty of options. I opted to use a shortcode and added it with an add_action to the header of every page. With CSS I styled things up.

Here’s my code:

add_action ('genesis_header', __NAMESPACE__ . 'render_weglot_language_switcher', 12 );
function render_weglot_language_switcher() {
    include_once( CHILD_LIB_DIR . '/views/weglot-language-switcher.php');
}

In the view file weglot-language-switcher.php I’m rendering out the Weglot shortcode:

echo do_shortcode('[[[weglot_switcher]]]');

A few comments on this code. I’m using the Genesis framework for this website, so I add stuff to the ‘genesis_header’. I use Namespacing all the time in PHP. It makes everything more readable and more modular. I always render stuff out to the browser in a seperate view file. It keeps things nice and clean. So that explains the include statement. If you don’t want to use namespacing, just leave that part out and strip the backslash in front of your function name: add_action('genesis_header', 'render_weglot_language_switcher', 12 );

The HTML that gets rendered out to the browser through the Weglot shortcode correlates to your Weglot settings in the admin dashboard. At first, I wanted to use flags, but, as is the case with other multilingual plugins, the flag for Dutch is not the flag of my country Belgium. Belgium is multilingual: Dutch, French and German are all official languages.

The Webmatic multilingual menu

And there you go. The website is now in two languages, both Dutch and English. All good SEO practices are implemented, like a lang attribute on the root html element, canonical URLs and more. Almost everything gets translated automatically by Weglot. From the menus up to the alt tags of images.

The only part that bothered me was that the URL itself was not translated. It bothered me because of two reasons:

  • English visitors would see a URL containing Dutch words.
  • I always thought that a URL and the words you put into it are very important, I still do, but Rémy, co-founder, and CTO of Weglot, says that even Google, Amazon, Airbnb and more large companies implement multilingual websites with the URL in one language. I’m taking his expertise for credit.
The Weglot dashboard
The Weglot dashboard

Weglot uses machine translation to make all the necessary translations. Machine translation is not on the same level as a human edited translation. Weglot makes it easy to fix each and every translation right from their dashboard. It works pretty well. You can search for particular strings to get to the part you want or you can choose the URL to work with and get only the translations for that particular URL. So that’s what I did, I went over each and every machine translated string and made a lot of edits. Weglot even shows the total percentage of strings that are human edited.

Up to here, I had a fully functional website in two languages. But I wanted to do more, and that gave me a few challenges.

Rendering a different shortcode based on the current active Weglot language

Our Privacy Policy is hosted by iubenda. It’s a SaaS business (Software as a Service) allowing you to render out your privacy policy based on the settings you make in their dashboard. It’s pretty awesome and turns an otherwise rather boring task into a fun one.

Privacy Policy rendered by iubenda
Privacy Policy rendered by iubenda

You can implement iubenda in various ways into your WordPress website. As I wanted it to be in line with the site’s branding I chose to use the iubenda HTML snippet that would let me do that. You’ll have a different HTML snippet for each language you want to implement. So, there was the challenge. If I just add the HTML snippet in WordPress I can only add one: Dutch or English. So I needed to find a way to add the right HTML snippet based on the current active language in Weglot.

It turned out to be pretty easy.

Within PHP you can check for the current active language of Weglot by using this conditional:

Weglot::Instance()->getCurrentLang().

function webmatic_privacy_policy_iubenda() {
   $language_code = Weglot::Instance()->getCurrentLang();

   ob_start();
   include( SHORTCODES_MODULE_DIR . '/views/webmatic-privacy-policy-iubenda.php' );

   return ob_get_clean();
}
// webmatic-privacy-policy-iubenda.php
if($language_code === 'nl' ) {
   echo '...';
 } else {
   echo '...';
}

A few notes on this code.

Notice the backslash in front of Weglot::Instance()->getCurrentLang(). It’s there because I’m using namespacing. I’m in my own namespace and the Weglot Class is outside of my namespace. To be able to call this class you need to get out of your own namespace by placing a backslash () in front, taking you to something that’s called global namespace. If you don’t use namespacing, just leave out the backslash.

Implementing a blog that’s only in one language and it’s not the default Weglot one

This one turned out to be a bit harder. Weglot just works automatically. So you can build your content out in your default language and Weglot takes care of the hard work.

I wanted to implement a blog, this one, only in English. My base language of the website is Dutch, so by default, if I make another blog post, it’s expected to be in the default language Dutch.

In short, this is what I came up with.

  • I’ll write all the posts in English right from the start. If a visitor is on the Dutch part of the website he/she will get a notice that the blog is only available in English. The post itself is presented in English with the menu and other main parts outside of the actual blog post still in Dutch.
  • The canonical URL of the Dutch blog post needs to point to the English URL (I don’t want to be penalized by google for creating duplicate content).
  • When on the English part of the site, nothing needs to be translated by Weglot, because it could potentially change my English strings. Weglot would think it’s Dutch. I don’t wanna know what it would come up with, nor would I want to go and check those translations each time I make another blog post.
  • And last but not least, there’s the problem of the lang attribute. I want to have the Dutch part of the blog still to have the ‘nl’ lang attribute, while the post itself would have a lang attribute set to ‘en’.

I hope you’re following along with my thoughts: it would not be easy. But it turns out, with Weglot, it was actually a piece of cake.

Let’s break this down step by step.

Dear Weglot, do not translate certain parts of my web page

Exclude certain parts of your website from being translated by Weglot.
Exclude certain parts of your website from being translated by Weglot.

First I need to tell Weglot not to translate certain parts of the web page. That one was pretty easy. You just need to enter some CSS selectors to exclude from being translated in the Weglot settings in your WordPress admin dashboard. So that’s what I did. I added CSS selectors that targeted the content of my blog post and they did not get translated.

When on the Dutch part of the website add a lang attribute to the HTML element containing the actual English blog post

When on the Dutch part of the site, the lang attribute on the HTML element is set to ‘nl’ and my blog post content is written in English (en). That’s not good. It turns out you can add lang attributes to more HTML elements than the main body. So I needed to add lang="en" to the HTML element containing my English blog post. In my case, I’m targeting the class ‘.site-inner’, so I ended up writing some PHP code that only runs on the blog pages and are in the Dutch part of the website.

Since I’m using Genesis as my main framework, I can use the filter genesis_attr to target the site-inner class selector and add the lang attribute.

add_filter( 'genesis_attr_site-inner', __NAMESPACE__ . 'add_lang_attribute_to_site_inner' );
function add_lang_attribute_to_site_inner( $attributes ) {
   $language_code = Weglot::Instance()->getCurrentLang();

   if ( ( is_singular( 'post' ) || is_home() || is_category() ) && $language_code === 'nl' ) {
      $attributes['lang'] = 'en';
   }
   return $attributes;
}

Notes on this code:

I’m still using namespacing, so if you don’t use it, just strip out those parts.

I’ll start by getting the current language code from Weglot, then I’m checking if it’s a singular blog post, the main blog page or a blog category page. If one of these conditionals is true, I’ll add the lang attribute set to ‘en’ to the site-inner part of the web page.

Changing the canonical URL of the Dutch URL to the English one

For your SEO it’s important to avoid duplicate content. That’s exactly what I would end up with if I add the same English blog post both to the Dutch and English part of my website. Fortunately, there’s an easy solution to this problem: canonical URLs.

A canonical URL gives the search engines the actual master URL for a given page. If you have multiple pages with the same content, but they all have a canonical URL pointing to some master page, only the content of that master page counts.

A canonical URL is something that’s implemented in the head of a web page.

For instance:
<link rel="canonical" href="https://www.webmatic.be/en/">

Right now, if on the Dutch part of the website, the canonical URL is pointing to the page itself, but it needs to point to the English URL of that page.

At Webmatic we are using the Yoast plugin to implement our SEO stuff. Yoast is taking care of adding canonical URLs to our pages, so we need to override the Yoast plugin.

It turns out Yoast has a filter (wpseo_canonical) that you can tap into to override the canonical URL that gets rendered out to the browser. So, once again time for some code:

add_filter( 'wpseo_canonical', __NAMESPACE__ . 'change_canonical_nl_blog_to_en' );
function change_canonical_nl_blog_to_en( $url ) {
   $language_code = Weglot::Instance()->getCurrentLang();

   if ( ( is_singular( 'post' ) || is_home() || is_category() ) && $language_code === 'nl' ) {
      $site_url = get_site_url();
      $url = str_replace( $site_url, $site_url . '/en', $url);
   }

   return $url;
}

First, we tap into the filter that Yoast provides. We’re getting the current Weglot language. Then we check if we’re on a single blog page, the main blog page or a blog category page. If one of these conditions is true, we alter the URL with a PHP str_replace and return it to the filter. Problem solved, clean and easy.

Adding a note for Dutch visitors pointing out the blog is only available in English

A note to Dutch visitors of the blog saying the blog is only available in English
A note to Dutch visitors of the blog saying the blog is only available in English

With what I’ve written before this one was really easy. Just check for the current Weglot language and render a shortcode that gives the Dutch visitors a notice on the blog being only available in English:

$language_code = Weglot::Instance()->getCurrentLang();

My Final Thoughts on Weglot

So far I was able to implement everything I wanted, by using Weglot as my partner for a multilingual website. I honestly don’t know how this would end up when I picked another plugin. Maybe there would be no problem at all, maybe I would have to opt for another strategy.

I can only say that Weglot does not give me the headaches like some other plugins can do. It’s only a tiny bit confusing in it that you need to get comfortable with how the plugin actually works and how it adds translated strings to your dashboard. Especially when using a development site to implement and test all this code. You’ll end up with duplicated translated strings, both from your development website and your production website. And currently, there’s is no way to query your translated strings based on the URL you’ve used: .com vs .dev for instance.

Building a multilingual website? Weglot gives you all the tools you need!Click To Tweet

I’ve had some support chats with Rémy and Max from Weglot and they all were excellent.

I totally recommend Weglot for you to use in your multilingual website. Just be aware that implementing a multilingual website still involves a lot of work that even Weglot does not take away. Currently, machine translation is not up to par with human translation at all. So you have to be prepared to dive in and edit those machine translated strings yourself. But the latter is the case with each and every plugin you will use to implement more languages on your website.

If you’re intimidated doing your own translations, Weglot even gives you access to pro translators for a small fee.

If you have some remarks or questions, let them know! There’s a section below this blog post where you can add your comments. I’m curious.

Disclaimer: Webmatic is not, in any way, affiliated with Weglot. We just happen to like what we see and wanted to share our thoughts.

Koen Adams

Coding has always been fun to me. There's a lot to learn and after all those years I'm still learning a lot in my quest to be a great full stack developer in the WordPress space.

Reader Interactions

Comments

  1. Hi, great in depth article.
    I’d like to expend international with my website, but i’m very concerned about SEO.
    I’d like to have, not only meta tags rewriten but URLs as well for each page in each language.
    ie. domain.com/my-en-url/ and domain.com/fr/mon-url-fr so I can rank better.
    Is that possible ?

    • Hi Jack, rewriting the URL is not possible with Weglot. According to Weglot, they specifically state that even Google, Amazon and Airbnb are implementing multilingual websites with the URL only in the main language. It makes sense given the fact you can use canonical urls to point to an alternate url with the same content in another language.
      If you really want to translate the URL, WPML would be your best bet.

Leave a Reply

Your email address will not be published. Required fields are marked *