Trying to find the right information on how to customise a Drupal 6 form has not proven to be easy. This article attempts to redress that balance.

[If you find any aspect of this post unclear or a little too hard to follow do please leave a comment below. If you’ve found this useful it’s always nice to say thanks.]

I decided to write this article just for you. If you’re trying to customise your own theme for a Drupal 6.x website then found that after you’ve got your basic CSS layout working and maybe a few nodes or pages displaying, you’ll probably be wanting to customise the following:

User login, user registration, forgotten password and the users account (home) page. I’ve found it a bit surprising just how little information there is available on the Interblob. What I’ve seen on the Drupal.org website is pretty vague or patchy at best and more often than not written for Drupal 5.x than for 6.x

You’re not alone. I’ve had exactly the same experiences as you and so after finally getting everything working myself I thought I’d write this post for others and try to make the method as clear as possible.

Remember if you break the front end to your site and find you can’t login, the way around that problem should be:

http://yourdomain.com/?q=user

The only text you have to change above is the yourdomain.com part, keep the rest of the text exactly as it is.

As we will be re-designing the whole login/signup/register process of our site it is very probable that things could get messy so it’s essential to know how to get yourself logged back in. In a worst case scenario and you find you can’t log yourself back in, you can repair your Drupal removed login by simply removing your customised login override function tpl.php file and then go to the URL above.

Also if you’ve lost your logout feature for what ever reason you can do so by typing:

http://yourdomain.com/logout

(It’s pretty intuitive, but only easy when you know how…)

Almost every Drupal developer will either know of – or use – the Devel module. Just in case you don’t know about it, you can download it from drupal.org here. It has a number of uses that make Drupal development easier but as with many things getting to know Drupal is an art –  It just takes a bit of support to help you get started off in the right direction…

If you have Devel activated in your Blocks and you have a separate Admin theme from your main site (highly recomended) then you should see this block in the admin part of your site.

Also if you’ve been tinkering with your *.tpl.php files already and find that sometimes changes show up and some times they don’t – apart from using the Devel Modules ‘Empty Cache‘ feature there is also a setting in the Devel Block > Devel Settings – At the very bottom of the list is a tick box ‘Rebuild the theme registry every page load‘.

Ticking this box will ensure that any changes you have made to your theme will be applied. This is fine whilst you’re developing the site but Drupal will remind you that when you go into production mode you really don’t want to leave this box ticked as it will take up far too much processor time serving each page.

And of coarse click Save configuration

1) You’ll need to copy and paste this code into the template.php file in your sites theme folder. If there isn’t one there, then – create one. So the location of your template.php folder should be… (Drupal will search for the existance of this file automatically).

http://yourdomain.com/sites/all/themes/yourthemename/template.php

template.php

<?php
function yourthemename_theme() {
 return array(
 'user_login' => array(
 'template' => 'user-login',
 'arguments' => array('form' => NULL),
 ),

 );
}

function yourthemename_preprocess_user_login(&$variables) {
 $variables['intro_text'] = t('This is my awesome login form');
 $variables['rendered'] = drupal_render($variables['form']);
}
 

If you already have a function called yourthemename_theme() and you are in the process of wanting to add another customisation – say for example you’ve just customised the login screen and now you want to customise the registration page as well – this is what the function would look like:

 

<?php
function newagegiftshops_theme($existing, $type, $theme, $path)
{
 return array(

 'user_login' => array('template' => 'user-login','arguments' => array('form' => NULL)),
 'user_register' => array('template' => 'user-register','arguments' => array('form' => NULL))
 );
}

Notice exactly how the code is layed out above. Using this method you can also add as many custom forms and pages as you like. As you can see the text in RED is the filename we need to use for our custom templates with the .tpl.php extension namely user-login.tpl.php also notice that the filename is user ‘dash‘ registration NOT user ‘underscore‘ as one might use in a Drupal 5 registration.

user-login.tpl.php

<div>
This is some example text to show it's coming from user-login.tpl.php
This prints the string $rendered, it has drupals login form in the string...
 <?php print $rendered; ?>
</div> 

Now upload both these files (template.php and user-login.tpl.php) to your web server and then from your Admin pages of the Devel module you will need to Clear Cache, this is essential to have Drupal recognise the new user-login.tpl.php file.

If you now visit http://yourdomain.com/?q=user you will see that your new user-login template override file has kicked in.

The Username and Password form is being displayed because it is contained within the variable $rendered. If you remove the <?php print $rendered; ?> from your user-login.tpl.php file you will not see Drupal’s default login form which needs customising – which is what we’ll do next.

Also, I like the idea of being able to use your email address OR username to be able to login. Remembering multiple usernames can be a pain so being able to simply use your email address is much more user friendly.

You don’t need to use logintoboggan to do this. Logintoboggan is a very nice module but is unnecessary for our purposes. A module that will allow you to login simply by using either your username or email address is a much better option. It’s called the ’email registration’ module and you can download it from the Drupal site here: http://drupal.org/project/email_registration

3) Customising the login form.

With Drupal 6, all you have to do to make login’s work properly is to use the same form names and fields as Drupal core. To get all of these these all I did was to extract the field names from the HTML output by Drupal.

The raw HTML is as follows. All you have to do is to View Source and cut n’ paste the text between the <form> and </form> tags. Paste this text into your user-login.tpl.php file. Now you have the Drupal login code working but from your own page which you can now customise by wrapping this code in your own <div> tags or whatever CSS you wish to use – You can replace the entire file with this code below – Step 2 above was just a test so that you could see it working.

 

<?php
 <div id="edit-name-wrapper">
 <label for="edit-name">Username: <span title="This field is required.">*</span></label>
 <input type="text" value="" size="60" id="edit-name" name="name" maxlength="60">
 <div>Enter your 'My Site Name' username.</div>
 </div>

 <div id="edit-pass-wrapper">
 <label for="edit-pass">Password: <span title="This field is required.">*</span></label>
 <input type="password" size="60" maxlength="128" id="edit-pass" name="pass">
 <div>Enter the password that accompanies your username.</div>
 </div>

 <input type="hidden" value="<update><snip>id value removed for security</snip></update>" ... name="form_build_id">
 <input type="hidden" value="user_login" id="edit-user-login" name="form_id">
 <input type="submit" value="Log in" id="edit-submit" name="op">
 </div>

Quite whether those ‘hidden’ fields need to have a value of “form-5be6…” I think probably not. All that’s left for you to do now is to create your own CSS fields to customise the look of your Drupal form login and away you go….

The more observant among you might notice that in the above code, there is no closing ?> That’s ok, leave it without one, Drupal core always add’s it’s own closing ?> anyway and on top of that our friends at Lullabot specifically recommend that you leave it out!

If after you’ve written your customisation code and you find that your template doesn’t ‘kick in’ it’s probably because the changes haven’t registered yet. Using the Devel Modules ‘Empty Cache’ is all well and good, but I’ve found that some times that doesn’t work either. In this case what you should do is this:

If this article has helped you in any way, please consider making a donation of £1.00 this helps pay for bandwidth and keeps this site up and running. Remember every little helps and your support is really appreciated. There is a ‘Donate’ link below.

Many thanks

Simon

34 comments

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>