How to add a node ID as class to the tag in D8

By simone960 on 14 Dec 2015 at 02:21 UTC

In Drupal 7, there a class e.g "path-node-17" added to the body tag so that we can target a particular node easily but this is missing in Drupal 8, I wonder how to get this node id class output in the tag in Drupal 8.

Comments

From my theme, quick and dirty does the trick

Jeff Burnz commented 14 December 2015 at 12:00

theme name.theme :

use Drupal\Component\Utility\Html;

/**
 * Preprocess variables for html templates.
 * @param $variables
 */
function HOOK_preprocess_html(&$variables) {
  $variables['path_info']['args'] = FALSE;
  $path = \Drupal::request()->getPathInfo();
  $path_args = explode('/', $path);
  if (count($path_args) >= 3) {
    $variables['path_info']['args'] = Html::cleanCssIdentifier(ltrim($path, '/'));
  }
}

html.html.twig :

  {%
    set body_classes = [
      not root_path ? 'path-frontpage' : 'path-' ~ root_path|clean_class,
      path_info.args ? 'path-' ~ path_info.args,
    ]
  %}
  <body{{ attributes.addClass(body_classes) }}>

Note that this works for all paths, if you just want the node id thing, you can most likely lever \Drupal::request()->attributes->get('node');

Pimp your Drupal 8 Toolbar - make it badass.
Adaptivetheme - theming system for people who don't code.

Awesome !

simone960 commented 21 December 2015 at 04:06

Awesome ! It works well ! I think this should be included in core. Thanks !

This solution not work for my

serpforge commented 22 December 2015 at 11:48

This solution not work for my theme (bootstrap subtheme), so I change
$path = \Drupal::request()->getPathInfo();
to
$path = \Drupal::service('path.current')->getPath();
Its work fine and i have "path-node-NID" body class.

Thanks

tajdar commented 29 May 2017 at 07:00

For bootstrap sub-theme it works fine.
Thanks serpforge

Thanks!

Suryakumar B

Surya

English

Karur

commented 27 July 2021 at 11:18

It works for me

Perfect

Ralf Eisler commented 10 January 2016 at 23:21

It works!

Got error

atul_shin commented 10 June 2016 at 18:48

Thanks to all you who made efforts.

(taxonomy) as css classes please?

artatac commented 3 October 2016 at 14:51

Hi Jeff

Is there a way to expand this to also add tags (taxonomy) as css classes please?

Worked for me

AmolB commented 11 January 2018 at 04:17

Worked for me.

Worked perfectly. Thank you.

Shashwat Purav commented 30 January 2018 at 19:16

Worked perfectly. Thank you.

Thank You,
Shashwat Purav

This worked

chefigueroa commented 25 August 2020 at 18:42

Thanks! Saved me a lot of time!

Another method

Plazik commented 18 February 2016 at 13:01

in themename.theme:

/**
 * Implements hook_preprocess_HOOK().
 *
 */
function themename_preprocess_html(&$variables) {
  $path = \Drupal::service('path.current')->getPath();
  $path_args = explode('/', $path);
  if (isset($path_args[1]) && isset($path_args[2]) && ($path_args[1] == 'node') && (is_numeric($path_args[2]))) {
    $variables['attributes']['class'][] = 'page-node-' . $path_args[2];
  }
}

Works for me

KyleNakhul commented 23 February 2016 at 22:48

This works for me.

Works perfectly!

TolliSysDev commented 9 March 2016 at 06:52

Thanks so much...

Great, thank You!

sergey-serov

Russian

Moscow

commented 10 April 2016 at 20:08

Great, thank You!
Theme system became more complex of course.

seems better

atul_shin commented 10 June 2016 at 18:49

Yes this piece of code is simple and works for me. Do not have to include additional library or class. Cool !!!

Works well, thank you

Mike Dodd commented 8 March 2017 at 23:56

Works well, thank you

If Windows is the answer, it must have been a stupid question. -- Filip Van Raemdonck

Works perfectly, thanks!

pierrick419 commented 15 January 2019 at 13:50

Works perfectly, thanks!

Just the Node ID?

Jeff Burnz commented 10 April 2016 at 21:48

If you just want the node id in a body class you can do this in preprocess, this is probably the best way to get a simple unique class for the node page:

/**
 * Implements hook_preprocess_html().
 */
