0

I'm attempting to create a custom template for the search page located at

127.0.0.1/search/node

I've created a template called search-result.html.twig in my theme/templates folder which allows me to modify each search result but I'd like to actually modify the buttons and text fields at the top of the search page.

Is there a specific template that affects the search button and fields?

1

1 Answer 1

2

but I'd like to actually modify the buttons and text fields at the top of the search page.

They do not have templates by default, because they are forms. You could create a twig template for the search form by follow this tutorial: How to manipulate forms in Drupal 8

But in my opinion, it is easier to use hook_form_alter on your .theme file and add the classes here.

This is how, the drupal default theme, Bartik changes the search button to a magnifying glass icon by adding a custom class to the submit button in bartik.theme

/**
 * Implements hook_form_alter() to add classes to the search form.
 */
function bartik_form_alter(&$form, FormStateInterface $form_state, $form_id) {
  if (in_array($form_id, ['search_block_form', 'search_form'])) {
    $key = ($form_id == 'search_block_form') ? 'actions' : 'basic';
    if (!isset($form[$key]['submit']['#attributes'])) {
      $form[$key]['submit']['#attributes'] = new Attribute();
    }
    $form[$key]['submit']['#attributes']->addClass('search-form__submit');
  }
}

enter image description here

You can use Devel and use dpm($form) to see what's inside the $form array.

Example:

/**
 * Implements hook_form_alter() to add classes to the search form.
 */
function bartik_form_alter(&$form, FormStateInterface $form_state, $form_id) {
  if (in_array($form_id, ['search_block_form', 'search_form'])) {
    $key = ($form_id == 'search_block_form') ? 'actions' : 'basic';
        drupal_set_message(dpm($form));
  }
}

Make sure you don't have the search block on the search page, other wise it will print the array for both forms and might confuse you which one is which.

5
  • This is slick! However, I am not sure why do you need to restart Apache. Can you please elaborate more on that?
    – AjitS
    Jul 13, 2016 at 2:03
  • @AjitS thx for pointing that out, updated answer, that's just a habit of mine from dealing with the settings.php file, no need for that here.
    – No Sssweat
    Jul 13, 2016 at 3:54
  • 1
    No problem :) I was under an impression that Twig has something to do at server level that I am not aware of. Good to know it doesn't. Btw, I only restart Apache when I add a new host/change existing host, or make any changes to .htaccess file. The changes in settings.php file should be picked up directly without the server restart.
    – AjitS
    Jul 13, 2016 at 7:00
  • Thank you! The reason why I'd like to change the buttons using the templates instead of just CSS is because I'd like to wrap them in divs using foundation.
    – Matt
    Jul 13, 2016 at 13:37
  • 1
    @Matt updated my answer since after doing some research my original answer didn't really answer your Q.
    – No Sssweat
    Jul 26, 2016 at 0:45

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.