theming best practices and preprocess by ayushi infotech
DESCRIPTION
This PPT talks about theme and how we can develop module and do theming for your custome module. This is presented in Drupal Camp Deccan at Hydrabad on 11/11/11 when Dries was India trip. It was knowledge sharing and getting to know fellow Drupalists. This was one amazing event and am sure many more will follow. http://drupalcampdeccan.in/sessions/theming-best-practices-and-preprocess Below are few media hives Business Line: http://www.thehindubusinessline.com/industry-and-economy/info-tech/article2619142.ece Blogs: http://www.devblogging.com/2011/11/11/drupal-making-waves-across-globe-h... Deccan Chronicle: http://www.deccanchronicle.com/tabloid/hyderabad/dr-dre-internet-652TRANSCRIPT
![Page 1: Theming best practices and preprocess by ayushi infotech](https://reader036.vdocuments.mx/reader036/viewer/2022062511/54c829db4a795923758b466e/html5/thumbnails/1.jpg)
![Page 2: Theming best practices and preprocess by ayushi infotech](https://reader036.vdocuments.mx/reader036/viewer/2022062511/54c829db4a795923758b466e/html5/thumbnails/2.jpg)
Overview Theme Architecture an Introduction
• Structure of theme Files• Core Template for different regions• Template Hierarchy• Theme() execution Hierarchy• Standard templates available for moduleTools for getting started Exploring for themeExamples: Step-by-step guide to theme a
page and form in a module for D 6/7 .
![Page 3: Theming best practices and preprocess by ayushi infotech](https://reader036.vdocuments.mx/reader036/viewer/2022062511/54c829db4a795923758b466e/html5/thumbnails/3.jpg)
Structure of Theme Files
![Page 4: Theming best practices and preprocess by ayushi infotech](https://reader036.vdocuments.mx/reader036/viewer/2022062511/54c829db4a795923758b466e/html5/thumbnails/4.jpg)
Each Template Handles A Region of Your Site
html.tpl.php -Master template file for your site
page.tpl.php - Entire Pagefront-page.tpl.php - Just Front Pageblock.tpl.php - Blockscomment.tpl.php - Commentsforum.tpl.php – Forumsfield.tpl.php - modules/field/theme
![Page 5: Theming best practices and preprocess by ayushi infotech](https://reader036.vdocuments.mx/reader036/viewer/2022062511/54c829db4a795923758b466e/html5/thumbnails/5.jpg)
Template Hierarchy
Home Pagepage-front.tpl.phppage.tpl.php
Nodesnode-type.tpl.phpnode.tpl.php
Pagespage-node-edit.tpl.phppage-node-1.tpl.phppage-node.tpl.phppage.tpl.php
Blocksblock-module-delta.tpl.phpblock-module.tpl.phpblock-region.tpl.phpblock.tpl.php
Boxesbox.tpl.php
Commentscomment.tpl.php
![Page 6: Theming best practices and preprocess by ayushi infotech](https://reader036.vdocuments.mx/reader036/viewer/2022062511/54c829db4a795923758b466e/html5/thumbnails/6.jpg)
Theme() execution hierarchy
theme() execute in below sequence1.Theme() check first for
themename_mycallback() in template.php. If it finds one, it takes precedent.
2.If not it looks, again in template.php, for a phptemplate_mycallback ()
3. If it finds nothing else, it uses the theme_mycallback () in your module.
![Page 7: Theming best practices and preprocess by ayushi infotech](https://reader036.vdocuments.mx/reader036/viewer/2022062511/54c829db4a795923758b466e/html5/thumbnails/7.jpg)
Available templates for module• theme(‘pager’)• theme(‘image’)• theme(‘table’)• theme(‘item_list’) or
theme_item_list()
![Page 8: Theming best practices and preprocess by ayushi infotech](https://reader036.vdocuments.mx/reader036/viewer/2022062511/54c829db4a795923758b466e/html5/thumbnails/8.jpg)
Tool helps in theming1. Firebug2. Drupal for Firebug3. Devel and devel_themer4. coder5. Web Developer Toolbar6. Starter Theme e.g. zen or
fusion7. XDebug & NetBeans
![Page 9: Theming best practices and preprocess by ayushi infotech](https://reader036.vdocuments.mx/reader036/viewer/2022062511/54c829db4a795923758b466e/html5/thumbnails/9.jpg)
Devel: dpm()
Firebug: To inspect HTML and CSS, and prototype styles(http://getfirebug.com)
Web Developer Toolbar: Adds a menu and a toolbar to Firefox with various helpful web developer tools. https://addons.mozilla.org/en-US/firefox/addon/60 XDebug & NetBeans
![Page 10: Theming best practices and preprocess by ayushi infotech](https://reader036.vdocuments.mx/reader036/viewer/2022062511/54c829db4a795923758b466e/html5/thumbnails/10.jpg)
Drupal for Firebug: Install the Drupal for Firebug module
![Page 11: Theming best practices and preprocess by ayushi infotech](https://reader036.vdocuments.mx/reader036/viewer/2022062511/54c829db4a795923758b466e/html5/thumbnails/11.jpg)
Exploring for theme• theme.inc• template.inc• Mytheme_preprocess_page()
• Mytheme_preprocess_node()
![Page 12: Theming best practices and preprocess by ayushi infotech](https://reader036.vdocuments.mx/reader036/viewer/2022062511/54c829db4a795923758b466e/html5/thumbnails/12.jpg)
Ex 1: How to Call theme()A brief overview of theming in Drupal 6/7.• Create a tpl.php file for your template• Create a hook_theme() implementation to register
your template• Create a module preprocess function for any
variables you wish to make present in the template• Clear caches• Go to the block/menu callback/other location you
have invoked the theme() function from to call your template
![Page 13: Theming best practices and preprocess by ayushi infotech](https://reader036.vdocuments.mx/reader036/viewer/2022062511/54c829db4a795923758b466e/html5/thumbnails/13.jpg)
Step1) hook_menu() implementationfunction drupalcamp_menu(){
$items['my-themeing-page'] = array(
'title' => 'General page callback',
'page callback' => 'drupalcamp_page_theming',
'access arguments' => array('access content'),
'type' => MENU_NORMAL_ITEM
);
return $items;
}
Step2) hook_preprocessfunction drupalcamp_preprocess_drupalcamp_page_theming(&$vars){ $vars['new_variable1'] = 'this is my first variable‘; }
![Page 14: Theming best practices and preprocess by ayushi infotech](https://reader036.vdocuments.mx/reader036/viewer/2022062511/54c829db4a795923758b466e/html5/thumbnails/14.jpg)
Step3) hook_theme implementation
function drupalcamp_theme(){
$items['drupalcamp_page_theming'] = array(
'template' => 'drupalcamp-page-theming',
'arguments' => array(),
'access agruments' => TRUE
);
return $items;
}
Note the underscores in the theme function name are replaced with hyphens when we create our template reference. Note also that, in theory, the template name does not have to match the theme function name, however, we have discovered through testing that if the template name is different from the theme function name then the theme may not recognise the template file when it is coped to the theme's template directory. I'm not sure if this is by design, but for safety's sake make sure the template file and the theme registration are the same in name.
![Page 15: Theming best practices and preprocess by ayushi infotech](https://reader036.vdocuments.mx/reader036/viewer/2022062511/54c829db4a795923758b466e/html5/thumbnails/15.jpg)
Step 4) call theme() functionfunction drupalcamp_page_theming(){ return theme('drupalcamp_page_theming');}
Step 5) Next job is to create our template file drupalcamp-page-theming.tpl.php
<div class="my-theme"> This is my template. <?php print $new_variable1; ?></div>
Now if you clear the Drupal cache (see below) and we visit the page http://yoursite.com/my-themeing-page then we will see the output of our theme function
![Page 16: Theming best practices and preprocess by ayushi infotech](https://reader036.vdocuments.mx/reader036/viewer/2022062511/54c829db4a795923758b466e/html5/thumbnails/16.jpg)
Ex 2: Page callback & themeThis is similar to example 1 only difference is we added page callback =>
‘theme’ and deleted step4
Step1) hook_menu() implementationfunction drupalcamp_menu(){
$items['my-themeing-page'] = array(
'title' => 'General page callback',
'page callback' => ‘theme',
‘page arguments’ => array(‘drupalcamp_page_theming’),
'access arguments' => array('access content'),
'type' => MENU_NORMAL_ITEM
);
return $items;}
![Page 17: Theming best practices and preprocess by ayushi infotech](https://reader036.vdocuments.mx/reader036/viewer/2022062511/54c829db4a795923758b466e/html5/thumbnails/17.jpg)
Step2) hook_theme implementation
function drupalcamp_theme(){
$items['drupalcamp_page_theming'] = array(
'template' => 'drupalcamp-page-theming',
'arguments' => array(),
'access agruments' => TRUE
);
return $items;
}
Step3) hook_preprocessfunction drupalcamp_preprocess_drupalcamp_page_theming(&$vars){ $vars['new_variable1'] = 'this is my first variable'; $vars['goto_back'] = l(‘My Link', ‘my url’, array('attributes' => array('class' => 'orangeBtn')));}
![Page 18: Theming best practices and preprocess by ayushi infotech](https://reader036.vdocuments.mx/reader036/viewer/2022062511/54c829db4a795923758b466e/html5/thumbnails/18.jpg)
Ex 3: How to theme a formStep1) hook_menu() implementationfunction drupalcamp_menu(){
$items['form_theme'] = array(
'title' => 'How to implement theme with a form callback‘,
'page callback' => 'drupal_get_form',
'page arguments' => array('drupalcamp_form'),
'access arguments' => array('access content'),
'type' => MENU_NORMAL_ITEM
);
}
![Page 19: Theming best practices and preprocess by ayushi infotech](https://reader036.vdocuments.mx/reader036/viewer/2022062511/54c829db4a795923758b466e/html5/thumbnails/19.jpg)
Step2) hook_theme implementation
function drupalcamp_theme(){
$items['drupalcamp_form'] = array(
'template' => 'drupalcamp-form',
'arguments' => array('form' => NULL),
'access arguments' => TRUE,
); }
Step3) hook_preprocessfunction drupalcamp_preprocess_drupalcamp_page_theming(&$vars){ $vars[‘about_us'] = l(‘About Us', ‘url’, array('attributes' => array('class' => ‘Btn'))); $image_path = drupal_get_path('module', ‘drupalcamp') . '/images/image.png'; $var[‘my_image'] = theme_image($image_path,'',''); $var['setmessages'] = drupal_get_messages();$vars['firstname'] = drupal_render($vars['form']['firstname']);$var[‘add_temp'] = theme('drupalcamp-page-theming'); // Called a template}
![Page 20: Theming best practices and preprocess by ayushi infotech](https://reader036.vdocuments.mx/reader036/viewer/2022062511/54c829db4a795923758b466e/html5/thumbnails/20.jpg)
Step4) hook_form implementation
function drupalcamp_form(){
$form['firstname'] = array(
'#type' => 'textfield',
'#title' => 'First Name',
'#default_value' => 'test',
);
return $form;
}
Step5) Create drupalcamp-form.tpl.php page<div class="paymentFooterLnks"> <?php print $about_us;?> </div>
<div> <?php print $add_temp;?></div><div class="verisign"><?php print $my_image;?></div> <div class="billing"><?php print $firstname;?> </div><?php print drupal_render($form);?>
![Page 21: Theming best practices and preprocess by ayushi infotech](https://reader036.vdocuments.mx/reader036/viewer/2022062511/54c829db4a795923758b466e/html5/thumbnails/21.jpg)
Some Useful Linkshttps://ratatosk.backpackit.com/pub/1836982-debugging-drupalhttp://drupal.org/project/devel_themerhttp://mogdesign.eu/blog/performance-tips-for-drupal-theming/http://www.drupaler.co.uk/blog/theming-drupal-6/96#comment-1504http://design.acquia.com/content/tools-getting-startedhttp://www.appnovation.com/theming-views-drupal-6-simple-way
![Page 22: Theming best practices and preprocess by ayushi infotech](https://reader036.vdocuments.mx/reader036/viewer/2022062511/54c829db4a795923758b466e/html5/thumbnails/22.jpg)
Catch me atMandakini125 (skype)[email protected]