Theming best practices and preprocess by ayushi infotech
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

Theming best practices and preprocess by ayushi infotech

  • 3,471 views
Uploaded on

This PPT talks about theme and how we can develop module and do theming for your custome module. ...

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-652

More in: Technology , Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
3,471
On Slideshare
3,468
From Embeds
3
Number of Embeds
2

Actions

Shares
Downloads
76
Comments
0
Likes
2

Embeds 3

http://localhost 2
https://twitter.com 1

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide
  • This is similar to example 1 only difference is we added one extra line page callback => ‘theme’ and deleted step4

Transcript

  • 1.  
  • 2. Overview
    • Theme Architecture an Introduction
      • Structure of theme Files
      • Core Template for different regions
      • Template Hierarchy
      • Theme() execution Hierarchy
      • Standard templates available for module
      • Tools for getting started
      • Exploring for theme
      • Examples: Step-by-step guide to theme a page and form in a module for D 6/7 .
  • 3. Structure of Theme Files
  • 4. Each Template Handles A Region of Your Site
    • html.tpl.php -Master template file for your site
    • page.tpl.php - Entire Page
    • front-page.tpl.php - Just Front Page
    • block.tpl.php - Blocks
    • comment.tpl.php - Comments
    • forum.tpl.php – Forums
    • field.tpl.php - modules/field/theme
  • 5. Template Hierarchy Home Page page-front.tpl.php page.tpl.php Nodes node-type.tpl.php node.tpl.php Pages page-node-edit.tpl.php page-node-1.tpl.php page-node.tpl.php page.tpl.php Blocks block-module-delta.tpl.php block-module.tpl.php block-region.tpl.php block.tpl.php Boxes box.tpl.php Comments comment.tpl.php
  • 6. Theme() execution hierarchy
    • theme() execute in below sequence
    • Theme() check first for themename_mycallback() in template.php. If it finds one, it takes precedent.
    • If not it looks, again in template.php, for a phptemplate_mycallback ()
    • If it finds nothing else, it uses the theme_mycallback () in your module.
  • 7. Available templates for module
    • theme(‘pager’)
    • theme(‘image’)
    • theme(‘table’)
    • theme(‘item_list’) or theme_item_list()
  • 8. Tool helps in theming
    • Firebug
    • Drupal for Firebug
    • Devel and devel_themer
    • coder
    • Web Developer Toolbar
    • Starter Theme e.g. zen or fusion
    • XDebug & NetBeans
  • 9. 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
  • 10. Drupal for Firebug: Install the  Drupal for Firebug module
  • 11. Exploring for theme
    • theme.inc
    • template.inc
    • Mytheme_preprocess_page()
    • Mytheme_preprocess_node()
  • 12. 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
  • 13. Step1) hook_menu() implementation function 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_preprocess function drupalcamp_preprocess_ drupalcamp_page_theming (&$vars){ $vars['new_variable1'] = 'this is my first variable‘; }
  • 14. 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.
  • 15. Step 4) call theme() function function 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=&quot;my-theme&quot;> 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
  • 16. Ex 2: Page callback & theme This is similar to example 1 only difference is we added page callback => ‘theme’ and deleted step4 Step1) hook_menu() implementation function 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;}
  • 17. 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_preprocess function 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'))); }
  • 18. Ex 3: How to theme a form Step1) hook_menu() implementation function 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 ); }
  • 19. Step2) hook_theme implementation function drupalcamp_theme(){ $items['drupalcamp_form'] = array( 'template' => 'drupalcamp-form', 'arguments' => array('form' => NULL), 'access arguments' => TRUE, ); } Step3) hook_preprocess function 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 }
  • 20. 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=&quot;paymentFooterLnks&quot;> <?php print $about_us;?> </div> <div> <?php print $add_temp;?></div> <div class=&quot;verisign&quot;><?php print $my_image;?></div> <div class=&quot;billing&quot;><?php print $ firstname ;?> </div> <?php print drupal_render($form);?>
  • 21. Some Useful Links https://ratatosk.backpackit.com/pub/1836982-debugging-drupal http://drupal.org/project/devel_themer http://mogdesign.eu/blog/performance-tips-for-drupal-theming/ http://www.drupaler.co.uk/blog/theming-drupal-6/96#comment-1504 http://design.acquia.com/content/tools-getting-started http://www.appnovation.com/theming-views-drupal-6-simple-way
  • 22. Catch me at Mandakini125 (skype) [email_address]