deep into drupal theming layer

INsReady Inc. Upgrade Your Creat'v'ty 引锐信息科技有限公司 升级你的创造力

Deep into Drupal Theming layer

王景昇 (Jingsheng Wang)CEO @ INsReady

微博: @王景昇Twitter: @skyredwang

The above QR-Code was generated by qr.insready.com

INsReady Inc. Upgrade Your Creat'v'ty 引锐信息科技有限公司 升级你的创造力

Agenda:1. Business logic vs. Presentation logic2. Data granularity3. Theme engines4. Two ways to theme5. Render elements6. The power of theme()7. Theme registry8. Theming a View, Field, etc

INsReady Inc. Upgrade Your Creat'v'ty 引锐信息科技有限公司 升级你的创造力

Business logic vs. Presentation logicDrupal separates its business logic from its presentation logic to the extreme.

1. To make the code easier to maintain.2. To make it possible to easily swap out one layer's

implementation without having to re-write the other layers.

INsReady Inc. Upgrade Your Creat'v'ty 引锐信息科技有限公司 升级你的创造力

INsReady Inc. Upgrade Your Creat'v'ty 引锐信息科技有限公司 升级你的创造力

Case Study: Beer & Food paring

Live site: http://greatbrewers.com/beer-sommelier

INsReady Inc. Upgrade Your Creat'v'ty 引锐信息科技有限公司 升级你的创造力

How do we do it in a Drupal way?One solution:1. Use Panels to design the 3-column layout2. Put 3 Drupal blocks into the 3 columns3. 1st block use jQuery/Ajax to retrieve all food content

types from backend (explanation later)4. 2nd block to retrieve the nodes from sub-food-

content-type based the selection from block 1.5. 3rd block to retrieve more nodes....6. The backend is powered by Views with an addon

module called Views Datasource

INsReady Inc. Upgrade Your Creat'v'ty 引锐信息科技有限公司 升级你的创造力

Data granularity

Above diagram is from <Drupal 7 module development>

INsReady Inc. Upgrade Your Creat'v'ty 引锐信息科技有限公司 升级你的创造力

Theme enginesDrupal support alternative theme engines. But, we will only cover the Default Drupal theme engine: PHPTemplate

Two ways to theme 1. Theme functions: pass data to a PHP function to wrap it

in markup2. Templates: pass data to a template which is a PHP file

mixed with markup and PHP print statements

INsReady Inc. Upgrade Your Creat'v'ty 引锐信息科技有限公司 升级你的创造力

Theme functions Rules:● First, the name of the theme function follows the

pattern: theme_[theme hook name]

● Second, the theme function will only have a single parameter, as follows:

function theme_THEME_HOOK_NAME($variables) {...}

● Third, the theme function should return a string that contains the rendered representation of the data.

INsReady Inc. Upgrade Your Creat'v'ty 引锐信息科技有限公司 升级你的创造力

The workflow of preprocess functions:1. Code calls theme('hook_name', $variables).2. theme() calls preprocess functions for hook_name.3. Preprocess functions modify variables.4. theme() calls actual implementation for hook_name with

modified variables.

All preprocess functions take the form of:

[module]_preprocess_[theme hook name](&$variables)

This is extremely handy for module developers as it allows all sorts of integration with other modules.

INsReady Inc. Upgrade Your Creat'v'ty 引锐信息科技有限公司 升级你的创造力

Template filesTemplates are files primarily containing HTML but with some PHP statements mixed in using the template's variables.

Instead of declaring a theme_hook_name() function, a module would instead create a hook-name.tpl.php file.

All of the PHP in a template should be limited to printing out variables.

INsReady Inc. Upgrade Your Creat'v'ty 引锐信息科技有限公司 升级你的创造力

Order of preprocess execution1. template_preprocess()2. template_preprocesss_HOOK()3. MODULE_preprocess()4. MODULE_preprocess_HOOK()5. THEME_preprocess()6. THEME_preprocess_HOOK()7. template_process()8. template_processs_HOOK()9. MODULE_process()

10. MODULE_process_HOOK()11. THEME_process()12. THEME_process_HOOK()

INsReady Inc. Upgrade Your Creat'v'ty 引锐信息科技有限公司 升级你的创造力

Render elementsA Render element is a complex data structure passed as a single parameter to theme(), as one of its variables. Render elements are fundamentally nested arrays that can include:

1. The data to be rendered2. Other render elements which are considered "children"

of the element3. An array of structures such as CSS and JavaScript files,

that should be attached to the page when it is rendered4. A list of theme hooks that can be used to theme the

data5. A list of callback functions to run on the element before

and after it is themed

INsReady Inc. Upgrade Your Creat'v'ty 引锐信息科技有限公司 升级你的创造力

The power of theme()

INsReady Inc. Upgrade Your Creat'v'ty 引锐信息科技有限公司 升级你的创造力

Theme registry1. Whether it's a theme function or a template2. The list of preprocess functions to run3. The list of process functions to run4. The path to the template file (which includes whether the original

module template file is used or a theme version of it.)5. The theme function name (which indicates if it's the original module

theme function or one overridden by a theme.)6. The list of variables that should be passed to theme() when this theme

hook is called and a default value for each variable7. Whether, instead of a list of variables, the theme function expects

a single render element as its parameter, and what that render element should be named

Clean the theme registry every time you change a function or a template file in a theme!

INsReady Inc. Upgrade Your Creat'v'ty 引锐信息科技有限公司 升级你的创造力

How to theme a View

Demo Time!

INsReady Inc. Upgrade Your Creat'v'ty 引锐信息科技有限公司 升级你的创造力

How to theme a FieldFor example, use template override:

● field--body--article.tpl.php● field--article.tpl.php● field--body.tpl.php● field.tpl.php

INsReady Inc. Upgrade Your Creat'v'ty 引锐信息科技有限公司 升级你的创造力

Questions & Answers

INsReady Inc. Upgrade Your Creat'v'ty 引锐信息科技有限公司 升级你的创造力

Thank You/ 谢谢！

王景昇 (Jingsheng Wang)CEO @ INsReady

微博: @王景昇Twitter: @skyredwang

SPECIAL THANKS to 陈刚 & 上海万达信息股份有限公司 for sponsoring this training!