Sunday, April 30, 2017 06:49 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!

Comments

Anonymous's picture

Link share Request

Can you add the feature so share the post link or to send the post link in e-mail? It will help a lot of people and its also very easy for this site as the site is built using Drupal.

Bri's picture

I was already using the

I was already using the AddThis module on the site. See at the very end of each article the ability to share it however you like. I also added it to the teasers as well. Thanks!

Anonymous's picture

Not working

I'm not sure what I'm doing wrong, but I added the code to my Frontend Theme (/sites/domain.com/themes/mythemename) template.php file, however my login page is still getting themed by my Admin theme. Is there something else obvious that I might be missing? I'm a Drupal noob. Thanks. Screenshot of my setup: http://screencast.com/t/unhO299Qe

Bri's picture

Hey there, Do you have the

Hey there,
Do you have the Devel module installed? I would use the "kpr" function to try to print some variables both from the template file and from the preprocess function just to see if any of them are being called. You can use anything you like. That will get you started on where the problem lies. If the preprocess is getting called but the template isn't, it may be looking for the template in the wrong location.