function themename_preprocess_html(&$variables) {
  if ($node = \Drupal::request()->attributes->get('node')) {
    $variables['attributes']['class'][] = 'page-node-' . $node->id();
  }
}

Pimp your Drupal 8 Toolbar - make it badass.
Adaptivetheme - theming system for people who don't code.

Works!

geraldito commented 19 April 2016 at 21:37

Thanks, that works for me.

Not clear on adding

galactus86 commented 6 June 2016 at 14:01

I added your code to mythemename.theme but I don't get any body classes, do I need to still add something to the html.html.twig body classes?
Using Classy as my base theme so not sure if there is a difference.

Ideally I'd like to get the taxonomy term added as a body class too.

I was looking for a way to

onejam commented 23 June 2016 at 12:03

I was looking for a way to include term as body class as well and found this solution:

Place this in MY_THEME.theme:

<?php
function otterteck2_preprocess_html(&$variables) {
  $current_path = \Drupal::service('path.current')->getPath();
  $variables['current_path'] = \Drupal::service('path.alias_manager')->getAliasByPath($current_path);
}
?>

Then, place this in html.html.twig:

{%
  set body_classes = [
    logged_in ? 'user-logged-in',
    not root_path ? 'path-frontpage' : 'path-' ~ root_path|clean_class,
    node_type ? 'page-node-type-' ~ node_type|clean_class,
    db_offline ? 'db-offline',
    current_path ? 'context' ~ current_path|clean_class,
  ]
%}
<body{{ attributes.addClass(body_classes) }}>

and clear the cache.

Now the output of body classes should be something like this on term pages:

<body class="layout-one-sidebar layout-sidebar-first path-taxonomy context-category-technology">

-----------------------------------------------------------------
We build engaging websites and intuitive designs that will benefit your business.
Duvien

Worked out for me. Thanks!

filnug commented 4 July 2016 at 13:18

Worked out for me. Thanks!

This doesn't include any

duntuk commented 15 August 2016 at 15:10

This doesn't include any taxonomy terms into the class, as your output example would suggest.

You're code is using the current_path (URL path) the same thing as the examples above.

For the term, use page title

Jeff Burnz commented 15 August 2016 at 18:02

The term is used in the page title, so it's right there, even in the template to be used:

Preprocess html:

if (isset($variables['page']['#title'])) {
    $variables['attributes']['class'][] = 'page-title--' . Html::cleanCssIdentifier($variables['page']['#title']);
  }

Or just do it in twig:

page['#title'] ? 'page-title--' ~ page['#title']|clean_class

Pimp your Drupal 8 Toolbar - make it badass.
Adaptivetheme - theming system for people who don't code.

Worked for me!

rroose commented 18 October 2016 at 08:22

This did the trick for me, thanks!

Thanks alot! Exactly what i

thomas.frobieter

German

commented 16 October 2018 at 16:52

Thanks alot! Exactly what i've searched for.

Many thanks, works great!

bmango commented 18 July 2017 at 15:53

Many thanks, works great!

Exactly what I needed

illutek commented 21 November 2017 at 20:33

Exactly what I needed

No success with Bootstrap theme

bkayne commented 18 August 2016 at 21:53

I've attempted all of these fixes using Drupal 8.1.7 (just upgraded to 8.1.8 with no change) and Bootstrap with my own subtheme. The best I can get is the content type page-node-type-CONTENTYPE, but nothing has added the Node ID or the path. Are there are possible solutions out there?

Bob

The bootstrap theme renders

onejam commented 18 August 2016 at 22:18

The bootstrap theme renders classes for < body > tags (content types and path, as well as various others).

Only node ID is not available. However, if you care to follow Jeff example (a few comments above): https://www.drupal.org/node/2634364#comment-10871250 You will get the node ID as a css class appended to < body > tag.

Add that function to {MY_THEME_NAME}.theme file.

I run Drupal 8.1.8 with Bootstrap custom sub theme and it works fine.

-----------------------------------------------------------------
We build engaging websites and intuitive designs that will benefit your business.
Duvien

...

bkayne commented 18 August 2016 at 22:30

Hm, no luck. The body tag renders like this after this change:

<body class="path-node page-node-type-participate has-glyphicons">

You have to show us your code

Jeff Burnz commented 19 August 2016 at 00:14

You have to show us your code, you've made a mistake somewhere.

Pimp your Drupal 8 Toolbar - make it badass.
Adaptivetheme - theming system for people who don't code.

Code

bkayne commented 19 August 2016 at 01:19

