KEMBAR78
Introduction to Drupal (7) Theming | PDF
Theming in Drupal
   An introduction to theming !
   with a little Drupal 7 twist!
                 !
Drupal Camp Edinburgh May 2011!
     Rob Carr @robertgcarr!
What’s covered…
Prereqs.!
Theming concepts.!
Theme components.!
Hardcore.!
Tools.!
Pre-requisites for Theming Adventures
HTML.!
CSS.!
Basics of Drupal.!
Some idea of PHP.!
‘Some idea of PHP:’
•  Print variables!
•  Logic (if… then)!
•  Call functions!


   For the braver:
 Arrays and Objects
  knowledge useful
Theming Options
Core theme!             	
  	
  
                                   Garland!
Off the Shelf:!
                                         !
•  Contributed (d.o)!
                                    Bartik!
•  Purchase!                             !
Scratch (hardcore!)!                Seven!
Sub-theme!                               !
!                                    Stark!
     Never hack
      a theme
Sub Theme?
Select [base] theme.!   	
  	
  
Override elements
                                   Base theme!
you don’t like.!
Add custom PHP
snippets, HTML,
CSS or JS.!                        Sub theme!
                                   (your custom code)"




    Never hack
     a theme
What is a Theme?
A folder full of code:!
•  Manifest (.info)"
•  Templates (.tpl.php)"
•  Styles (.css)"
•  Logic (template.php)"
•  JavaScript (.js)"
"
    Custom themes live in:	

      /sites/all/themes/
         themename
Manifest: yourtheme.info
                      ;	
  DESCRIPTION	
  

Theme description.!   name	
  =	
  yourtheme	
  
                      descrip=on	
  =	
  A	
  flexible,	
  simple	
  custom	
  theme	
  based	
  on	
  Bar=k.	
  
                      	
  
                      ;	
  REQUIREMENTS	
  

Requirements.!        core	
  =	
  7.x	
  
                      base	
  theme	
  =	
  bar=k	
  
                      	
  
                      ;	
  STYLESHEETS	
  

Stylesheets.!         stylesheets[all][]	
  =	
  layout.css	
  
                      stylesheets[all][]	
  =	
  style.css	
  
                      stylesheets[print][]	
  =	
  print.css	
  
                      	
  
Regions.!             ;	
  REGIONS	
  
                      regions[header]	
  =	
  Header	
  
                      regions[help]	
  =	
  Help	
  

Scripts.!
                      regions[page_top]	
  =	
  Page	
  top	
  
                      regions[page_boSom]	
  =	
  Page	
  boSom	
  
                      regions[highlighted]	
  =	
  Highlighted	
  
                      regions[naviga=on]	
  =	
  Naviga=on	
  

(Features).!          regions[content]	
  =	
  Content	
  
                      regions[sidebar_first]	
  =	
  Sidebar	
  first	
  
                      regions[sidebar_second]	
  =	
  Sidebar	
  second	
  
                      regions[footer]	
  =	
  Footer	
  

(Settings).!          	
  
                      ;	
  SCRIPTS	
  
                      scripts[]	
  =	
  scripts.js	
  
                      	
  
CSS
Cascading Style Sheets –
  inherit or override!
Regions

;	
  REGIONS	
  
regions[header]	
  =	
  Header	
  
regions[help]	
  =	
  Help	
  
regions[page_top]	
  =	
  Page	
  top	
  
regions[page_boSom]	
  =	
  Page	
  boSom	
  
regions[highlighted]	
  =	
  Highlighted	
  
regions[naviga=on]	
  =	
  Naviga=on	
  
regions[content]	
  =	
  Content	
  
regions[sidebar_first]	
  =	
  Sidebar	
  first	
  
regions[sidebar_second]	
  =	
  Sidebar	
  
second	
  
regions[footer]	
  =	
  Footer	
  
Templating
Templates
html.tpl.php – master       region.tpl.php"

template; includes
<HEAD> content.!
                              field.tpl.php"
!                                               block.tpl.php"

page.tpl.php – layout of
all <BODY> content.!
!                                               block.tpl.php"
                            node.tpl.php"
