Tuesday, April 24, 2018 04:28 am EDT

Theming Drupal 6 Login Form or Login Block

Bri's picture

Often times people want to theme the drupal login page or the login block for the theme they are using. If you need to go beyond just changing the CSS and want to actually add markup to the login form, this will show you how.

First you are going to need to locate the template.php file in your theme folder. We need to add some code to that file. Open up the template.php file for your theme and add the following:


function myTheme_theme() {
return array(
'user_login' => array(
'template' => 'user-login',
'arguments' => array('form' => NULL),
),
'user_login_block' => array(
'template' => 'user-login-block',
'arguments' => array('form' => NULL),
)
);
}

function myTheme_preprocess_user_login(&$variables) {
$variables['intro_text'] = t('Please use the form below to login');
$variables['rendered'] = drupal_render($variables['form']);
}
function myTheme_preprocess_user_login_block(&$variables)
{
$variables['intro_text'] = t('Please use the block below to login');
$variables['rendered'] = drupal_render($variables['form']);
}

In the first function we have specified that the user_login should use the template 'user-login' so we will need to create a template called 'user-login.tpl.php' for the user login located at www.mysite.com/user. We also specified that the user_login_block should use "user-login-block" so we will also need to create the template "user-login-block.tpl.php".

Notice that each of these three functions starts with "myTheme". That needs to be replaced with the name of the theme you are using. If you are using Zen for example it would be "zen_theme" for the first function.

Now we need to create the templates that will be used for the forms. First we will create the one for the user_login which is for the default drupal login form. This is the form you get when you visit www.mysite.com/user. Create a file called "user-login.tpl.php" and save it to your theme folder. Add the following to this file:


<p><?php print $intro_text; ?></p>

<div class="my-form-wrapper">
<?php print $rendered; ?>
</div>

Also create a second file for the user-login-block. You need to call this file "user-login-block.tpl.php" and you will want to add the following code to it:


<p><?php print $intro_text; ?></p>

<div class="my-block-login-wrapper">

<?php print $rendered; ?>
</div>

Now that we have all our files created we want to check and see if they work. You may have noticed that both of the files were nearly the same. You can specify that both the user_login and the user_login_block use the same template. Here we are creating two separate ones. We will differentiate them once we know that they are working. For now we can tell the difference by the class we applied to the div using a tool such as firebug.

Log in to your site and head on over to the performance page located at /admin/settings/perfomance. At the very bottom of this page there is a button that says "clear cached data."

screenshot of the clear cached data button in Drupal 6

After you click this button you should see the new changes that have been made by template.php. If everything has gone as planned you should have something that looks like the following. Your default drupal login page should look something like:

screenshot of drupal login form

Your Login block should look something like the following:

screen shot of the drupal login block

Notice that the message we added to each of them is slightly different. The user login form says "Please use the form below to login" while the block says "Please use the block below to login". Also if you view the markup you will see that the block has a different class applied to the div that we added.

So there you have it. You have a new template file for both the default user login as well as the user login block. Before we call it quits though, let's look at an example where the form variables are split up a little bit more than what we did previously.

I am going to go back into the template.php file and make some changes. This time I will change up the preprocess function for the login block.


function myTheme_preprocess_user_login_block(&$variables)
{
$variables['intro_text'] = t('Please use the block below to login');
$variables['username'] = drupal_render($variables['form']['name']);
$variables['password'] = drupal_render($variables['form']['pass']);
}

Here I have defined two new variables instead of assigning the entire contents of the drupal_render to one variable. This can give you a little bit finer control of things in your template.

I made the following changes to the user-login-block.tpl.php file.


<p><?php print $intro_text; ?></p>

<div class="my-form-wrapper">
<div class="username">
<?php print $username; ?>
</div>
<div class="password">
<?php print $password; ?>
</div>
<?php print drupal_render($form); ?>
</div>

As you can see I can now use the variables $username and $password since I filled them with the contents of the drupal_render in the template.php file. Instead of rendering the whole form, I tell those variables to render just the section dealing with the username and password respectively. There is one more important change to the template file. At the very end of the template there is a call to:


<?php print drupal_render($form); ?>

This is an important call. This prints the rest of the form. In our case that includes the submit button and the extra hidden fields that drupal needs. Even if we had broken out the submit button to its own variable, we would still need this final render in order to get the hidden fields.

When I check my work I see that the form doesn't look much different since I have not styled any of the classes I added, but a quick look at the markup shows that the new classes I specified are indeed a part of the login form now.

Good luck!