Adding language id to the body class in Drupal 8

When I started making sites with Drupal 8 I missed a special body class that I sometime need for theming as well as other times, and that’s the language body class. When making multilingual sites this comes in handy sometimes. For Drupal 7 this was made possible by the Internationalization (i18n) module, but since that module has been moved into core in Drupal (source) that special body-class-adding-thingamajig seems to have vanished.

After facing the need of language id when making this site I started to search for a solution, but came up with very few answers. When I solved it I thought I could make a short entry to spread the knowledge.

My needs

Basically, I had two needs for the language class to be added to my theme.

I wanted to hide some of the meny items depending on which language the content was presented in. (I later solved this in another way in my theme, but that was the initial need for a body class representing the current language.)
I have two different RSS-feeds, one for posts in English and one for posts in Swedish. To make it work 100%, the path to the feed needed the language id as well. This was the latter need for me, and also the need that made it to the final site.

The theme

The themes I’ve used for Drupal 8 haven’t had the language flag/path, but some themes may have implemented it, so if you have the path in the body class then you probably don’t need to read this.

The example I’m going to show you is from the the Bootstrap Clean Blog, which I use for this site, and I will show you the code for adding the language id to it.

The files

In the theme folder of Bootstrap Clean Blog you need to locate two files:

bootstrap_clean_blog.theme, which is in the root of the theme folder called bootstrap_clean_blog and
html.html.twig which is located in the templates folder.

In bootstrap_clean_blog.theme (or any other .theme-file you might have in the theme you’re using/developing) add the following code snippet to it:

function bootstrap_clean_blog_preprocess_html(&$variables) {
  $language = \Drupal::languageManager()->getCurrentLanguage()->getId();
  $variables['language'] = $language;
}

If you’re using a different theme than Bootstrap Clean Blog, the name of the theme-file is something like XYZ.theme, where XYZ is the name (lowercase with underscores) of the theme. For example, if you’re using the Pixture Reloaded theme, the theme-file is called pixture_reloaded.theme.

The code above calls for the language by getCurrentLanguage() and assigns the value to the variable $language. After that the value of $language is assigned to the global variable array $variables[‘language’].
You could shorten this down to

function bootstrap_clean_blog_preprocess_html(&$variables) {
  $variables['language'] = \Drupal::languageManager()->getCurrentLanguage()->getId();
}

but I wrote it on two separate rows to make it more clear. The shorter code snippet is quite allright, though, and you can use that in your .theme-file.

Next up: The TWIG-file

Allright, so far we’ve collected the language and stored it in a global variable. Now it’s time to make it visible on the webpage, to print it. This is done via TWIG, a fast and secure template engine that Drupal 8 started using. To print the $variables[‘language’] you write the following “twig code” in your template where you want it to be printed.