node.tpl.php –
                                              region.tpl.php"



individual nodes (pieces    region.tpl.php"

of content).!               page.tpl.php"
                           html.tpl.php"
html.tpl.php




               Theme:	
  Sky	
  (HTML5	
  theme)	
  
html.tpl.php – Generated
Template variables



  $page – rendered page
  content – page.tpl.php
page.tpl.php
page.tpl.php variables

   <?php	
  if	
  ($site_slogan):	
  ?>	
  
   	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  <h2	
  class="site-­‐slogan"><?php	
  print	
  $site_slogan;	
  ?></h2>	
  
   <?php	
  endif;	
  ?>	
  




http://api.drupal.org/api/drupal/modules--system--page.tpl.php/7"
page.tpl.php regions




      <?php	
  print	
  render($page[region_name]);	
  ?>	
  

The array $page contains all region content for that particular page"
node.tpl.php
Renders the content of a
node and all its
components:!
•  Title!
•  Main body!
•  Author!
•  Links (taxonomy etc)!
•  Comments!
Different Content (node) types
Node type:!                     Template:"
•  Article!                     •  node--article.tpl.php"
•  Blog!                        •  node--blog.tpl.php"
•  Event!                       •  node--event.tpl.php"
•  Project!                     •  node--project.tpl.php"

                 Don’t have to define
                 node.tpl.php to have            It’s a

                                                 --	

                                                double	

              nodetype-specific templates
Sub Theming - Templates
You don’t have to    Base theme Your theme	

define every single     html.tpl.php"
template if it
doesn’t need           page.tpl.php"   page.tpl.php"
changing.!
                       node.tpl.php"   node.tpl.php"
Templates… and finally
You can also create
tpl.php files for Views. !
!
Edit View > Advanced >
> Information!
Templates… and finally
You can also create
tpl.php files for
Views too. !
!
Edit View >
Advanced > >
Information!
Logic
Q. Where does the
HTML contents of
                           We can override
the variables come
                          this HTML output
from?!
                           by altering any
!                        themable function
A. theme()!              and even add our
                            own variables"
theme()
1.  Menu system receives
    page request.!
2.  Node data built and
    template applied.!
3.  Node HTML
    generated.!
4.  Preprocessing to
    generate HTML for
    blocks in each region.!
5.  Page template
    applied.!
Example - Breadcrumb
How Drupal Outputs Breadcrumb
Drupal looks for:!
1.  yourtheme_breadcrumb().!
2.  sites/all/themes/yourtheme/breadcrumb.tpl.php!
3.  theme_breadcrumb().!


                   Generates (example):"
                   "
                   Home » contact us"
Overide theme_breadcrumb()




 Example:"            Becomes:"
 "                    "
 Home » contact us"   Home   contact us"
A home for our theme function:
Any custom theme functions live in:!
!
!    sites/all/themes/yourtheme/template.php	

!
And so much more…!
template.php
Contains function overrides and can add/
replace template variables for our theme.!
!
    <theme name>_preprocess_<template name>	

!
Examples:!
yourtheme_preprocess_page(&$vars)"
yourtheme_preprocess_html(&$vars)"
Add variable example
Insert into template.php:!
!
!
!
Add to node.tpl.php:!
!
!
Clear the cache…!
Add variable example
Insert into template.php:!
!
!
!
Add to node.tpl.php:!
!
          Clear caches"




!
Clear the cache…!
Congrats!
You’ve now built a
theme!!
!
But what next: how can
I keep tweaking?!
Tools
Firebug (Plugin for FF, Firebug-Lite for others)!
IE Developer!
Drupal Functions
Drupal API: !
http://api.drupal.org/!
!
Contrib Modules API:
http://drupalcontrib.org/api/drupal!

