Overview

When building or re-designing a Drupal website, there are cases where you need different layouts or styles for specific taxonomy terms. Examples include service pages, categories, or topics that need unique banners, backgrounds, or page layouts.

To do this properly, we need a CSS class added to the <body> tag, not just inside the page content.

This article explains:

Why body classes matter
Why some modules work, and others do not
Practical options for Drupal 11
A recommended solution used by iBuild.PH

What is a body class and why it matters

A body class is a CSS class added to the <body> tag of a page.

Example:

This allows designers and developers to:

Change page layout per category or term
Apply different background images or colors
Adjust spacing, grids, or sections globally
Target pages easily using CSS or JavaScript

Without a body class, styling becomes limited and harder to maintain.

Example use case

Scenario

You have a taxonomy called Services with these terms:

Web design
SEO
Web hosting

Each term has its own page:

Design requirement

Web design page has a hero banner with an image
SEO page has a different background color
Web hosting page uses a wider layout

To do this cleanly, you need unique body classes per term.

Why inner content classes are not enough

Some Drupal modules add classes inside the page content only, for example:

This looks useful, but it has limitations.

Problems with inner content classes

Cannot style headers or footers
Cannot change the full page background
Cannot control global layout
JavaScript targeting becomes complex

Inner classes are fine for styling text or components, but not for page-level design.

Review of available modules

Taxonomy Machine Name module
taxonomy_machine_name (recommended)

🔗 https://www.drupal.org/project/taxonomy_machine_name

Status

Works with Drupal 11

What it does

Adds taxonomy term machine names as classes to the <body> tag

Why it works

Targets the correct HTML level
Simple and reliable
No theme overrides required

Example output

This module solves the problem directly.

Term Body Class module
term_body_class (not available for Drupal 11)

🔗 https://www.drupal.org/project/term_body_class

What it was designed for

Adding taxonomy term classes to the body tag

Issue

Only supports up to Drupal 10
Not yet available for Drupal 11

This module would have been a good option if it supported Drupal 11.

Taxonomy Class module
taxonomy_class (limited use)

🔗 https://www.drupal.org/project/taxonomy_class

What it does

Adds classes inside taxonomy templates only

Limitation

Does not add classes to the <body> tag

This module is useful for styling taxonomy content blocks, but not suitable for full page design control.

Recommended Drupal 11 solution (no module required)

For long-term stability, iBuild.PH recommends using a theme-level solution. This avoids dependency on contributed modules and works reliably in Drupal 11.

How it works

Drupal allows themes to modify the <body> tag before the page is rendered.

Step 1: Open your theme file

Edit:

Step 2: Add this code

use Drupal\taxonomy\Entity\Term;
/**

 * Add taxonomy term classes to the body tag.

 */

function your_theme_preprocess_html(array &$variables) {

  $route_match = \Drupal::routeMatch();

  $term = $route_match->getParameter('taxonomy_term');
  if ($term instanceof Term) {

    $vocabulary = $term->bundle();

    $term_machine_name = $term->get('machine_name')->value;

$variables['attributes']['class'][] = 'taxonomy-term'; $variables['attributes']['class'][] = 'taxonomy-term--' . $vocabulary; $variables['attributes']['class'][] = 'taxonomy-term--' . $vocabulary . '--' . $term_machine_name; } }

Resulting body classes

How designers can use this

CSS example

JavaScript example

Why this approach is recommended

Works in Drupal 11
No contributed module dependency
Clean and predictable output
Easy for designers to use
Safer during core upgrades

This is the same approach used by iBuild.PH for custom Drupal web design and development builds.

How to add body classes (for design) to taxonomy term pages in Drupal 11 | iBuild.PH Knowledgebase

Overview

What is a body class and why it matters