Theming the user account page in Drupal

Published

This is an example of creating a template file to custom theme the Edit Account page in Drupal (user/#/edit).

This example is specific to Drupal 6. For suggestions related to Drupal 7, please check the comments below this article.

For the sake of an example of what “could” be done, the template is split into a two column layout, with parts of the form in each column. Also various adjustments and changes are made to some of the form elements, such as rewording a description, changing some of the fieldset titles, adjusting the size of some of the form fields, and renaming the submit and delete buttons.

This code example assumes several settings are enabled on your Drupal site, including: User pictures, signatures, and the permission to select alternate themes (although the UID 1 admin will still be able to select themes here in any case).

Depending on the modules you have installed, additional variables for the fields produced by those modules will need to be prepared in the preprocess function, and added to the user-profile-form.tpl.php in order to show up. As needed, you can uncomment the dsm($vars['form']); line if you have Devel module installed, which will make it much easier to visually browse through the contents of the form and find the names of elements you want to include.

The <?php print drupal_render($form); ?> line at the bottom of user-profile-form.tpl.php is very important. There are a variety of hidden form element which must be included in order for the form to function correctly. Adding this line at the bottom will include the remaining part of the form that you haven’t already manually separated out for custom theming (both hidden fields, as well as any regular form content which you haven’t separated out manually). So long as no required fields are shown at the bottom here, it’s possible to wrap the area with a div set to display: hidden if you wish to hide them. Setting this part of the form to be hidden if required fields exist in it will result in the form being impossible to submit.

Much of this information comes from the excellent Drupal Dojo videos which introduce the method for preparing theme template files, as well as theming forms — you should absolutely watch them:

Code for template.php

Add this code to template.php, changing both instances of YOURTHEME to the actual name of your theme:

/**
* Implementation of hook_theme().
*/
function YOURTHEME_theme() {
  return array(
    'user_profile_form' => array(
      'arguments' => array('form' => NULL),
      'template' => 'user-profile-form',
    ),
  );
}


/**
* Preprocess user profile form.
*/
function YOURTHEME_preprocess_user_profile_form(&$vars) {

  // Uncomment the following line if Devel module is enabled, to view the contents of the form.
  // dsm($vars['form']);

  // Change the help text for specific form elements.
  $vars['form']['account']['name']['#description'] = t('Custom description regarding the Username.');

  // Adjust the titles of several fieldsets.
  $vars['form']['picture']['#title'] = t('Your user picture / avatar');
  $vars['form']['timezone']['#title'] = t('Time zone');
  unset($vars['form']['timezone']['timezone']['#title']);

  // Set several elements that by default have collapsed fieldsets to expanded and non-collapsible.
  $vars['form']['theme_select']['themes']['#collapsible'] = FALSE;
  $vars['form']['picture']['#collapsible'] = FALSE;
  $vars['form']['contact']['#collapsible'] = FALSE;
  $vars['form']['timezone']['#collapsible'] = FALSE;

  // Adjust the size of several fields to fit better in 2 columns.
  $vars['form']['account']['name']['#size'] = 25;
  $vars['form']['account']['mail']['#size'] = 25;
  $vars['form']['picture']['picture_upload']['#size'] = 40;
  $vars['form']['signature_settings']['signature']['#cols'] = 50;

  // Rename the Save and Delete buttons to be more clear.
  $vars['form']['submit']['#value'] = t('Save profile');
  $vars['form']['delete']['#value'] = t('Delete account');


  // Prepare all of the desired form elements as variables, to be used in user-profile-form.tpl.php.
  // Everything before this part is optional.
  $vars['account'] = drupal_render($vars['form']['account']);
  $vars['theme_select'] = drupal_render($vars['form']['theme_select']);
  $vars['picture'] = drupal_render($vars['form']['picture']);
  $vars['signature_settings'] = drupal_render($vars['form']['signature_settings']);
  $vars['contact'] = drupal_render($vars['form']['contact']);
  $vars['timezone'] = drupal_render($vars['form']['timezone']);
  $vars['submit'] = drupal_render($vars['form']['submit']);
  $vars['delete'] = drupal_render($vars['form']['delete']);

}

Code for style.css

Add the following to style.css:

/**
* Custom form layout.
*/
#user-profile-form legend {
  font-size: 1.2em;
}

#user-profile-form .form-column-1,
#user-profile-form .form-column-2 {
  float: left;
  width: 45%;
}

#user-profile-form .form-column-1 {
  margin: 0 22px 0 0;
}