!
Template Variables
HTML:
http://api.drupal.org/api/
drupal/modules--system--
html.tpl.php/7!
!
Page:
http://api.drupal.org/api/
drupal/modules--system--
page.tpl.php/7!
!
Node:
http://api.drupal.org/api/
drupal/modules--node--
node.tpl.php/7!
!
The Killer App!
Theme Developer Module
http://drupal.org/project/devel_themer!
!
See also Drupal for Firebug (a bit hardcore)!
http://drupal.org/project/drupalforfirebug!
!
The Killer App!
Theme Developer Module
http://drupal.org/project/devel_themer!
!
See also Drupal for Firebug (a bit hardcore)!
http://drupal.org/project/drupalforfirebug!
!
Top Tip:


 Never eat
yellow snow
Top Tip:
            Clear the
             caches!

           Never eat
                  	

         yellow snow
/admin/config/development/performance/	

          (‘Clear all caches’)	

                   	

                  Or	

              drush cc all	

                    	

                   	

                   "
Drupal 6
Well I mastered theming in Drupal 6, but
what changed when Drupal 7 was released?!
!
Too much to talk about here, but a great list
is at:!
http://drupal.org/update/themes/6/7!
Packt – Drupal 7 Themes

Only hard copy book
available at time of
presentation -
published June 2011!
!
Again!
We covered the basics:!
•  Theme components !
•  Templates!
•  Overriding theme()!
•  Tools!
•  Reference!
FIN

