A Drupal theme is a set of files that defines the presentation layer. Drupal has its own way of styling data. After the data is fetched from database or other source, the data needs to be passed to several hook functions for adding additional data, markup and style.
In this article we will see how to create a template file for theming custom module data.
Step 1: Lets start with our mydons_learnthemes.info file. The .info file defines modulename,description, version and an additional style sheet used within our module
|
1 2 3 4 5 |
name= Mydons Learnthemes description= A Custom module that demonstrates template file creation core=7.x version=VERSION stylesheets[all][] = mydons.css |
Step 2: Now we start to work on our .module file. Here we simply create a menu callback and display some dummy content to demonstrate the theme functions.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
<?php // $Id$ /** * Implements hook_menu(). */ function mydons_learnthemes_menu() { $items['mydons'] = array( 'title' => t('Mydons Demo Page'), 'type' => MENU_CALLBACK, 'access arguments' => array('access_content'), 'page callback' => 'mydons_learnthemes_demo', ); return $items; } /** * Implementation of page callback */ function mydons_learnthemes_demo() { return theme('mytheme'); } /** * Implementation of hook_preprocess function(). */ function mydons_learnthemes_preprocess_mytheme(&$variables) { // Dynamic data that will be displayed in template file $variables['message'] = 'Helloworld Message from preprocess Hook'; } /** * Implementation of hook_theme(). */ function mydons_learnthemes_theme() { return array( 'mytheme' => array( 'template' => 'mytemplate', 'variables' => array( 'message' => NULL, ) ) ); } |
In the above code we are implementing the hook_theme function in our module. This hook function returns an array with the themehookname that is responsible for rendering the data . In our case the function name is mytheme, it specifies the template file to be used for displaying the data, the variables array contains the parameter names to be passed to the template along with the default value.
In our example we are passing a single variable called message with NULL as default value. so to render the data we need to call the theme(‘themehookname’) ie. theme(‘mytheme’) in our case. Before the actual template gets called the preprocess function will be called which will set the value for the variable parameter.
The purpose of calling the preprocess function is, it gives the flexibility to add additional variables (i.e dynamic data). A Real time scenario would be suppose we need to add additional data or add some css classes in the core module, we can simply call this preprocess function in our custom theme or custom template and add our classes or dynamic data along with the core module. Drupal’s Theme functions reduces the need to hack the core files for customization
.
Step 3: Now we are going to create the actual template file. The name of the template file would be mytemplate.tpl.php, as we have specified the template name in mydons_learnthemes_theme function. The template file looks as shown below
|
1 2 3 4 |
<div id="mydons"> <h3> Welcome to Mydons mytheme template </h3> <p> <?php print $message ?> </p> </div> |
Step 4: We can add some sample css style in our mydons.css as shown below. mydons.css looks as shown below.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
#mydons { width: 450px; color: #fff; border: 8px solid #CD853F; background-color: #008080; text-align: center; } #mydons h3 { padding: 3px; font-size: 18px; } #mydons p { padding: 5px 5px 2px 10px; } |
Step 5: So our final output looks like this
Compatability: Drupal 7