Tutorial

How to add Taxonomy Vocabulary Machine Name in Body Class in Drupal 8

So you found out you need to style taxonomy vocabulary items differently than the rest of the site? But Drupal 8 does not add a bunch of CSS classes Drupal 7 did. So we have to do it manually.

Pridal/a lubo dňa Pi, 08/14/2020 - 13:49
Add the code in your .theme file

Use HOOK_preprocess_html() function and copy the following example to your code:

function HOOK_preprocess_html(&$variables) {

  if (\Drupal::routeMatch()->getRouteName() == 'entity.taxonomy_term.canonical') {
    // load the term entity and get the data from there
    $term = \Drupal::routeMatch()->getParameter('taxonomy_term');
    $variables['term_id'] = $term->id();
    $variables['vocabulary_id'] = $term->bundle();
    
    $variables['attributes']['class'][] = 'taxonomy_' .  $variables['vocabulary_id'];
  }

}
Use your new CSS class

Do not forget to clear the cache if you do not have hook already registered.

You new class should be like taxonomy_MACHINE_NAME and you can widely use it in your CSS now.

Might interest you

Module
Simple module which adds "I agree with Terms and Conditions" Checkout Pane. Text is translatable and you are able to add a link to "Terms…
Tutorial
I stumbled across the problem with Contact Form 7 module, when AJAX was not working at all. Official documentation was of no help so I…

Recommended

Tutorial
3 views
This sketch is quite easy, I used Arduino Nano with OLED 0.96″ display 128×64 resolution…
Tutorial
8 views
While working on a fairly complex website with very complex views setup, including tens…
Tutorial
6 views
In this case we have two options, either we use hook_user_presave() or we can create new…
Tutorial
6 views
When using Swiftmailer under Drupal 8 / 9 it automatically sets the headers for sender to…
Tutorial
3 views
Yes, IOS / Safari is the new internet explorer. Amount of time I spend on debugging…
Tutorial
10 views
There is a very handy function in Drupal 8 / 9, allowing developers refresh view when…
Tutorial
4 views
Often, when doing SEO checkups, SEO specialist come up with adding Schema.org…
Tutorial
79 views
I needed to test my contracts against USDC contract, specifically I needed ERC-721 mint…
Tutorial
4 views
If you are a newbie like I am and struggling with setting the proper MYSQL my.cnf config…
Tutorial
10 views
I had trouble to set this up properly, because documentation is quite misleading or often…
Article
56 views
As the title says, DO NOT in any circumstances install ANY bitcoin price extension to ANY…
Tutorial
173 views
This is (or should be) a working example of sending some Ether between two addresses.…
Module
43 views
This list was fetched from Zapper, with their /v1/token-list endpoint. Which you can…
Tutorial
98 views
In the last months I am being pretty much bombarded by my clients with asking what…
Tutorial
25 views
So sometimes you just need to transliterate some kind of foreign (or local) language, and…