in Web & Tech

Customizing the Drupal Search Form to make use of Gumby’s UI Kit

Yesterday I had a hard time modifying the output of the Search Form of Drupal 7. I needed to modify its HTML, adding wrappers, changing the input to a <button> tag, adding classes and additional markup to insert a font based icon into the button. I’m using the awesome Gumbyframework and took code from travisc’s sandbox project, which itself seems to be heavily based on the Bootstrap theme for Drupal.

However, I like to start my themes from scratch with minimal overhead, so here’s the stuff I extracted from above mentioned projects and changed a bit to make it work with my current setup (using Gumby 2.6.3).

Everything is inside the template.php of my theme (MYTHEME), so change that to your theme name.

This will change the search block form as well as the search form on the search page itself. If you only want it to affect one of those just change the implementation of hook_form_alter() accordingly.

1. Implementing hook_form_alter() to change classes and add a wrapper function

    <?php 
    /**
     * Implements hook_form_alter().
     */
    function MYTHEME_form_alter(array &$form, array &$form_state = array(), $form_id = NULL) {
      if ($form_id) {
        switch ($form_id) {
          case 'search_form':
            // Add a clearfix class so the results don't overflow onto the form.
            $form['#attributes']['class'][] = 'clearfix';

            // Remove container-inline from the container classes.
            $form['basic']['#attributes']['class'] = array();

            // Hide the default button from display.
            $form['basic']['submit']['#attributes']['class'][] = 'element-invisible';

            // Implement a theme wrapper to add a submit button containing a search
            // icon directly after the input element.
            $form['basic']['keys']['#theme_wrappers'] = array('MYTHEME_search_form_wrapper');
            $form['basic']['keys']['#title'] = '';
            //control the width of the input           
            $form['basic']['keys']['#attributes']['class'][] = 'wide input';
            $form['basic']['keys']['#attributes']['placeholder'] = t('Search');
            break;
          case 'search_block_form':
            $form['#attributes']['class'][] = 'form-search';

            $form['search_block_form']['#title'] = '';
            $form['search_block_form']['#attributes']['placeholder'] = t('Search');
            //control the width of the input
             $form['search_block_form']['#attributes']['class'][] ='wide input';
            // Hide the default button from display and implement a theme wrapper
            // to add a submit button containing a search icon directly after the
            // input element.
            $form['actions']['submit']['#attributes']['class'][] = 'element-invisible';
            $form['search_block_form']['#theme_wrappers'] = array('MYTHEME_search_form_wrapper');

            // Apply a clearfix so the results don't overflow onto the form.
            $form['#attributes']['class'][] = 'content-search';
            break;
        }
      }
    }

2. The actual wrapper function

    <?php
    /**
     * Theme function implementation for MYTHEME_search_form_wrapper.
     */
    function MYTHEME_MYTHEME_search_form_wrapper($variables) {
      $output = '<div class="field append">';
      $output .= $variables['element']['#children'];
      $output .= '<button type="submit" class="medium primary btn">';
      $output .= '<i class="icon-search entypo scale-lg"></i>';
      $output .= '<span class="element-invisible">' . t('Search') . '</span>';
      $output .= '</button>';
      $output .= '</div>';
      return $output;
    }

3. Registering the theme hook

    /**
     * Stub implementation for hook_theme().
     *
     * @see MYTHEME_theme()
     * @see hook_theme()
     */
    function MYTHEME_theme(&$existing, $type, $theme, $path) {
      // Custom theme hooks:
      // Do not define the `path` or `template`.
      $hook_theme = array(
        'MYTHEME_search_form_wrapper' => array(
          'render element' => 'element',
        ),
      );

      return $hook_theme;
    }

And here’s the result with Gumby’s default styling:

Drupal Search Form styled for Gumby Framework UI Kit]

Write a Comment

Comment