Theming drupal user registration page can be challenging if you don't know what to do.

First of all it's very annoying that drupal doesn't provide a hook_theme for the user registration page by default.

Because of lack of hook_theme for it, we need to create the hook_theme by our selves.

It can be done in module level or theme level, but really it is kinda pointless to do this in modular level unless we want to distribute the code or reuse the code in future use.

In this article we will discuss only how to add the hook_theme using the theme level.

In order for a drupal theme to utilize the hook_theme for user registration form or any form we need to invoke the hook_theme as follow:

/**
* This code goes to template.php
**/

function your-theme-name_theme(){
return array(
'user_register' => array(
'arguments' => array('form' => NULL),
// and if I use a template file, ie: user-register.tpl.php
//'template' => 'user-register',
),
);
}

Now after you Clear your cache, your theme will register the theme for the user register and look for your-theme-name_user_register php function. So we need to create the function that the hook_theme looks for.

/**
* This code goes to template.php
**/

function your-theme-name_user_register($form) {
$output = '';
// Before you are lost in code, uncomment the following line first
// to get all the $form variable available for you to use

//$output .= '

' . print_r($form, TRUE) . '

';

if ($form['user_registration_help']['#value']) {
$output .= $form['user_registration_help']['#value'];
}

// this is an example to remove the title in the fieldset of the user registration form fieldset

unset($form['account']['#title']);
unset($form['Personal information']['#title']);
unset($form['simplenews']['#title']);
unset($form['terms_of_use']['#title']);
unset($form['captcha']['#title']);

// an example of how to format the registration form
// the example added a new wrapper div class "grey-wrapper" for user registration form element

// this form fieldset is not available in stock user registration form
// we can have this field by enabling the profile module and add a category group called "Personal information" with field called first_name and last_name in it
$output .= '';
$output .= drupal_render($form['Personal information']['profile_first_name']);
$output .= '';

$output .= '';
$output .= drupal_render($form['Personal information']['profile_last_name']);
$output .= '';

// this is the stock email field
$output .= '';
$output .= drupal_render($form['account']['mail']);
$output .= '';

// this is the stock username field
$output .= '';
$output .= drupal_render($form['account']['name']);
$output .= '';

// this is the stock password field
$output .= '';
$output .= drupal_render($form['account']['pass']);
$output .= '';

// this is the stock simplenews field from the simplenews module
$output .= '';
$output .= drupal_render($form['simplenews']['simplenews-1']);
$output .= '';

// this is the stock term of use field from term of use module
$output .= '';
$output .= drupal_render($form['terms_of_use']);
$output .= '';

// this is the stock captcha field from the captcha module
$output .= '';
$output .= drupal_render($form['captcha']);
$output .= '';

// this is the stock submit button
$output .= drupal_render($form['submit']);

return $output;
}

If you done the 2 steps above then the next step is to do some css styling for the form.

I will leave to your imagination for doing the css styling and positioning...