10. Install virtualbox and vagrant
http://www.vagrantup.com/downloads
https://www.virtualbox.org/wiki/Downloads
10
Copy image
Supplied on several USB sticks
Boot VM
vagrant up
26. Theme function
• Fast
• Limited (pre)processing
• theme_*()
Template
• Flexible
• *.tpl.php
Render process
theme()
26
render aray
theme function template
HTML
process
template_process_*
preprocess
template_preprocess_*
27. Overriding theme functions
Overrides live in template.php
Copy & rename original theme function
• theme_item_list -> themename_item_list
Alter the function to suit your needs.
Clear cache
27
28. Overriding templates
Copy template file to your theme folder
• modules/block/block.tpl.php -> sites/all/
themes/yourtheme/templates/block.tpl.php
Alter the template
Clear cache
28
Best practice: Place your templates in a template folder
e.g.: ../yourtheme/templates/block.tpl.php
37. Where to start
Buy a theme
Start from scratch
Subtheme
• Start from scratch
• Starterkit
37
38. Creating the theme
Creating the .info file
• Theme from scratch
• Subtheme from scratch
• Define regions
• Define CSS/JS
‣ Override/disable CSS/JS
Other ways to add CSS/JS
Alter markup using templates
38
39. Theme from scratch
Required keys
• name
• core
Recommended keys
• description
Commonly used optional keys
• base theme
• stylesheets
• scripts
39
40. Subtheme from scratch
Required keys
• name
• core
Recommended keys
• description
Commonly used optional keys
• base theme
• stylesheets
• scripts
40
41. Exercises
41
1. Create a new theme
2. Change your theme to be a Zen subtheme
3. Compare your subtheme to Zen, what do you
notice?
42. Subtheme compared to Zen
Different regions
• Unless defined otherwise Drupal assumes
default regions: Header, Highlighted, Help,
Content, Left sidebar, Right sidebar, Footer
No stylesheets
• All stylesheets defined in basetheme.info are
inherited, but only if at least one stylesheet has
been defined in mytheme.info
• Zen conditionally defines stylesheets in
hook_preprocess_html
No Logo
42
43. Add region to .info file
Clear caches
Print the region in page.tpl.php
Define regions
43
Best practice: Place your templates in a template folder
e.g.: ../yourtheme/templates/block.tpl.php
44. Exercises
44
1. Add zen’s regions to your info file
2. Add a custom region to your info file
3. Render the region in page.tpl.php
Hints:
• Copy zen’s page.tpl.php
• git checkout ex-1 for previous
exercise results
46. Other ways to add CSS/JS
Functions to use
• using drupal_add_css()
• using drupal_add_js()
• using [‘#attached’] in a render array()
Where to use them
• hook_preprocess_HOOK()
• hook_process_HOOK()
• hook_TYPE_alter()
46
48. Other ways to add CSS/JS
Adding options to your JS
48
49. Other ways to add CSS/JS
Add/Override/Remove directly
• hook_js_alter();
• hook_css_alter();
49
50. Exercise
50
Experiment
1. Define CSS in info file
2. Remove/override CSS in info file
3. Add css using drupal_add_css()
4. Add a “hello world” script using
drupal_add_js()
5. Add css using [‘#attached’]
6. Add a “hello world” script using [‘#attached’]
7. Place a script in the footer.
Hints:
• git checkout ex-2 for previous
exercise results
51. Alter markup using templates
Lets create a two-column article.
Copy template file to your theme folder
sites/all/themes/zen/templates/node.tpl.php ->
sites/all/themes/yourtheme/templates/node.tpl.php
Alter the template
Clear cache
51
53. Alter markup using templates
Problem!
• Template is used for all content types
Solution: suggestions
• node.tpl.php
• node--type.tpl.php
• node--type--view_mode.tpl.php (EVM)
• node--nodeid.tpl.php
• node--nodeid--view_mode.tpl.php (EVM)
53
54. Display the author on an article page.
• Render user with view mode teaser
• Use preprocessing
• Use a template
Exercise
54
Hints:
• user_load()
• user_view()
• $variables[‘theme_hook_suggestions’]
• git checkout ex-3 for previous exercise
results
Author name
Article title
Article text Article text
Article text Article text
Article text Article text
Article text Article text Article text
Article text Article text Article text
Article text Article text Article text
57. Advanced logic in templates
Why not?
• Templates are responsible for display only
• Difficult to get to variables
• Hard to maintain
Alternatives
• (pre)process data before it reaches the template
Only PHP you should use
• if(content_present)
• foreach($content_list as $content)
• print ($content);
57
58. Changing field ordering in templates
Why not?
• Hard to maintain
Alternatives
• Use view modes
58