Theme API

1,916 views

Published on

The presentation a gave at the Drupal Design Camp Europe 2011 in Berlin. It is about the technology that drives the Theme API in Drupal 7.

Published in: Technology

Theme API

  1. 1. Theme API Rolf van de Krol
  2. 2. Drupal 7.2 - default install bartik views & devel
  3. 3. includes/theme.inc
  4. 4. $html = theme( item_list, array( items => $links, title => t(My links) ));
  5. 5. $html = theme( item_list, array( items => $links, title => t(My links) ));
  6. 6. $html = theme( item_list, $links, t(‘My links’));$html = theme( item_list, array( items => $links, title => t(My links) ));
  7. 7. $html = theme( item_list, $links, t(‘My links’));$html = theme( item_list, array( items => $links, title => t(My links) ));
  8. 8. ‘theme’ initialization ‘theme registry’ loading finding of callable ‘theme hook’ including of required files handle some ‘render array’ specific stuff merging the defaults into the ‘variables’ getting information from the ‘base hook’executing ‘preproces’ and ‘process’ functions handling of ‘theme hook suggestions’executing ‘function’ or rendering ‘template’
  9. 9. ‘theme’ initialization ‘theme registry’ loading finding of callable ‘theme hook’ including of required files handle some ‘render array’ specific stuff merging the defaults into the ‘variables’ getting information from the ‘base hook’executing ‘preproces’ and ‘process’ functions handling of ‘theme hook suggestions’executing ‘function’ or rendering ‘template’
  10. 10. themeregistry
  11. 11. themeregistry theme($hook, $vars)
  12. 12. hook_themehook_theme_alter theme registry theme($hook, $vars)
  13. 13. item_list => array( variables => array( items => array(), title => NULL, type => ul, attributes => array(), ), type => module, theme path => modules/system, function => theme_item_list,);
  14. 14. page => array( template => page, path => themes/bartik/templates, type => theme_engine, theme path => themes/bartik, render element => page, preprocess functions => array( template_preprocess, template_preprocess_page, contextual_preprocess, overlay_preprocess_page, shortcut_preprocess_page, ), process functions => array( template_process, template_process_page, rdf_process, bartik_process_page, ),);
  15. 15. devel module http://drupal.org/project/develhttp://mydrupalinstall.com/devel/theme/registry
  16. 16. Building registry hook_themehook_theme_alter
  17. 17. hook_themehook_theme_alter Building registry system_theme node_themephptemplate_theme stark_theme mytheme_theme
  18. 18. hook_themehook_theme_alter Building registry system_theme node_themephptemplate_theme stark_theme mytheme_theme
  19. 19. theme Building registrybase theme(s) modules
  20. 20. Building registry
  21. 21. Building registry
  22. 22. PHPTemplateBuilding registry
  23. 23. PHPTemplate Building registryInspects theme
  24. 24. Inspects theme Building registryFind templatesand functions
  25. 25. mytheme.themeBuilding registry
  26. 26. initialize themes get theme registry get callable theme hook include files Using registry handle render array get defaults for variables handle base hookexecute preprocess and process functions handle theme hook suggestions execute function or render template file
  27. 27. initialize themes get theme registry get callable theme hook include files Using registry handle render array get defaults for variables handle base hookexecute preprocess and process functions handle theme hook suggestions execute function or render template file
  28. 28. initialize themes find ‘base themes’ register CSS files register JS files Using registryinclude template.php
  29. 29. initialize themes find ‘base themes’ register CSS files register JS files Using registryinclude template.php theme engine
  30. 30. initialize themes get theme registry get callable theme hook include files Using registry handle render array get defaults for variables handle base hookexecute preprocess and process functions handle theme hook suggestions execute function or render template file
  31. 31. initialize themes get theme registry get callable theme hook include files Using registry handle render array get defaults for variables handle base hookexecute preprocess and process functions handle theme hook suggestions execute function or render template file
  32. 32. initialize themes get theme registry get callable theme hook include files Using registry handle render array get defaults for variables handle base hookexecute preprocess and process functions handle theme hook suggestions execute function or render template file
  33. 33. get callable theme hook$html = theme( ‘views_view’, array( Using registry ‘view’ => $this->view, ‘options’ => $this->options, ‘rows’ => $rows ));
  34. 34. get callable theme hook$html = theme( ‘views_view’, array( Using registry ‘view’ => $this->view, ‘options’ => $this->options, ‘rows’ => $rows ));
  35. 35. get callable theme hook$html = theme( array( ‘views_view__myviewname’, ‘views_view’ ), Using registry array( ‘view’ => $this->view, ‘options’ => $this->options, ‘rows’ => $rows ));
  36. 36. get callable theme hook$html = theme( array( ns ‘views_view__myviewname’, tio ‘views_view’ es ), gg Using registry su array( ok ‘view’ => $this->view, ho ‘options’ => $this->options, e ‘rows’ => $rows em ) th);
  37. 37. initialize themes get theme registry get callable theme hook include files Using registry handle render array get defaults for variables handle base hookexecute preprocess and process functions handle theme hook suggestions execute function or render template file
  38. 38. initialize themes get theme registry get callable theme hook include files Using registry handle render array get defaults for variables handle base hookexecute preprocess and process functions handle theme hook suggestions execute function or render template file
  39. 39. include files‘status_report’ => array( render element => requirements, file => system.admin.inc, type => module, Using registry theme path => modules/system, function => theme_status_report, includes => array( modules/system/system.admin.inc, ),),
  40. 40. include files‘status_report’ => array( render element => requirements, file => system.admin.inc, type => module, Using registry theme path => modules/system, function => theme_status_report, includes => array( modules/system/system.admin.inc, ),),
  41. 41. include files‘status_report’ => array( render element => requirements, file => system.admin.inc, type => module, theme path => modules/system, Building registry function => theme_status_report, includes => array( modules/system/system.admin.inc, ),),status_report => array( render element => requirements, file => system.admin.inc,),
  42. 42. include files‘status_report’ => array( render element => requirements, file => system.admin.inc, type => module, theme path => modules/system, Building registry function => theme_status_report, includes => array( modules/system/system.admin.inc, ),),status_report => array( render element => requirements, file => system.admin.inc,),
  43. 43. initialize themes get theme registry get callable theme hook include files Using registry handle render array get defaults for variables handle base hookexecute preprocess and process functions handle theme hook suggestions execute function or render template file
  44. 44. initialize themes get theme registry get callable theme hook include files Using registry handle render array get defaults for variables handle base hookexecute preprocess and process functions handle theme hook suggestions execute function or render template file
  45. 45. handle render array$elements = array( Using registry #type => textfield, #title => t(My title),);
  46. 46. handle render array$elements = array( #type => textfield, Using registry #title => t(My title),);$html = drupal_render($elements);
  47. 47. handle render array$elements = array( #type => textfield, #title => t(My title),);$html = drupal_render($elements); Using registry<div class="form-item form-type-textfield"> <label>My title</label> <input type="text" maxlength="128" size="60" class="form-text" /></div>
  48. 48. handle render array Using registryhook_element_info
  49. 49. handle render arrayhook_element_infoarray( #input => TRUE, #size => 60, #maxlength => 128, #autocomplete_path => FALSE, Using registry #process => array( ajax_process_form ), #theme => textfield, #theme_wrappers => array( form_element ),);
  50. 50. handle render array$elements = array( #type => textfield, #title => Shizzle, #input => TRUE, #size => 60, #maxlength => 128, Using registry #autocomplete_path => FALSE, #process => array( ajax_process_form, ), #theme => textfield, #theme_wrappers => array( form_element, ),
  51. 51. handle render array$elements = array( #type => textfield, #title => Shizzle, #input => TRUE, #size => 60, #maxlength => 128, Using registry #autocomplete_path => FALSE, #process => array( ajax_process_form, ), #theme => textfield, #theme_wrappers => array( form_element, ),
  52. 52. handle render array Building registrytextfield => array( render element => element,),
  53. 53. handle render arraytextfield => array( render element => element, Using registry),$variables = array( ‘element’ => $elements);
  54. 54. handle render array Using registry The Scary Render ArrayErik Stielstra - today at 15:15
  55. 55. initialize themes get theme registry get callable theme hook include files Using registry handle render array get defaults for variables handle base hookexecute preprocess and process functions handle theme hook suggestions execute function or render template file
  56. 56. initialize themes get theme registry get callable theme hook include files Using registry handle render array get defaults for variables handle base hookexecute preprocess and process functions handle theme hook suggestions execute function or render template file
  57. 57. get defaults for variables$html = theme( item_list, array( Using registry items => $links, title => t(My links) ));
  58. 58. get defaults for variables$html = theme( item_list, array( Using registry items => $links, title => t(My links) ));
  59. 59. get defaults for variables$html = theme( item_list, array( items => $links, title => t(My links) ) Using registry);item_list => array( variables => array( items => array(), title => NULL, type => ul, attributes => array() ),),
  60. 60. get defaults for variablesarray( items => $links, Using registry title => t(My links), type => ul, attributes => array())
  61. 61. initialize themes get theme registry get callable theme hook include files Using registry handle render array get defaults for variables handle base hookexecute preprocess and process functions handle theme hook suggestions execute function or render template file
  62. 62. initialize themes get theme registry get callable theme hook include files Using registry handle render array get defaults for variables handle base hookexecute preprocess and process functions handle theme hook suggestions execute function or render template file
  63. 63. initialize themes get theme registry get callable theme hook include files Using registry handle render array get defaults for variables handle base hookexecute preprocess and process functions handle theme hook suggestions execute function or render template file
  64. 64. initialize themes get theme registry get callable theme hook include files Using registry handle render array get defaults for variables handle base hookexecute preprocess and process functions handle theme hook suggestions execute function or render template file
  65. 65. execute preprocess and process functions$variables Using registry preprocess process
  66. 66. execute preprocess and process functionsarray( template => page, path => themes/bartik/templates, type => theme_engine, theme path => themes/bartik, render element => page, preprocess functions => array( template_preprocess, Using registry template_preprocess_page, contextual_preprocess, overlay_preprocess_page, shortcut_preprocess_page, ), process functions => array( template_process, template_process_page, rdf_process, bartik_process_page, ),)
  67. 67. execute preprocess and process functionsarray( template => page, path => themes/bartik/templates, type => theme_engine, theme path => themes/bartik, render element => page, preprocess functions => array( template_preprocess, Using registry template_preprocess_page, contextual_preprocess, overlay_preprocess_page, shortcut_preprocess_page, ), process functions => array( template_process, template_process_page, rdf_process, bartik_process_page, ),)
  68. 68. initialize themes get theme registry get callable theme hook include files Using registry handle render array get defaults for variables handle base hookexecute preprocess and process functions handle theme hook suggestions execute function or render template file
  69. 69. initialize themes get theme registry get callable theme hook include files Using registry handle render array get defaults for variables handle base hookexecute preprocess and process functions handle theme hook suggestions execute function or render template file
  70. 70. handle base hook handle theme hook suggestions views_view_fieldviews_view_field__archive__page__title Using registry node node__page region region__sidebar
  71. 71. handle base hookhandle theme hook suggestions Building registry pattern
  72. 72. handle base hook handle theme hook suggestions pattern Building registrynode => array( render element => elements, template => node,),
  73. 73. handle base hook handle theme hook suggestions pattern Building registrynode => array( render element => elements, template => node,), pattern => node__
  74. 74. handle base hook handle theme hook suggestions pattern Building registrynode => array( render element => elements, template => node,), pattern => node__
  75. 75. handle base hook handle theme hook suggestions Building registrynode__page => array( template => node--page, path => path/to/mytheme, render element => elements base hook => node,),
  76. 76. handle base hook handle theme hook suggestions Building registrynode__page => array( template => node--page, path => path/to/mytheme, render element => elements base hook => node,),
  77. 77. handle base hook handle theme hook suggestionstheme(node__page, $elements); Using registrytheme( array(node__page, node), $elements);
  78. 78. handle base hook handle theme hook suggestions Using registrytheme(node, $elements);
  79. 79. handle base hook handle theme hook suggestionstheme(node, $elements); Using registrytemplate_preprocess_node$variables[theme_hook_suggestions][] = node__ . $node->type;$variables[theme_hook_suggestions][] = node__ . $node->nid;
  80. 80. initialize themes get theme registry get callable theme hook include files Using registry handle render array get defaults for variables handle base hookexecute preprocess and process functions handle theme hook suggestions execute function or render template file
  81. 81. initialize themes get theme registry get callable theme hook include files Using registry handle render array get defaults for variables handle base hookexecute preprocess and process functions handle theme hook suggestions execute function or render template file
  82. 82. execute function or render template file Using registry
  83. 83. execute function or render template file Using registrytheme_item_list($variables);
  84. 84. execute function or render template filefind render function get extensionpreprocess trickery Using registrycall render function
  85. 85. execute function or render template filefind render function get extensionpreprocess trickery Using registrycall render function
  86. 86. execute function or render template filefind render function get extensionpreprocess trickery Using registrycall render function theme_render_template extract variables start output buffer include template file get and return OB
  87. 87. execute function or render template file Using registry return $output;
  88. 88. initialize themes get theme registry get callable theme hook include files Using registry handle render array get defaults for variables handle base hookexecute preprocess and process functions handle theme hook suggestions execute function or render template file
  89. 89. initialize themes get theme registry get callable theme hook include files Using registry handle render array get defaults for variables handle base hookexecute preprocess and process functions handle theme hook suggestions execute function or render template file
  90. 90. Sherlock markup & Sammy Semantic Andreas Sahle - today at 17.45
  91. 91. ?

×