Wednesday, May 27, 2015

Drupal user login form customization

Customizing the user login page is very simple, and uses the following concepts:

Use preprocess to set variables
register you template file in hook_theme
create templates and render your variables

Step 1:
/**
 * Implements hook_theme().
 */
function hook_theme() {
  $items = array();
  $items['user_login'] = array(
      'render element' => 'form',
      'path' => PATH . '/templates',
      'template' => 'user-login',
      'preprocess functions' => array(
          'hook_preprocess_user_login'
      ),
  );
  return $items;
}

Step 2:
function hook_preprocess_user_login(&$variables) { 
  $variables['render_text'] = 'You can add extra text and message';
}

Step 3:
Create you template file in  your template folder
user-login.tpl.php

<div class="login-wrapper">

      <h2><?php print t('SIGN IN'); ?></h2>

      <?php
      // split the username and password from the submit button so we can put in links above
      print drupal_render($form['name']);
      print drupal_render($form['pass']);
      ?>

      <div class="login-links">
        <?php print l(t('FORGOT YOUR PASSWORD?'), 'user/password', array('attributes' => array('class' => 'login-link'))); ?>
      </div>

      <?php
      print drupal_render($form['form_build_id']);
      print drupal_render($form['form_id']);
      print drupal_render($form['actions']);
      ?>

    </div><!--//login-wrapper-->


Step 4:
Clear drupal cache