Using hook_theme to modify Drupal forms

I'm going to show you how to use hook_theme to make some commonly requested changes to the Search form and the Comments form in Drupal 6. We're also going to learn how this is done in your Genesis subtheme and the normal way of doing things. Take it as read the that the Genesis method also works for Zen sub-themes since the implementation of hook_theme for subthemes is the same.

Due to a rather hectic schedule this week at Adaptivethemes we're we're simply going to cut to the chase and deliver the snippets. If you have a question just leave a comment.

Before we start - take note of the differences between normal themes and Genesis/Zen subthemes:

  • For normal themes place these snippets in your template.php file.
  • For Genesis & Zen subthemes use the subthemes template.php file.
  • The actual functions are the same for both methods, what differs the implementations of hook_theme.
  • Replace MYTHEME or SUBTHEME with your themes name. Be aware of the Genesis method the theme naming.
  • Don't include the PHP tags, I use theme here to trigger syntax highlighting only.

Customising the Search Form

Q1. How to remove the "Search this site" label?

The most common answer to this is to use CSS to a do a display: none; which is OK except of course that it doesn't completely remove it, but rather just hides it. The good thing about using CSS is that's its quick to implement, but that's about it.

Modify Drupals Search form using HOOK_theme()

Normal Drupal 6 way:

<?php
/**
 * Implementation of HOOK_theme().
 */
function MYTHEME_theme(){
  return array(
   
'search_theme_form' => array(
     
'arguments' => array('form' => NULL),
    ),
  );
}

// The new theme function called by hook_theme
function MYTHEME_search_theme_form($form) {
 
// hide the label
 
$form['search_theme_form']['#title'] = NULL;
  return
drupal_render($form);
}
?>

Genesis Subtheme way:

<?php
/**
 * Implementation of HOOK_theme().
 */
function genesis_SUBTHEME_theme(&$existing, $type, $theme, $path) {
 
$hooks = genesis_theme($existing, $type, $theme, $path)
   
$hooks['search_theme_form'] = array(
    
'arguments' => array('form' => NULL),
  );
  return
$hooks;
}

// The new theme function called by hook_theme
function genesis_SUBTHEME_search_theme_form($form) {
 
// hide the label
 
$form['search_theme_form']['#title'] = NULL;
  return
drupal_render($form);
}
?>

Theme the Comment Form

What follows is stripped back version of the theme functions for this site. As you can see the Comment form has been modified somewhat to include some additional text, hide that dang input format list and various others things. Enough babbling - lets do it:

Modify Drupals Comment form using HOOK_theme()

Normal Drupal 6 way:

<?php
/**
 * Implementation of HOOK_theme().
 */
function MYTHEME_theme(){
  return array(
   
'comment_form' => array(
     
'arguments' => array('form' => NULL),
    ),
  );
}

// theme the crap out of the comment form
function MYTHEME_comment_form($form) {
 
// Add some intro text.
 
$form['intro']['#value']  = t('<h3>Leave a comment, suggestion or ask a question!</h3>');
 
// Wrap the intro in a div for themeing.
 
$form['intro']['#prefix']  = '<div class="comment-guidelines">';
 
$form['intro']['#suffix']  = '</div>';
 
// Weight it so it floats to the top.
 
$form['intro']['#weight']  = -40;
 
 
// Make the text-area smaller.
 
$form['comment_filter']['comment']['#rows']   = 5;
 
// Change the text-area title
 
$form['comment_filter']['comment']['#title']  = t('Your message');
 
// Add a div wrapper for themeing.
 
$form['comment_filter']['comment']['#prefix'] = '<div class="comment-form-prefix">';
 
$form['comment_filter']['comment']['#suffix'] = '</div>';
 
// Remove input formats information.
 
$form['comment_filter']['format'] = NULL;
 
//dsm($form);
 
return drupal_render($form);
}
?>

Genesis Subtheme way:

<?php
/**
 * Implementation of HOOK_theme().
 */
function genesis_SUBTHEME_theme(&$existing, $type, $theme, $path) {
 
$hooks = genesis_theme($existing, $type, $theme, $path);
   
$hooks['comment_form'] = array(
     
'arguments' => array('form' => NULL),
  );
  return
$hooks;
}

// theme the crap out of the comment form
function genesis_SUBTHEME_comment_form($form) {
 
// Add some intro text.
 
$form['intro']['#value']  = t('<h3>Leave a comment, suggestion or ask a question!</h3>');
 
// Wrap the intro in a div for themeing.
 
$form['intro']['#prefix']  = '<div class="comment-guidelines">';
 
$form['intro']['#suffix']  = '</div>';
 
// Weight it so it floats to the top.
 
$form['intro']['#weight']  = -40;
 
 
// Make the text-area smaller.
 
$form['comment_filter']['comment']['#rows']   = 5;
 
// Change the text-area title
 
$form['comment_filter']['comment']['#title']  = t('Your message');
 
// Add a div wrapper for themeing.
 
$form['comment_filter']['comment']['#prefix'] = '<div class="comment-form-prefix">';
 
$form['comment_filter']['comment']['#suffix'] = '</div>';
 
// Remove input formats information.
 
$form['comment_filter']['format'] = NULL;
 
//dsm($form);
 
return drupal_render($form);
}
?>

Last updated 13th January, 2009 - 12:12am

Authored by Jeff Burnz on