MYTHEME.theme

/**
 * @file
 * Bootstrap sub-theme.
 *
 * Place your custom PHP code in this file.
 */
 /**
  * Implements hook_preprocess_html().
  */
 function themename_preprocess_html(&$variables) {
   if ($node = \Drupal::request()->attributes->get('node')) {
     $variables['attributes']['class'][] = 'page-node-' . $node->id();
   }
 }

html.html.twig

{#
/**
 * @file
 * Default theme implementation to display the basic html structure of a single
 * Drupal page.
 *
 * Variables:
 * - $css: An array of CSS files for the current page.
 * - $language: (object) The language the site is being displayed in.
 *   $language->language contains its textual representation.
 *   $language->dir contains the language direction. It will either be 'ltr' or
 *   'rtl'.
 * - $rdf_namespaces: All the RDF namespace prefixes used in the HTML document.
 * - $grddl_profile: A GRDDL profile allowing agents to extract the RDF data.
 * - $head_title: A modified version of the page title, for use in the TITLE
 *   tag.
 * - $head_title_array: (array) An associative array containing the string parts
 *   that were used to generate the $head_title variable, already prepared to be
 *   output as TITLE tag. The key/value pairs may contain one or more of the
 *   following, depending on conditions:
 *   - title: The title of the current page, if any.
 *   - name: The name of the site.
 *   - slogan: The slogan of the site, if any, and if there is no title.
 * - $head: Markup for the HEAD section (including meta tags, keyword tags, and
 *   so on).
 * - $styles: Style tags necessary to import all CSS files for the page.
 * - $scripts: Script tags necessary to load the JavaScript files and settings
 *   for the page.
 * - $page_top: Initial markup from any modules that have altered the
 *   page. This variable should always be output first, before all other dynamic
 *   content.
 * - $page: The rendered page content.
 * - $page_bottom: Final closing markup from any modules that have altered the
 *   page. This variable should always be output last, after all other dynamic
 *   content.
 * - $classes String of classes that can be used to style contextually through
 *   CSS.
 *
 * @ingroup templates
 *
 * @see bootstrap_preprocess_html()
 * @see template_preprocess()
 * @see template_preprocess_html()
 * @see template_process()
 */
#}
{%
  set body_classes = [
    logged_in ? 'user-logged-in',
    not root_path ? 'path-frontpage' : 'path-' ~ root_path|clean_class,
    path_info.args ? 'path-' ~ path_info.args,
    node_type ? 'page-node-type-' ~ node_type|clean_class,
    db_offline ? 'db-offline',
    theme.settings.navbar_position ? 'navbar-is-' ~ theme.settings.navbar_position,
    theme.has_glyphicons ? 'has-glyphicons',
  ]
%}
<!DOCTYPE html>
<html {{ html_attributes }}>
  <head>
    <head-placeholder token="{{ placeholder_token|raw }}">
    <title>{{ head_title|safe_join(' | ') }}</title>
    <css-placeholder token="{{ placeholder_token|raw }}">
    <js-placeholder token="{{ placeholder_token|raw }}">
  </head>
  <body{{ attributes.addClass(body_classes) }}>
    <a href="#main-content" class="visually-hidden focusable skip-link">
      {{ 'Skip to main content'|t }}
    </a>
    {{ page_top }}
    {{ page }}
    {{ page_bottom }}
    <js-bottom-placeholder token="{{ placeholder_token|raw }}">
  </body>
</html>

Did you change "themename" to

Jeff Burnz commented 19 August 2016 at 07:16

Did you change "themename" to your theme name?

"themename_preprocess_html" needs to be renamed to replace "themename" with your actual themes name.

Also you need to clear the Drupal cache.

Pimp your Drupal 8 Toolbar - make it badass.
Adaptivetheme - theming system for people who don't code.

/**
 * @file
 * Bootstrap sub-theme.
 *
 * Place your custom PHP code in this file.
 */

 // varible for identifier front page
function mmar_preprocess_html(&$variables) {
   $variables['is_front'] = \Drupal::service('path.matcher')->isFrontPage();
   $variables['path_info']['args'] = FALSE;
   $path = \Drupal::service('path.current')->getPath();
   $path_args = explode('/', $path);
   if (count($path_args) >= 3) {
    $variables['path_info']['args'] = Html::cleanCssIdentifier(ltrim($path, '/'));
   }
}

//variable for get path
function mmar_preprocess(&$variables) {
  $variables['base_path_success'] = base_path() . $variables['directory'];
}

and..

{#
/**
 * @file
 * Default theme implementation to display the basic html structure of a single
 * Drupal page.
 *
 * Variables:
 * - $css: An array of CSS files for the current page.
 * - $language: (object) The language the site is being displayed in.
 *   $language->language contains its textual representation.
 *   $language->dir contains the language direction. It will either be 'ltr' or
 *   'rtl'.
 * - $rdf_namespaces: All the RDF namespace prefixes used in the HTML document.
 * - $grddl_profile: A GRDDL profile allowing agents to extract the RDF data.
 * - $head_title: A modified version of the page title, for use in the TITLE
 *   tag.
 * - $head_title_array: (array) An associative array containing the string parts
 *   that were used to generate the $head_title variable, already prepared to be
 *   output as TITLE tag. The key/value pairs may contain one or more of the
 *   following, depending on conditions:
 *   - title: The title of the current page, if any.
 *   - name: The name of the site.
 *   - slogan: The slogan of the site, if any, and if there is no title.
 * - $head: Markup for the HEAD section (including meta tags, keyword tags, and
 *   so on).
 * - $styles: Style tags necessary to import all CSS files for the page.
 * - $scripts: Script tags necessary to load the JavaScript files and settings
 *   for the page.
 * - $page_top: Initial markup from any modules that have altered the
 *   page. This variable should always be output first, before all other dynamic
 *   content.
 * - $page: The rendered page content.
 * - $page_bottom: Final closing markup from any modules that have altered the
 *   page. This variable should always be output last, after all other dynamic
 *   content.
 * - $classes String of classes that can be used to style contextually through
 *   CSS.
 *
 * @ingroup templates
 *
 * @see bootstrap_preprocess_html()
 * @see template_preprocess()
 * @see template_preprocess_html()
 * @see template_process()
 */
#}
{%
  set body_classes = [
    logged_in ? 'user-logged-in',
    not root_path ? 'path-frontpage' : 'path-' ~ root_path|clean_class,
    node_type ? 'page-node-type-' ~ node_type|clean_class,
    path_info.args ? 'path-' ~ path_info.args,
    db_offline ? 'db-offline',
    theme.settings.navbar_position ? 'navbar-is-' ~ theme.settings.navbar_position,
    theme.has_glyphicons ? 'has-glyphicons',
  ]
%}

<!DOCTYPE html>
<html {{ html_attributes }}>
  <head>
    <head-placeholder token="{{ placeholder_token|raw }}">
    <title>{{ head_title|safe_join(' | ') }}</title>
    <css-placeholder token="{{ placeholder_token|raw }}">
    <js-placeholder token="{{ placeholder_token|raw }}">
  </head>
  <body{{ attributes.addClass(body_classes)}}>
    <a href="#main-content" class="visually-hidden focusable skip-link">
      {{ 'Skip to main content'|t }}
    </a>
    {{ page_top }}
    {{ page }}
    {{ page_bottom }}
    <js-bottom-placeholder token="{{ placeholder_token|raw }}">
  </body>
</html>

Now there is a module for

tamerzg commented 8 August 2019 at 13:14

Now there is a module for that, its called Body node ID class

--------------
zoubi.me

Personally, I prefer the

Ruslan Piskarov

he/him

Ukrainian

Kiev, Ukraine

commented 13 August 2019 at 11:06

Personally, I prefer the following.

use Drupal\node\NodeInterface;

/**
 * Implements hook_preprocess_html().
 */
function custom_theme_preprocess_html(&$variables) {
  $node = \Drupal::routeMatch()->getParameter('node');
  if ($node instanceof NodeInterface) {
    $variables['attributes']['class'][] = 'page-node-' . $node->getType();
    $variables['attributes']['class'][] = 'page-node-' . $node->id();
  }
  else {
    $variables['attributes']['class'][] = 'page-no-node';
  }
}

I hope it can help.

Visit my blog for more info: Make Drupal Easy.

This seems to be the cleanest

aangel commented 2 September 2023 at 20:16

This seems to be the cleanest, thanks. Providing a bit more specificity was useful in my case:

    $variables['attributes']['class'][] = 'page-type-' . $node->getType();
    $variables['attributes']['class'][] = 'page-nid-' . $node->id();

How to add a node ID as class to the <body> tag in D8

Comments

New forum topics