Introduction to Drupal (7) Theming

  • 1.
    Theming in Drupal An introduction to theming ! with a little Drupal 7 twist! ! Drupal Camp Edinburgh May 2011! Rob Carr @robertgcarr!
  • 2.
  • 3.
    Pre-requisites for ThemingAdventures HTML.! CSS.! Basics of Drupal.! Some idea of PHP.!
  • 4.
    ‘Some idea ofPHP:’ •  Print variables! •  Logic (if… then)! •  Call functions! For the braver: Arrays and Objects knowledge useful
  • 5.
    Theming Options Core theme!     Garland! Off the Shelf:! ! •  Contributed (d.o)! Bartik! •  Purchase! ! Scratch (hardcore!)! Seven! Sub-theme! ! ! Stark! Never hack a theme
  • 6.
    Sub Theme? Select [base]theme.!     Override elements Base theme! you don’t like.! Add custom PHP snippets, HTML, CSS or JS.! Sub theme! (your custom code)" Never hack a theme
  • 7.
    What is aTheme? A folder full of code:! •  Manifest (.info)" •  Templates (.tpl.php)" •  Styles (.css)" •  Logic (template.php)" •  JavaScript (.js)" " Custom themes live in: /sites/all/themes/ themename
  • 8.
    Manifest: yourtheme.info ;  DESCRIPTION   Theme description.! name  =  yourtheme   descrip=on  =  A  flexible,  simple  custom  theme  based  on  Bar=k.     ;  REQUIREMENTS   Requirements.! core  =  7.x   base  theme  =  bar=k     ;  STYLESHEETS   Stylesheets.! stylesheets[all][]  =  layout.css   stylesheets[all][]  =  style.css   stylesheets[print][]  =  print.css     Regions.! ;  REGIONS   regions[header]  =  Header   regions[help]  =  Help   Scripts.! regions[page_top]  =  Page  top   regions[page_boSom]  =  Page  boSom   regions[highlighted]  =  Highlighted   regions[naviga=on]  =  Naviga=on   (Features).! regions[content]  =  Content   regions[sidebar_first]  =  Sidebar  first   regions[sidebar_second]  =  Sidebar  second   regions[footer]  =  Footer   (Settings).!   ;  SCRIPTS   scripts[]  =  scripts.js    
  • 9.
    CSS Cascading Style Sheets– inherit or override!
  • 10.
    Regions ;  REGIONS   regions[header]  =  Header   regions[help]  =  Help   regions[page_top]  =  Page  top   regions[page_boSom]  =  Page  boSom   regions[highlighted]  =  Highlighted   regions[naviga=on]  =  Naviga=on   regions[content]  =  Content   regions[sidebar_first]  =  Sidebar  first   regions[sidebar_second]  =  Sidebar   second   regions[footer]  =  Footer  
  • 11.
  • 12.
    Templates html.tpl.php – master region.tpl.php" template; includes <HEAD> content.! field.tpl.php" ! block.tpl.php" page.tpl.php – layout of all <BODY> content.! ! block.tpl.php" node.tpl.php" node.tpl.php – region.tpl.php" individual nodes (pieces region.tpl.php" of content).! page.tpl.php" html.tpl.php"
  • 13.
    html.tpl.php Theme:  Sky  (HTML5  theme)  
  • 14.
  • 15.
    Template variables $page – rendered page content – page.tpl.php
  • 16.
  • 17.
    page.tpl.php variables <?php  if  ($site_slogan):  ?>                      <h2  class="site-­‐slogan"><?php  print  $site_slogan;  ?></h2>   <?php  endif;  ?>   http://api.drupal.org/api/drupal/modules--system--page.tpl.php/7"
  • 18.
    page.tpl.php regions <?php  print  render($page[region_name]);  ?>   The array $page contains all region content for that particular page"
  • 19.
    node.tpl.php Renders the contentof a node and all its components:! •  Title! •  Main body! •  Author! •  Links (taxonomy etc)! •  Comments!
  • 20.
    Different Content (node)types Node type:! Template:" •  Article! •  node--article.tpl.php" •  Blog! •  node--blog.tpl.php" •  Event! •  node--event.tpl.php" •  Project! •  node--project.tpl.php" Don’t have to define node.tpl.php to have It’s a -- double nodetype-specific templates
  • 21.
    Sub Theming -Templates You don’t have to Base theme Your theme define every single html.tpl.php" template if it doesn’t need page.tpl.php" page.tpl.php" changing.! node.tpl.php" node.tpl.php"
  • 22.
    Templates… and finally Youcan also create tpl.php files for Views. ! ! Edit View > Advanced > > Information!
  • 23.
    Templates… and finally Youcan also create tpl.php files for Views too. ! ! Edit View > Advanced > > Information!
  • 24.
    Logic Q. Where doesthe HTML contents of We can override the variables come this HTML output from?! by altering any ! themable function A. theme()! and even add our own variables"
  • 25.
    theme() 1.  Menu systemreceives page request.! 2.  Node data built and template applied.! 3.  Node HTML generated.! 4.  Preprocessing to generate HTML for blocks in each region.! 5.  Page template applied.!
  • 26.
  • 27.
    How Drupal OutputsBreadcrumb Drupal looks for:! 1.  yourtheme_breadcrumb().! 2.  sites/all/themes/yourtheme/breadcrumb.tpl.php! 3.  theme_breadcrumb().! Generates (example):" " Home » contact us"
  • 28.
    Overide theme_breadcrumb() Example:" Becomes:" " " Home » contact us" Home contact us"
  • 29.
    A home forour theme function: Any custom theme functions live in:! ! ! sites/all/themes/yourtheme/template.php ! And so much more…!
  • 30.
    template.php Contains function overridesand can add/ replace template variables for our theme.! ! <theme name>_preprocess_<template name> ! Examples:! yourtheme_preprocess_page(&$vars)" yourtheme_preprocess_html(&$vars)"
  • 31.
    Add variable example Insertinto template.php:! ! ! ! Add to node.tpl.php:! ! ! Clear the cache…!
  • 32.
    Add variable example Insertinto template.php:! ! ! ! Add to node.tpl.php:! ! Clear caches" ! Clear the cache…!
  • 33.
    Congrats! You’ve now builta theme!! ! But what next: how can I keep tweaking?!
  • 34.
    Tools Firebug (Plugin forFF, Firebug-Lite for others)! IE Developer!
  • 35.
    Drupal Functions Drupal API:! http://api.drupal.org/! ! Contrib Modules API: http://drupalcontrib.org/api/drupal! !
  • 36.
  • 37.
    The Killer App! ThemeDeveloper Module http://drupal.org/project/devel_themer! ! See also Drupal for Firebug (a bit hardcore)! http://drupal.org/project/drupalforfirebug! !
  • 38.
    The Killer App! ThemeDeveloper Module http://drupal.org/project/devel_themer! ! See also Drupal for Firebug (a bit hardcore)! http://drupal.org/project/drupalforfirebug! !
  • 39.
    Top Tip: Nevereat yellow snow
  • 40.
    Top Tip: Clear the caches! Never eat yellow snow /admin/config/development/performance/ (‘Clear all caches’) Or drush cc all "
  • 41.
    Drupal 6 Well Imastered theming in Drupal 6, but what changed when Drupal 7 was released?! ! Too much to talk about here, but a great list is at:! http://drupal.org/update/themes/6/7!
  • 42.
    Packt – Drupal7 Themes Only hard copy book available at time of presentation - published June 2011! !
  • 43.
    Again! We covered thebasics:! •  Theme components ! •  Templates! •  Overriding theme()! •  Tools! •  Reference!
  • 44.

Editor's Notes

  • #16 Variables:$css: An array of CSS files for the current page.$language: (object) The language the site is being displayed in. $language-&gt;language contains its textual representation. $language-&gt;dir contains the language direction. It will either be &apos;ltr&apos; or &apos;rtl&apos;.$rdf_namespaces: All the RDF namespace prefixes used in the HTML document.$grddl_profile: A GRDDL profile allowing agents to extract the RDF data.$head_title: A modified version of the page title, for use in the TITLE tag.$head_title_array: (array) An associative array containing the string parts that were used to generate the $head_title variable, already prepared to be output as TITLE tag. The key/value pairs may contain one or more of the following, depending on conditions:title: The title of the current page, if any.name: The name of the site.slogan: The slogan of the site, if any, and if there is no title.$head: Markup for the HEAD section (including meta tags, keyword tags, and so on).$styles: Style tags necessary to import all CSS files for the page.$scripts: Script tags necessary to load the JavaScript files and settings for the page.$page_top: Initial markup from any modules that have altered the page. This variable should always be output first, before all other dynamic content.$page: The rendered page content.$page_bottom: Final closing markup from any modules that have altered the page. This variable should always be output last, after all other dynamic content.$classes String of classes that can be used to style contextually through CSS.
  • #18 General utility variables:$base_path: The base URL path of the Drupal installation. At the very least, this will always default to /.$directory: The directory the template is located in, e.g. modules/system or themes/bartik.$is_front: TRUE if the current page is the front page.$logged_in: TRUE if the user is registered and signed in.$is_admin: TRUE if the user has permission to access administration pages.Site identity:$front_page: The URL of the front page. Use this instead of $base_path, when linking to the front page. This includes the language domain or prefix.$logo: The path to the logo image, as defined in theme configuration.$site_name: The name of the site, empty when display has been disabled in theme settings.$site_slogan: The slogan of the site, empty when display has been disabled in theme settings.Navigation:$main_menu (array): An array containing the Main menu links for the site, if they have been configured.$secondary_menu (array): An array containing the Secondary menu links for the site, if they have been configured.$breadcrumb: The breadcrumb trail for the current page.Page content (in order of occurrence in the default page.tpl.php):$title_prefix (array): An array containing additional output populated by modules, intended to be displayed in front of the main title tag that appears in the template.$title: The page title, for use in the actual HTML content.$title_suffix (array): An array containing additional output populated by modules, intended to be displayed after the main title tag that appears in the template.$messages: HTML for status and error messages. Should be displayed prominently.$tabs (array): Tabs linking to any sub-pages beneath the current page (e.g., the view and edit tabs when displaying a node).$action_links (array): Actions local to the page, such as &apos;Add menu&apos; on the menu administration interface.$feed_icons: A string of all feed icons for the current page.$node: The node object, if there is an automatically-loaded node associated with the page, and the node ID is the second argument in the page&apos;s path (e.g. node/12345 and node/12345/revisions, but not comment/reply/12345).Regions:$page[&apos;help&apos;]: Dynamic help text, mostly for admin pages.$page[&apos;highlighted&apos;]: Items for the highlighted content region.$page[&apos;content&apos;]: The main content of the current page.$page[&apos;sidebar_first&apos;]: Items for the first sidebar.$page[&apos;sidebar_second&apos;]: Items for the second sidebar.$page[&apos;header&apos;]: Items for the header region.$page[&apos;footer&apos;]: Items for the footer region.