How to style the h2 title of "search results"?

Question

The "search results" H2 element on the search results page does not appear to be controlled by any specific template. I'm using stable9 as the base. How can I style it?

Answer 1

There is not a template file for that <h2> element because it is not rendered using a theme implementation, but from SearchController::view(), which uses the following code.

  if (count($results)) {
    $build['search_results_title'] = [
      '#markup' => '<h2>' . $this->t('Search results') . '</h2>',
    ];
  }
  $build['search_results'] = [
    '#theme' => [
      'item_list__search_results__' . $plugin->getPluginId(),
      'item_list__search_results',
    ],
    '#items' => $results,
    '#empty' => [
      '#markup' => '<h3>' . $this->t('Your search yielded no results.') . '</h3>',
    ],
    '#list_type' => 'ol',
    '#context' => [
      'plugin' => $plugin->getPluginId(),
    ],
  ];

The part of that method that renders the search form is the following one.

$build['search_form'] = $this->formBuilder()->getForm(SearchPageForm::class, $entity);

$build['search_results_title'] is not part of the $build['search_form'] form, so implementing hook_form_alter() (or one of its variations) would not help. Attaching CSS styles to the page with hook_page_attachments() that target that <h2> element would not be possible without targeting all the <h2> elements in that page (or other pages) as Drupal core does not add specific classes to <h2>Search results</h2>.

The only possibility I see is changing the route callback used for that page, as described in Altering existing routes and adding new routes based on dynamic ones, keeping in mind that the route for the node search page is search.view_node, which is defined in SearchPageRoutes::routes() as:

    $routes["search.view_{$entity_id}"] = new Route('/search/' . $entity->getPath(), [
      '_controller' => 'Drupal\\search\\Controller\\SearchController::view',
      '_title' => 'Search',
      'entity' => $entity_id,
    ], [
      '_entity_access' => 'entity.view',
      '_permission' => 'search content',
    ], [
      'parameters' => [
        'entity' => [
          'type' => 'entity:search_page',
        ],
      ],
    ]);

The controller method that renders that page is SearchController::view(). You can look at its code to understand what it is expected to render/do.