Nick Lewis: The Blog

In this first tutorial, you will learn how to:

1. override the default presentation of the user login form, and create a custom template for it.
2. pass an editable node into the user login form
3. alter the form’s values (such as text, and instructions)
4. make the form available to page.tpl.php — as though it was something as simple as a footer.

Moreover, I will show you how bloody simple it is. Folks who follow this tutorial should already have:

1. knowledge of PHP
2. the ability to lie about a lack of knowledge of PHP
3. some familiarity of the kindergarden basics of drupal theming
4. Be working with drupal 4.7+

Step One: Override the deafult user login form

Overriding is always done in the theme’s template.php file (if you don’t have a template.php file, you may create a it now). Obviously, before you can override anything, you must first locate what you are trying to override. The best way to do this is to search a module for the $form variable.

Of course, the user module has no shortage of forms. However, eventually we come across function user_login:

(modules/user.module on line 868).

So there you have it, the top and the bottom of the function. That’s all you really need to override it. Here’s the code:

template.php

Notice the scary looking _return_phptemplate_callback(‘user_login’,array(‘form’ => $form));? Oooohhh… scary… gonna cry? Your choice is simple, either you can hide under a blanket, or you can take a look at the pattern:
_return_phptemplate_callback(‘[the name of your .tpl.php file]’,array(‘[the name of the variable sent to your .tpl.php file]’ => [‘the actual variable that was returned from the function this code calls’]));

Before moving on, I want to remind you that you aren’t stupid. This doesn’t make immediate sense to anyone. So relax, and look for patterns in colors: they hold some big keys.

I’m now going to ask you to create a new tpl.php file called user_login.tpl.php.

So just to review your theme’s files should be:
/themes/yourtheme/template.php
/themes/yourtheme/user_login.tpl.php

user_login.tpl.php

Insert the code:

If all has gone according to plan, www.example.com/user/login now greats you with:

Amazing how sometimes, things can just start to make sense. YOu don’t need to understand it; you don’t even need to agree with it. Just accept it, and continue.

Part 2: Node the form up

The user login form usually needs some additional info, or links that drupal does not provide by default. If you were an amateur, you’d probably hardcode that extra info into the theme. However, since you’re an expert, you’re going to stick an editible node into the login area instead. Title your node, “Join the Revolution”, and stick this in the body:

Now, let’s stick that node in the login form. This is going to be a two part process

template.php: make the node available to the login form

user_login.tpl.php: print the newly available variables.

And like magic, there is your node — AND it can be changed by a non-programmer.

Part 3: Alter the form

Say we wanted to display our form horizontally. CSS could do most of the heavy lifting. Unfortunatly, the descriptions (e.g. “enter your username here”) kind of get in the way. If we were amateurs, we’d copy and paste the form directly into our template, and call it a solution. But remember kids, we’re experts and do things the right way ;-).

The array_values for the username and password forms are as follows:

[13] => Array
        (
            [#type] => password
            [#title] => Password
            [#description] => KILL ME KILL ME KILL ME
            [#required] => 1
            [#attributes] => Array
                (
                    [tabindex] => 2
                )

            [#tree] => 
            [#parents] => Array
                (
                    [0] => pass
                )

            [#weight] => 0.001
            [#input] => 1
            [#size] => 30
            [#name] => edit[pass]
            [#id] => edit-pass
            [#value] => 
        )

As you can see, #description really wants to be killed in this case. As you are no doubt aware, this is going to take a lot of work to do… I mean, look WHAT we have to do to kill it.

Template.php

You’ll also note that we changed the submit button to “get yer ass in here”. That is because we understand the importance of friendly interfaces. Now let’s rearrange our user_login.tpl.php file, and add some CSS:

user_login.tpl.php

The Final, Step

Folks, this is where it gets hard. Now, we want to display our new login form on every page. Be strong, you can do this: 1)open up page.tpl.php, and insert the following code directly below the “body” html tag.

Now we add the final step, we call the user_login() function from template.php, and pass it to page.tpl.php. Here it is.

template.php

VERY IMPORTANT: YOU MUST DISABLE ANY ACTIVE user login BLOCKS — otherwise, it won’t work.

And the final product:

Final Word

As the title of this tutorial suggests, this is merely an introduction. Expect part 2 in the near future.

Questions are encouraged. Also, I’ve provided a working version of this tutorial’s code.

Download a working theme based on this tutorial