Code for user-profile-form.tpl.php

Create a new file in your theme’s directory called user-profile-form.tpl.php and paste in the following code:

<div id="user-profile-form">

  <div class="form-column-1">
    <?php print $account; ?>
   
    <?php print $contact; ?>

    <?php print $timezone; ?>
  </div>
 
 
  <div class="form-column-2">
    <?php print $theme_select; ?>
   
    <?php print $picture; ?>
   
    <?php print $signature_settings; ?>   
  </div>
 
  <?php print $submit; ?>
  <?php print $delete; ?>
 
  <?php print drupal_render($form); ?>

</div>

After you add all the code and files, you will need to rebuild the theme registry in order for Drupal to load the new template file. The easiest way to do this is using Admin Menu module (top left icon) or the Devel block offered by Devel module. If you don’t have either of these (though you should) then you can rebuild the theme registry by either 1) Visiting the main Themes page and saving it without any changes, 2) Visiting the Modules page, or 3) Going to Administer > Site configuration > Performance and clicking the “Clear cached data” button.

Rob Wohleb's picture
Rob Wohleb
May 5, 2011 - 7:44pm

Maybe something changed in the API after the release of D7, but the hook_theme() is no longer valid. It should now be:

function THEMENAME_theme() {
  return array(
    'user_profile_form' => array(
      'render element' => 'form',
      'template' => 'user-profile-form',
    ),
  );
}

The preprocess function also needs updating it seems.

1
Alec Reynolds's picture
Alec Reynolds
September 2, 2011 - 11:14am

If you’re looking to grab variables in the pre-process form in D7, you have to select them in the format $vars[”][‘field_whatever’]. All elements of the user_profile_form are nested in an array with an empty title (hence the single quote pair).

Note that this only applies (as far as I know) to the user_profile_form; other forms that I have themed with the same method have had the proper $vars[‘form’] array in place.

2
Alec Reynolds's picture
Alec Reynolds
September 2, 2011 - 3:19pm

Ok, screwed up, the only reason the $variables[‘form’] array wasn’t properly populated was because I had ‘render_element’ not ‘render element’ in my hook_theme() implementation. you should be able to use the same implementation in D7 as long as you write your hook_theme as noted by Rob above.

3
pandikamal's picture
pandikamal
September 7, 2011 - 1:18pm

hi,

how to override the theme in user profile form in drupal 7

please find my code.

//hook_theme()

‘user_profile_form’ => array(
‘template’ => ‘forms/user-profile-form’,
‘variables’ => array(‘form’ => NULL),
),

but its not overriding.

please give me suggestion,

thx

4
Alec Reynolds's picture
Alec Reynolds
September 7, 2011 - 1:27pm

Try this:

   
  'user_profile_form' => array(
      'template' => 'user-profile-form',
      'render element' => 'form',
      'path' => drupal_get_path('theme', 'YOUR_THEME') . '/forms'
  ),

If the template file is in a module, use

      'path' => drupal_get_path('module', 'YOUR_MODULE') . '/forms'

instead.

5
Anonymous's picture
Anonymous
January 4, 2012 - 10:24am

I desesperate, I’ll try everything but it doesn`t work for me!! I using drupal 6.22, i followed all steps but no positive results. The user-profile-form.tpl.php get the template control for display elements, but it’s empty the vars (for example $account;), if I do a print_r of $form in user-profile-form.tpl.php is empty too; I run clear all cache’s, disabled and enabled devel module….

Thank you in advance.

6
Anonymous's picture
Anonymous
January 19, 2012 - 9:18am

Hi
Thanks a lot for your tutorial
My form is working except the delete account button.
When I click on it, the page reload but the account is not deleted.
Do you know what could be wrong ?

Thanks

7
Anonymous's picture
Anonymous
February 4, 2012 - 6:28pm
<?php
print $account
?>

doesn’t work for Drupal 7. Getting an error. Solution. Also how do I print the forms for the custom fields I have added to the user?!

8
Anonymous's picture
Anonymous
February 5, 2012 - 11:40pm

What I meant to say:

<?php
print $account
?>

doesn’t work for Drupal 7. Getting an error. I need a solution to this hopefully quickly. Also how do I print the forms for the custom fields I have added to the user?!

9
Anonymous's picture
Anonymous
September 11, 2012 - 7:15pm

for anyone who got confused why its not working on drupal 7 you should replace
print drupal_render($form);
with
print drupal_render_children($form);

10
Back to top