According to our analytics software between 60 and 70 percent of visitors going to the new user registration page on the Webmaster Forums do so by clicking the Create new account link in the user login block. Since this is the way most users sign up to a site, it makes sense to replace the default, boring text link with something a little more attention-grabbing. This article will show how to do that, providing two examples and information on making further customizations.
User login what?
The default user login block in Drupal 7, shown here in the Bartik theme. Our statistics show the Create new account link is the method most people use to get to the site’s registration form.
Since this link is both hard to spot and a small target for the user to click with their mouse, Drupal is making it harder to sign-up. This small text link should be changed into an obvious call to action.
Register link one: button
A Bartik sub-theme was used to create this, changing the login block in any theme should be possible although the files may be in slightly different locations.
Start by opening the theme’s template.php (or creating one if it does not exist), scroll to the bottom and add the following:
<?php
/**
* Implements hook_form_FORM_ID_alter().
*/
function THEMENAME_form_user_login_block_alter(&$form) {
// Remove the links provided by Drupal.
unset($form['links']);
// Set a weight for form actions so other elements can be placed
// beneath them.
$form['actions']['#weight'] = 5;
// Shorter, inline request new password link.
$form['actions']['request_password'] = array(
'#markup' => l(t('Lost password'), 'user/password', array('attributes' => array('title' => t('Request new password via e-mail.')))),
);
// New sign up link, with 'cuter' text.
if (variable_get('user_register', USER_REGISTER_VISITORS_ADMINISTRATIVE_APPROVAL)) {
$form['signup'] = array(
'#markup' => l(t('Register - it’s free!'), 'user/register', array('attributes' => array('class' => 'button', 'id' => 'create-new-account', 'title' => t('Create a new user account.')))),
'#weight' => 10,
);
}
}
?>Change the THEMENAME in the above code to the name of the theme being edited.In css/style.css, add the following to the bottom of the file:
#block-user-login .form-actions {
margin-top: 0;
padding-top: 0;
}
#block-user-login #create-new-account {
background-position-y: bottom;
color: #fff;
display: block;
font-size: 1em;
margin: 0 auto;
}
#block-user-login a#create-new-account:hover {
text-decoration: underline;
}The end result
This is the login block after the template and CSS code is applied to the Bartik sub-theme. The registration link is far more prominent, making it easier for users to locate and (hopefully) leading to more registrations.
Register link two: icon and text
As before, this assumes a Bartik sub-theme is being used, this icon image should also be uploaded to into the images directory in the theme folder.
Start by opening the theme’s template.php, scroll to the bottom and add the following:
<?php
/**
* Implements hook_form_FORM_ID_alter().
*/
function THEMENAME_form_user_login_block_alter(&$form) {
// Remove the links provided by Drupal.
unset($form['links']);
// Set a weight for form actions so other elements can be placed
// beneath them.
$form['actions']['#weight'] = 5;
// Shorter, inline request new password link.
$form['actions']['request_password'] = array(
'#markup' => l(t('Lost password'), 'user/password', array('attributes' => array('title' => t('Request new password via e-mail.')))),
);
// New sign up link, with 'cuter' text.
if (variable_get('user_register', USER_REGISTER_VISITORS_ADMINISTRATIVE_APPROVAL)) {
$form['signup'] = array(
'#markup' => l(t('Register - it’s free!'), 'user/register', array('attributes' => array('id' => 'create-new-account', 'title' => t('Create a new user account.')))),
'#weight' => 10,
);
}
}
?>Change the THEMENAME in the above code to the name of the theme being edited.In css/style.css, add the following to the bottom of the file:
#block-user-login .form-actions {
margin-top: 0;
padding-top: 0;
}
#block-user-login #create-new-account {
background: transparent url('../images/bartik-new-user.png') top left no-repeat;
display: block;
font-size: 1.1em;
line-height: 37px;
margin: 0 auto;
padding-left: 38px;
}
#block-user-login a#create-new-account:hover {
text-decoration: underline;
}If the code for the first register link type is in the theme’s template.php and css/style.css, make sure it is deleted.
The end result
This is the login block after the template and CSS code is applied to the Bartik sub-theme. The registration link is made more obvious by increasing its font size and adding an explanatory icon.
Make further changes to the login form
Notice how the code copied into the template.php file alters the structure of the login block form. This function is known as a hook and is called when Drupal is building the form, passing the structure of the form through to function in the &$form variable. Importantly, this variable is passed by-reference so any changes made to it, within the function, are kept.
To make further changes to way the form is laid out it is necessary to find the contents of $form, before writing code to alter it (like the code copied to template.php).
There are several ways to do this, one that works well for the author (and doesn’t require the Devel module):
<?php
drupal_set_message('<pre>' . check_plain(var_export($PHP_VARIABLE, TRUE)) . '</pre>');
?>To get the structure of the form passed to the form alter hook, this could be added to the template.php function as follows:
<?php
/**
* Implements hook_form_FORM_ID_alter().
*/
function THEMENAME_form_user_login_block_alter(&$form) {
drupal_set_message('<pre>' . check_plain(var_export($form, TRUE)) . '</pre>');
// ... code for altering form ...
}
?>Then, every time the form is built, a dump of the array representing its structure will be printed in a Drupal message. The message will look similar to the following:
array (
'#action' => '/node?destination=node',
'#id' => 'user-login-form',
'#validate' =>
array (
0 => 'user_login_name_validate',
1 => 'user_login_authenticate_validate',
2 => 'user_login_final_validate',
),
'#submit' =>
array (
0 => 'user_login_submit',
),
'name' =>
array (
'#type' => 'textfield',
'#title' => 'Username',
'#maxlength' => 60,
'#size' => 15,
'#required' => true,
),
'pass' =>
array (
'#type' => 'password',
'#title' => 'Password',
'#maxlength' => 60,
'#size' => 15,
'#required' => true,
),
'actions' =>
array (
'#type' => 'actions',
'submit' =>
array (
'#type' => 'submit',
'#value' => 'Log in',
),
),
'links' =>
array (
'#markup' => '<div class="item-list"><ul><li class="first"><a href="/user/register" title="Create a new user account.">Create new account</a></li>
<li class="last"><a href="/user/password" title="Request new password via e-mail.">Request new password</a></li>
</ul></div>',
),
'#form_id' => 'user_login_block',
'#type' => 'form',
'#build_id' => 'form-tiTIWFywr67J8eTtcMnmJIEbpjx9pIW1I0ZozyRcWvM',
'form_build_id' =>
array (
'#type' => 'hidden',
'#value' => 'form-tiTIWFywr67J8eTtcMnmJIEbpjx9pIW1I0ZozyRcWvM',
'#id' => 'form-tiTIWFywr67J8eTtcMnmJIEbpjx9pIW1I0ZozyRcWvM',
'#name' => 'form_build_id',
),
'form_id' =>
array (
'#type' => 'hidden',
'#value' => 'user_login_block',
'#id' => 'edit-user-login-block',
),
'#method' => 'post',
'#theme_wrappers' =>
array (
0 => 'form',
),
'#tree' => false,
'#parents' =>
array (
),
'#theme' =>
array (
0 => 'user_login_block',
),
)That’s it! Good luck with your login block theme.
