Adding a class to a region

Question

I am working on my theme in Drupal 8 and I want to add a class to my header div. I tried adding this to the region.vars.php file.

if ($region === 'header') {
  $variables[header]['class'][] = 'navbar-right';
}

It's not working, though. This is the complete region.vars.php file.

<?php
/**
 * @file
 * region.vars.php
 */

use Drupal\Core\Template\Attribute;

/**
 * Implements hook_preprocess_region().
 */
function bootstrap_preprocess_region(&$variables) {
  $region = $variables['elements']['#region'];
  $variables['region'] = $region;
  $variables['content'] = $variables['elements']['#children'];

  $theme = \Drupal::theme()->getActiveTheme()->getName();


  // Content region.
  if ($region === 'content') {
    // @todo is this actually used properly?
    $variables['theme_hook_suggestions'][] = 'region__no_wrapper';
  }
  // Help region.
  elseif ($region === 'help' && !empty($variables['content'])) {
    $content = $variables['content'];
    $variables['content'] = array(
      'icon' => array(
        '#markup' => _bootstrap_icon('question-sign'),
      ),
      'content' => array(
        '#markup' => $content,
      ),
    );
    $variables['attributes']['class'][] = 'alert';
    $variables['attributes']['class'][] = 'alert-info';
    $variables['attributes']['class'][] = 'messages';
    $variables['attributes']['class'][] = 'info';
  }

  // Support for "well" classes in regions.
  static $wells;
  if (!isset($wells)) {
    foreach (system_region_list($theme) as $name => $title) {
      $wells[$name] = bootstrap_setting('region_well-' . $name);
    }
  }
  if (!empty($wells[$region])) {
    $variables['attributes']['class'][] = $wells[$region];
  }

   if ($region === 'header') {
    $variables[header]['class'][] = 'navbar-right';
  }

}

I got most of this code from the Drupal 8 bootstrap theme. Everything else is working.

Answer 1

What I normally do for all my themes is to add the missing region region-name class to each region by implementing hook_preproccess_HOOK() in MYTHEME.theme.

/**
 * Implements template_preprocess_region().
 */
function MYTHEME_preprocess_region(&$variables) {
  // Add missing region CSS classes.
  $variables['attributes']['class'][] = 'region';

  if (isset($variables['region']) && !empty($variables['region'])) {
    $variables['attributes']['class'][] = 'region-' . str_replace('_', '-', $variables['region']);
  }
}

Answer 2

Using $variables['attributes']['class'][] = 'navbar-right'; adds the class to the div wrapping the region. I added it in the .theme file (former template.php in D7).

Answer 3

In Drupal 8, there is a .theme file inside your themes/[theme-name] directory. You can write your preprocess there, where you can check for the content type of the node and other fields.

For your case, you can pass the content type in a variable as in the following code.

$node = \Drupal::routeMatch()->getParameter('node');

if (isset($node)) {
  $entity = entity_load('node', $node->nid->value);
  if ($entity) {
    $type = $entity->get('type')->getValue();
    $variables['content_type'] = $type;
  }
}

This variable will be available for you in your page.html.twig file (the page template).

Already there is page.header, which indicates the header of the page. You can insert the <div> markup around page.header.

{%if content_type == 'articles' %}
  <div class='extra-header-class'>{{ page.header }}</div>
{% else %}
  {{ page.header }}
{% endif %}