sub-topic @BootstrapPreprocess


Create a plugin

We'll use Page implemented by this base theme as an example of how to add custom classes for the page.html.twig template that should only be added under certain conditions.

Replace all following instances of THEMENAME with the actual machine name of your sub-theme.

Create a file at ./THEMENAME/src/Plugin/Preprocess/Page.php with the following contents:

/**
 * @file
 * Contains \Drupal\THEMENAME\Plugin\Preprocess\Page.
 */

namespace Drupal\THEMENAME\Plugin\Preprocess;

use Drupal\bootstrap\Annotation\BootstrapPreprocess;
use Drupal\bootstrap\Utility\Element;
use Drupal\bootstrap\Utility\Variables;

/**
 * Pre-processes variables for the "page" theme hook.
 *
 * @ingroup plugins_preprocess
 *
 * @BootstrapPreprocess("page")
 */
class Page extends \Drupal\bootstrap\Plugin\Preprocess\Page {

  // It should be noted that you do not need all three methods here.
  // This is to just show you the different examples of how this plugin
  // works and how they can be tailored to your needs.

  /**
   * {@inheritdoc}
   */
  public function preprocess(array &$variables, $hook, array $info) {
    $value = isset($variables['element']['child']['#value']) ? $variables['element']['child']['#value'] : FALSE;
    if (_some_module_condition($value)) {
      $variables['attributes']['class'][] = 'my-theme-class';
      $variables['attributes']['class'][] = 'another-theme-class';
      $key = array_search('page', $variables['attributes']['class']);
      if ($key !== FALSE) {
        unset($variables['attributes']['class'][$key]);
      }
    }

    // If you are extending and overriding a preprocess method from the base
    // theme, it is imperative that you also call the parent (base theme) method
    // at some point in the process, typically after you have finished with your
    // preprocessing.
    parent::preprocess($variables, $hook, $info);
  }

  /**
   * {@inheritdoc}
   */
  public function preprocessVariables(Variables $variables) {
    // This method is almost identical to the one above, but it introduces the
    // Variables utility class in the base theme. This class has a plethora of
    // helpful methods to quickly modify common tasks when you're in a
    // preprocess function. It also acts like the normal $variables array when
    // you need it to in instances of accessing nested content or in loop
    // structures like foreach.
    $value = isset($variables['element']['child']['#value']) ? $variables['element']['child']['#value'] : FALSE;
    if (_some_module_condition($value)) {
      $variables->addClass(['my-theme-class', 'another-theme-class'])->removeClass('page');
    }
    parent::preprocessVariables($variables);
  }

  /**
   * {@inheritdoc}
   */
  protected function preprocessElement(Element $element, Variables $variables) {
    // This method is only ever invoked if either $variables['element'] or
    // $variables['elements'] exists. These keys are usually only found in forms
    // or render arrays when there is a #type being used. This introduces the
    // Element utility class in the base theme. It too has a bucket-load of
    // features, specific to the unique characteristics of render arrays with
    // their "properties" (keys starting with #). This will quickly allow you to
    // access some of the nested element data and reduce the overhead required
    // for commonly used logic.
    $value = $element->child->getProperty('value', FALSE);
    if (_some_module_condition($value)) {
      $variables->addClass(['my-theme-class', 'another-theme-class'])->removeClass('page');
    }
    parent::preprocessElement($element, $variables);
  }

}

Rebuild the cache

Once you have saved, you must rebuild your cache for this new plugin to be discovered. This must happen anytime you make a change to the actual file name or the information inside the @BootstrapPreprocess annotation.

To rebuild your cache, navigate to admin/config/development/performance and click the Clear all caches button. Or if you prefer, run drush cr from the command line.

VoilĂ ! After this, you should have a fully functional @BootstrapPreprocess plugin!

Parent topics

Source docs/plugins/Preprocess.md (line 4)

Classes

Namesort descending Description
BootstrapCarousel Pre-processes variables for the "bootstrap_carousel" theme hook.
BootstrapDropdown Pre-processes variables for the "bootstrap_dropdown" theme hook.
BootstrapModal Pre-processes variables for the "bootstrap_modal" theme hook.
BootstrapPanel Pre-processes variables for the "bootstrap_panel" theme hook.
BootstrapPreprocess Defines a BootstrapPreprocess annotation object.
Breadcrumb Pre-processes variables for the "breadcrumb" theme hook.
FieldMultipleValueForm Pre-processes variables for the "field_multiple_value_form" theme hook.
FileLink Pre-processes variables for the "file_link" theme hook.
FileUploadHelp Pre-processes variables for the "file_upload_help" theme hook.
FilterTips Pre-processes variables for the "filter_tips" theme hook.
FormElement Pre-processes variables for the "form_element" theme hook.
FormElementLabel Pre-processes variables for the "form_element_label" theme hook.
ImageWidget Pre-processes variables for the "image_widget" theme hook.
Input Pre-processes variables for the "input" theme hook.
InputButton Pre-processes variables for the "input__button" theme hook.
Links Pre-processes variables for the "links" theme hook.
MenuLocalAction Pre-processes variables for the "menu_local_action" theme hook.
Page Pre-processes variables for the "page" theme hook.
PreprocessBase Base preprocess class used to build the necessary variables for templates.
PreprocessManager Manages discovery and instantiation of Bootstrap preprocess hooks.
ProgressBar Pre-processes variables for the "progress_bar" theme hook.
Region Pre-processes variables for the "region" theme hook.
Select Pre-processes variables for the "select" theme hook.
Table Pre-processes variables for the "table" theme hook.
ViewsViewTable Pre-processes variables for the "views_view_table" theme hook.

Interfaces

Namesort descending Description
PreprocessInterface Defines the interface for an object oriented preprocess plugin.