How to create a Drupal Theme

Module 2

7. How to create a Drupal theme?

To create a custom theme in Drupal you would require the following files:

 

(i) Drupal theme .info file

The .info file captures the basic information about your theme including its name, author, description and version details.

(ii) Drupal page.tpl.php

This file defines the HTML template. page.tpl.php is where a mixing of PHP code with HTML is done to get the content displayed on your website.

(iii) Drupal node.tpl.php

The node.tpl.php controls the display of the node and the node summary.

(iv)Drupal template.php

template.php file allows you to override some of the default Drupal functions and gives you the content as you want to see it.

(v) Overriding node template files

Drupal allows overriding of the default node template files (node.tpl.php). However, make sure that the node template name is the same as that of the machine name for the content type. E.g. For content type “userblog” and the type “user_blog” the name of the node template will be “node-user_blog.tpl.php” and not “node-userblog.tpl.php”.

(vi) Theming Drupal forms

Example- User Registration Form

– Define function e.g. phpteplate_formname($form)

– To find out a form name implement the hook_form_alter in a module and add the code as illustrated in the following example:

<?php
function phptemplate_user_register($form) {
$variables = array(‘user’ => $user, ‘form’ => $form);
return
_phptemplate_callback(‘user_register’, $variables);
}
?>

– Create a .tpl.php file, in our example it will be user_register.tpl.php and clear the cache of your site. Now you can easily get individual fields in your template files:

 

Usethe code following PHP code:

 

<?php
drupal_set_message
(‘< pre >’. var_export($variables,TRUE) .‘< /pre >’);
?>

 

To get variable names inside the $form variable which can help drupal render forms at your desired location.

(vii) Theming user login forms

– You can theme user login forms by inputting the following function in the template.php file:

<?php
function nameofyourtheme_theme(

{
return array(
‘user_login_block’ => array(
‘template’ => ‘user-login-block’,
‘arguments’ => array(‘form’ => NULL),
)
);
}
?>

Note: Replace “nameofyourtheme” with your theme name.

The above function is used to register theme implementation of user module.

– Now add the following function to your template.php file:

function THEME_preprocess_user_login(&$variables) {
$variables[‘form’][‘name’][‘#description’] = t(‘This is new description for username text box.’);
$variables[‘form’][‘pass’][‘#description’] = t(‘This is new description for password text box.’);
$variables[‘rendered’] = drupal_render($variables[‘form’]);
}


Note: THEME to be replaced with your theme name.

 

Create user-login.tpl.php inside your theme directory and enter the following code there:

 

<div class=”user-form-wrapper”>
<?php print $rendered; ?>
</div>

– As a final step clear your Theme cache.

css.php