Dynamic Theming in Drupal 9: Programmatically Adding Theme Suggestions for Views, Unformatted, Fields, Rows, and More

Explore the power of dynamic theming in Drupal 9 by discovering how to programmatically add theme suggestions for different view components. This comprehensive guide covers customization for views, unformatted displays, fields, rows, and other elements, providing step-by-step instructions and example code. Elevate your Drupal theming skills and create visually stunning websites tailored to your specific needs.

Example Code:

/**
 * Implements hook_theme_suggestions_HOOK_alter() for views templates.
 */
function MYTHEME_theme_suggestions_views_view_alter(array &$suggestions, array $variables) {
  // Add a theme suggestion based on the view name.
  $suggestions[] = 'views_view__' . $variables['view']->id();
  
  // Add a theme suggestion based on the view display type.
  $suggestions[] = 'views_view__' . $variables['view']->id() . '__' . $variables['display_id'];
  
  // Add a theme suggestion for unformatted displays.
  if ($variables['display_plugin'] instanceof \Drupal\views\Plugin\views\display\DisplayPluginBase &&
      $variables['display_plugin']->getStylePlugin() instanceof \Drupal\views\Plugin\views\style\StylePluginBase &&
      $variables['display_plugin']->getStylePlugin()->getPluginId() == 'default') {
    $suggestions[] = 'views_view__unformatted';
  }
  
  // Add theme suggestions for fields and rows.
  foreach ($variables['rows'] as $index => $row) {
    $suggestions[] = 'views_view__field__' . $variables['view']->id() . '__' . $variables['display_id'] . '__' . $index;
    $suggestions[] = 'views_view__row__' . $variables['view']->id() . '__' . $variables['display_id'] . '__' . $index;
  }
}

This example code illustrates how to use hook_theme_suggestions_HOOK_alter() to dynamically add theme suggestions for views, unformatted displays, fields, and rows in Drupal 9, allowing for flexible and customized theming.

Add views template suggestions:

/**
 * Implements hook_theme_suggestions_HOOK_alter().
 *
 * Add views template suggestions.
 * 
 * @inheritdoc
 */
function HOOK_theme_suggestions_views_view_alter(array &$suggestions, array $variables) {
  return [
    'views_view__' . $variables['view']->id()
  ];
}

Add views display template suggestions:

/**
 * Implements hook_theme_suggestions_HOOK().
 *
 * Add views template suggestions.
 * 
 * @inheritdoc
 */
function HOOK_theme_suggestions_views_view(array $variables) {
  return [
    'views_view_display__' . $variables['view']->current_display,
  ];
}

Add views unformatted template suggestions:

/**
 * Implements hook_theme_suggestions_HOOK_alter().
 *
 * Add views unformatted template suggestions.
 * 
 * @inheritdoc
 */
function HOOK_theme_suggestions_views_view_unformatted_alter(array &$suggestions, array $variables) {
  return [
    'views_view_unformatted__' . $variables['view']->id()
  ];
}

Add views field template suggestions:

/**
 * Implements hook_theme_suggestions_HOOK().
 *
 * Add views field template suggestions.
 * 
 * @inheritdoc
 */
function HOOK_theme_suggestions_views_view_field(array $variables) {
  return [
    'views_view_field__' . $variables['field']->field
  ];
}

And I also want to add that if you're working in a custom module you may need to add the template files to your theme registry using hook_theme():

/**
 * Implements hook_theme().
 *
 * Add template files to the theme.
 * 
 * @inheritdoc
 */
function HOOK_theme($existing, $type, $theme, $path) {
  return [
    // Field templates.
    'views_view_field__my_field_name' => [
      'template' => 'views-view-field--my-field-name',
      'base hook' => 'views_view_field',
    ],
    // Views templates.
    'views_view__my_views_block' => [
      'template' => 'views-view--my-views-id',
      'base hook' => 'views_view',
    ],
    // Views unformatted templates.
    'views_view_unformatted__my_views_block' => [
      'template' => 'views-view-unformatted--my-views-id',
      'base hook' => 'views_view_unformatted',
    ],
  ];
}

And the above HOOK_theme() would correspond to the following Twig template files:

1. views-view-field--my-field-name.html.twig
2. views-view--my-views-id.html.twig
3. views-view-unformatted--my-views-id.html.twig