Drupal theming - a practical approach (European Drupal Days 2015)

Subtitel

1© Ibuildings 2014/2015 - All rights reserved

#DrupalDaysEU

DRUPAL THEMING - a practical approach

by Chris Jansen

#DrupalDaysEU

© Ibuildings 2014/2015 - All rights reserved

Gold Sponsors

#DrupalDaysEU

© Ibuildings 2014/2015 - All rights reserved

Media Sponsors

Silver Sponsors

A practical approach to the basics

Chris Jansen20 march 2015, Milan

Drupal theming

About me

5

About me

6

Topics

Tools and materials Introducing basic concepts Design breakdown Creating the theme Common mistakes

7

Tools and materials

8

Tools

Virtualbox Vagrant

9

Materials

Git repository Slides on slideshare

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

Access drupal site

192.168.33.10 user: admin pass: admin

11

Access server

vagrant ssh

Docroot on server

/vagrant/public/ == /var/www/public

Introducing basic concepts

12

Introducing basic concepts

• Directory layout • Basic theme elements • Entities & view modes • Render arrays • Hooks • Render process • Overriding theme functions • Overriding templates

13

Directory layout

14

drupal.org/project/*

Custom and/or sandbox modules.

Modules created by the features module.

Custom and/or contributed themes.

Best practice

Basic theme elements

• Regions • Blocks • Logo • Site name & slogan • Main/Secondary menu

15

Entities & view modes

Entities are stored information (usually content)

• Nodes • Taxonomy terms • Users • etc.

16

Entities & view modes

View modes are different ways to display entities

• Node • Full (Default view mode) • Teaser (configurable by default) • Rss

• Taxonomy • Taxonomy term page (Default view mode)

• User • User account (Default view mode)

• etc.17

Uitwerken

Adding your own view modes

Create a custom module • Implement hook_entity_info_alter()

Use contrib module: • Entity View Mode

• https://www.drupal.org/project/entity_view_mode • Display suite

• https://www.drupal.org/project/ds

18

Keyed array of data • #Propery or #value • Child

Render arrays - WHAT?

19

render()theme_container()

drupal_attributes()

render()

Render arrays - HOW?

Properties • What to render • How to render it

Children • What to include within

20

Properties • What to render • How to render it

render()theme_item_list()

drupal_attributes()

drupal_process_attached()

Render arrays - HOW?

21

Render arrays - HOW?

Properties • What to render • How to render it

22

render()

Render arrays - WHY?

Data can be changed, markup can not. • Change positioning • Add/Change/Remove values

23

Render arrays - WHY?

Data can be changed, markup can not. • Change positioning • Add/Change/Remove values

24

Hooks

hook_* • Modules only

hook_*_alter • Modules • Themes

template_* • Modules • Themes

theme_* • Themes

25

Module

Base theme

Subtheme

Current theme

Theme function • Fast • Limited (pre)processing • theme_*()

Template • Flexible • *.tpl.php

Render process

theme()

26

render aray

theme function template

HTML

processtemplate_process_*

preprocesstemplate_preprocess_*

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

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

Design breakdown

29

Design breakdown

Identify regions Determine additional requirements

30

Identify regions

Top bar Main menu Left sidebar Main content Footer

31

Identify regions

Top bar Main menu Sidebar Left & Right Main content Footer

32

Identify regions

Top bar Main menu Sidebar Left & Right Main content Split footer Left & Right Footer

33

Identify regions

Top bar Main menu Sidebar Left & Right Main content Below content Left & Right Footer

34

Determine additional requirements

Browser support Slideshows Fancy menu’s etc.

35

Creating the theme

36

Where to start

Buy a theme Start from scratch Subtheme

• Start from scratch • Starterkit

37

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

Theme from scratch

Required keys • name • core

Recommended keys • description

Commonly used optional keys • base theme • stylesheets • scripts

39

Subtheme from scratch

Required keys • name • core

Recommended keys • description

Commonly used optional keys • base theme • stylesheets • scripts

40

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?

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

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

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

Define CSS/JS

Add CSS/JS to info file Clear Caches

45

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

#attached example

Drupal_add_* example

Other ways to add CSS/JS

47

Other ways to add CSS/JS

Adding options to your JS

48

Other ways to add CSS/JS

Add/Override/Remove directly • hook_js_alter(); • hook_css_alter();

49

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

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

Alter markup using templates

52

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

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 titleArticle text Article text Article text Article text Article text Article textArticle text Article text Article text Article text Article text Article text Article text Article text Article text

Common mistakes

55

Hacking core, modules or themes

Why not? • Breaks upgrades • Maintainability • theme_*

Alternatives • template_(pre)process_* • hook_*_alter hooks • theme_*

56

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

Changing field ordering in templates

Why not? • Hard to maintain

Alternatives • Use view modes

58

Using global $user

Why not? • Security!

Alternatives • Use user_uid_optional_load()

59

Not using check_plain()/check_markup()

Why is this a problem? • Security!

When to use them? • Check_plain() • Check_markup()

60

Happy theming

Thank you!

61