Drupal Front End
              Tips and Tricks




www.hicktech.com
www.designtotheme.com
                         
@emmaj...
PHP Survival Techniques
     Using Square Dancing
         as an Analogy


                
About this talk
    ●
        There are a lot of theme snippets available in the Theme Guide. There 
        is not, howev...
 
    Stick around, I've got copies to give away.
                           
Drupal Theme Guide
    http://drupal.org/theme­guide




                   
Theme snippets
    http://drupal.org/node/45471




                   
The Zen Theme
    http://drupal.org/project/zen




                   
Learning through analogies
                 
 
    www.travelinghoedowners.com
                  
    bootstrapping
           
Variables



   
http://www.jontwest.com/Pro­Bono.php    
Variables




         
Contents of variables
    exist inside their containers




                   
Contents of variables
         exist inside their containers




http://www.laboutiquedupetitprince.com/en/figures­56/pixi...
Regions



   
http://opswingers.free.fr/cestquoi.htm    
Regions




        
Functions



                                       
    http://www.dehnbase.org/sd/tutorial/counter­rotate.php?p=4
Functions

user_is_logged_in ()




                        
Homework (f'reals)
    ●
        It's time to make your first­ever function!
    ●
        www.designtotheme.com




     ...
Functions with Parameters
user_access ('access administration pages')


in_array ('admin', array_values ($user­>roles))


...
Theme Functions
http://api.drupal.org/api/group/themeable/6


theme('links',
    $primary_links,
    array('class' => 'lin...
Homework Part 2 (also f'reals)
    ●
        www.designtotheme.com




                         
 
                    Theming
http://usawestwa.com/Outfit/
                                
 
                Theming
www.squaredanceomaha.org/dress
                                  
PHPtemplate

Decide on the dance
                      Choose your clothes                                        Dance th...
PHPtemplate




Collect the content from 
 Drupal using modules          Run through the                                  ...
How to create themes
    1.Download an existing theme.
    2.Look for variables and functions.
    3.Alter the placement o...
page.tpl.php template file
<!DOCTYPE html PUBLIC "­//W3C//DTD XHTML 1.0 Strict//EN"
          "http://www.w3.org/TR/xhtml1...
page.tpl.php template file
<!DOCTYPE html PUBLIC "­//W3C//DTD XHTML 1.0 Strict//EN"
          "http://www.w3.org/TR/xhtml1...
Variables must be printed


    <?php print                               ?>




                                 
Variables must be printed

<title>

  <?php print $head_title ?>
</title>




                       
Zomg
where'd you find those variables?
    ●
        Look at /modules/system/page.tpl.php
        OR
    ●
        http://...
api.drupal.org is your friend.
           go there often.




                   
The modules folder is also your friend.




                        
Look with your eyes,
      not your editor.



              
tpl.php files
    ●
        Look for basic files:
        ●
             /modules
        ●
            Download Zen.
    ...
Even more tpl.php files
    ●
        www.example.com/node/5
        ●
            page­node­5.tpl.php
        ●
         ...
Conditionals
                                                if (you're the inside couple) {
                             ...
What's an “if”?
if ($logo) {
    <?php print                               ?>
}




                                 
page.tpl.php template file
<!DOCTYPE html PUBLIC "­//W3C//DTD XHTML 1.0 Strict//EN"
          "http://www.w3.org/TR/xhtml1...
Fancy data structures: arrays + objects
                     Grouping and sorting your data




                        
Fancy data structures: arrays


                                          Multiple “drawers” of sorted content




       ...
Devel Module: Themer Info




                 
$node object

$node­>nid
$node­>body
$node­>content['body'][#value]




                                  
“Advanced” PHP
    ●
        Never be afraid to try something.
    ●
        Always back up your files first.
    ●
      ...
Lessons from Drawing Class




               1. Imagine what you want.
              2. Make a gesture drawing.
         ...
Applied to PHP
1. Imagine what you want.
2. Find the right place for it.
3. Write the comments In PHP for what you're 
abo...
My first Perl scripts had 
comments explaining “foreach” 
loops.
There is no shame in this level of 
commenting because I ...
A snippet for node.tpl.php
                  http://drupal.org/node/120855



<?php if ($submitted) { ?>
<span class="subm...
PHP Snippet
                   from: http://drupal.org/node/21401


    <?php if ($submitted) { ?>
    <span class="submit...
Homework
    ●
        Read a snippet and imagine, sketch, 
        visualize what it does.
             http://drupal.org...
template.php: sup with that?
    ●
        Preparing variables that weren't assembled by 
        Drupal and its modules.
...
Using template.php




Collect the content from 
 Drupal using modules             Create new                             ...
                                      

http://www.flickr.com/photos/98274023@N00/3335326425/
Tomatoes
    Peanut butter and
       Mayonnaise
     on brown bread.
    Wrapped in saran.


             
                                      

http://www.flickr.com/photos/chegs/190039408/
Preprocess functions:
making your own (*^#Q$% lunch.




               
In the file template.php
function bolg_preprocess_page (&$variables) {
   // Add a "go home" button to page.tpl.php
   if ...
Homework
    ●
        Download and dissect the Zen Theme
        ●
            http://drupal.org/project/zen

    ●
     ...
In short.....PHP theming essentials:
    ●   PHP is a linear “programming” language, just like a 
        dance.
    ●   P...
 
                    Theming
http://usawestwa.com/Outfit/
                                
Variables



   
http://www.jontwest.com/Pro­Bono.php    
Regions



   
http://opswingers.free.fr/cestquoi.htm    
Functions



                                       
    http://www.dehnbase.org/sd/tutorial/counter­rotate.php?p=4
Conditionals
                                                if (you're the inside couple) {
                             ...
Snippets &
            Variables
    ●
        Create a library.
    ●
        Use a base theme.
    ●
        Beg, borrow...
Preprocess
              functions


                                         

http://www.flickr.com/photos/98274023@N00/...
Friends don't let friends eat 
peanut butter and mayo 
sandwiches.


Questions?
@emmajanedotnet
www.designtotheme.com <­­­...
Upcoming SlideShare
Loading in …5
×

Drupal Front End PHP

15,337
-1

Published on

Published in: Technology
1 Comment
10 Likes
Statistics
Notes
  • Ya estan aburridos de que les insulten sus post y de esta red social, ya paso de, moda mejor conoscan una red nueva una nueva pagina de internet esa pagina es:
    http://www.mytech.com.mx/
    Aqui no insultaraN TUS POST conoceras nuevos amigos y te dara muchas ventajas en tu vida de interaccion de computadoras te ayudaran a sacarte de cualkier duda nomas regirtrate y se parte de una nueva generacion en la web es My tech
    MyTech! - Tecnología en un sólo lugar
    www.mytech.com.mx
    este es mi perfil:
    http://www.mytech.com.mx/perfil/LUCKI1316
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
15,337
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
234
Comments
1
Likes
10
Embeds 0
No embeds

No notes for slide

Drupal Front End PHP

  1. Drupal Front End Tips and Tricks www.hicktech.com www.designtotheme.com     @emmajanedotnet
  2. PHP Survival Techniques Using Square Dancing as an Analogy    
  3. About this talk ● There are a lot of theme snippets available in the Theme Guide. There  is not, however, a lot of information about PHP which is the language  that makes up these snippets. If you're tired of copying, pasting and  praying and are ready to understand some of the magic behind those  snippets, this session is for you! ● In this session you will learn how to manipulate and master: ● The very, very basics of PHP and the popular theming engine  PHPtemplate ● Variables and tpl.php template files ● Arrays and objects and other crow­bar­worthy data containers. ● The really scary looking stuff that's in the mysterious file  template.php ● Examples will be pulled from the Drupal.org Theme Guide as well as  the wildly successful book on theming, Front End Drupal (co­authored  by Emma Jane and Konstantin Kaefer).    
  4.   Stick around, I've got copies to give away.  
  5. Drupal Theme Guide http://drupal.org/theme­guide    
  6. Theme snippets http://drupal.org/node/45471    
  7. The Zen Theme http://drupal.org/project/zen    
  8. Learning through analogies    
  9.   www.travelinghoedowners.com  
  10.   bootstrapping  
  11. Variables   http://www.jontwest.com/Pro­Bono.php  
  12. Variables    
  13. Contents of variables exist inside their containers    
  14. Contents of variables exist inside their containers http://www.laboutiquedupetitprince.com/en/figures­56/pixi­81/pixi­figure­the­little­     prince­sheep­box­518.html
  15. Regions   http://opswingers.free.fr/cestquoi.htm  
  16. Regions    
  17. Functions     http://www.dehnbase.org/sd/tutorial/counter­rotate.php?p=4
  18. Functions user_is_logged_in ()    
  19. Homework (f'reals) ● It's time to make your first­ever function! ● www.designtotheme.com    
  20. Functions with Parameters user_access ('access administration pages') in_array ('admin', array_values ($user­>roles)) theme('links', $primary_links, array('class' =>  'links primary­links'))    
  21. Theme Functions http://api.drupal.org/api/group/themeable/6 theme('links',     $primary_links,     array('class' => 'links primary­links') ) See also: theme_links    
  22. Homework Part 2 (also f'reals) ● www.designtotheme.com    
  23.   Theming http://usawestwa.com/Outfit/  
  24.   Theming www.squaredanceomaha.org/dress  
  25. PHPtemplate Decide on the dance Choose your clothes Dance the dance     http://www.kodakgallery.com/Slideshow.jsp?mode=fromshare&Uc=6m9np57.9mj7q0yf&Uy=ripni&Ux=0
  26. PHPtemplate Collect the content from  Drupal using modules Run through the  Print the variables  Drupal theme  in your template  functions & your  files custom theme layer     http://www.kodakgallery.com/Slideshow.jsp?mode=fromshare&Uc=6m9np57.9mj7q0yf&Uy=ripni&Ux=0
  27. How to create themes 1.Download an existing theme. 2.Look for variables and functions. 3.Alter the placement of the “printed” things. 4.Save and upload the theme files. 5.Clear the theme registry (Drupal admin). 6.Enjoy your new theme.    
  28. page.tpl.php template file <!DOCTYPE html PUBLIC "­//W3C//DTD XHTML 1.0 Strict//EN"           "http://www.w3.org/TR/xhtml1/DTD/xhtml1­strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="<?php print  $language­>language ?>" xml:lang="<?php print $language­>language ? >">   <head>     <title><?php print $head_title ?></title>     <?php print $head ?>     <?php print $styles ?>   </head>   <body>     <div id="container">       <div id="header">         <div id="logoWrapper">           <?php if ($logo) { ?>           <div id="logo">             <a href="<?php print $base_path ?>" title="<?php print  t('Home') ?>"><img src="<?php print $logo ?>" alt="<?php print  t('Home') ?>" /></a>           </div><?php } ?>    
  29. page.tpl.php template file <!DOCTYPE html PUBLIC "­//W3C//DTD XHTML 1.0 Strict//EN"           "http://www.w3.org/TR/xhtml1/DTD/xhtml1­strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="<?php print  $language­>language ?>" xml:lang="<?php print $language­>language ? >">   <head>     <title><?php print $head_title ?></title>     <?php print $head ?>     <?php print $styles ?>   </head>   <body>     <div id="container">       <div id="header">         <div id="logoWrapper">           <?php if ($logo) { ?>           <div id="logo">             <a href="<?php print $base_path ?>" title="<?php print  t('Home') ?>"><img src="<?php print $logo ?>" alt="<?php print  t('Home') ?>" /></a>           </div><?php } ?>    
  30. Variables must be printed     <?php print                               ?>    
  31. Variables must be printed <title>   <?php print $head_title ?> </title>    
  32. Zomg where'd you find those variables? ● Look at /modules/system/page.tpl.php OR ● http://api.drupal.org/api/drupal/modules­­ system­­page.tpl.php/6    
  33. api.drupal.org is your friend. go there often.    
  34. The modules folder is also your friend.    
  35. Look with your eyes, not your editor.    
  36. tpl.php files ● Look for basic files: ●  /modules ● Download Zen. ● Download Root Candy. ● Copy tpl.php files into your theme's folder. ● Manipulate them.    
  37. Even more tpl.php files ● www.example.com/node/5 ● page­node­5.tpl.php ● page­node.tpl.php ● page.tpl.php ● http://www.informit.com/articles/article.aspx?p=1336146    
  38. Conditionals if (you're the inside couple) { go clockwise } } else { go counter clockwise. }     http://www.dehnbase.org/sd/tutorial/counter­rotate.php?p=4
  39. What's an “if”? if ($logo) {     <?php print                               ?> }    
  40. page.tpl.php template file <!DOCTYPE html PUBLIC "­//W3C//DTD XHTML 1.0 Strict//EN"           "http://www.w3.org/TR/xhtml1/DTD/xhtml1­strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="<?php print  $language­>language ?>" xml:lang="<?php print $language­>language ? >">   <head>     <title><?php print $head_title ?></title>     <?php print $head ?>     <?php print $styles ?>   </head>   <body>     <div id="container">       <div id="header">         <div id="logoWrapper">           <?php if ($logo) { ?>           <div id="logo">             <a href="<?php print $base_path ?>" title="<?php print  t('Home') ?>"><img src="<?php print $logo ?>" alt="<?php print  t('Home') ?>" /></a>           </div><?php } ?>    
  41. Fancy data structures: arrays + objects Grouping and sorting your data    
  42. Fancy data structures: arrays Multiple “drawers” of sorted content     Multiple values stored in one array
  43. Devel Module: Themer Info    
  44. $node object $node­>nid $node­>body $node­>content['body'][#value]    
  45. “Advanced” PHP ● Never be afraid to try something. ● Always back up your files first. ● Take a LOT of notes. ● Be bold! And be brave!    
  46. Lessons from Drawing Class 1. Imagine what you want. 2. Make a gesture drawing. 3. Fill out the details.    
  47. Applied to PHP 1. Imagine what you want. 2. Find the right place for it. 3. Write the comments In PHP for what you're  about to do. 4. Fill in the code for the comments.    
  48. My first Perl scripts had  comments explaining “foreach”  loops. There is no shame in this level of  commenting because I say so.    
  49. A snippet for node.tpl.php http://drupal.org/node/120855 <?php if ($submitted) { ?> <span class="submitted"> <?php  if ($node­>type == 'book') {      if ($node­>parent != 0) { print  format_date($node­>created, 'custom', "F jS, Y") ;} } ?> </span> <?php } ?>    
  50. PHP Snippet from: http://drupal.org/node/21401 <?php if ($submitted) { ?> <span class="submitted"> <?php  if ($node­>type == 'blog') {        print 'Posted ' . format_date($node­>created, 'custom',  "F jS, Y") . ' by ' . theme('username', $node);        }        else {        print 'By ' . theme('username', $node) . ' <br /> ' .  format_date($node­>created, 'custom', "F jS, Y") ;        }       ?> </span> <?php } ?>    
  51. Homework ● Read a snippet and imagine, sketch,  visualize what it does. http://drupal.org/node/45471    
  52. template.php: sup with that? ● Preparing variables that weren't assembled by  Drupal and its modules. ● Altering the contents of variables that were  prepared by Drupal and its modules. ● Special theming functions to do fun things like  'edit this block' links and random images. ● Read the Zen base theme documentation and  template.php file.    
  53. Using template.php Collect the content from  Drupal using modules  Create new  Print the variables  and run it through the  information to feed  in your template  default theme functions  to your theme files provided by Drupal.     http://www.kodakgallery.com/Slideshow.jsp?mode=fromshare&Uc=6m9np57.9mj7q0yf&Uy=ripni&Ux=0
  54.     http://www.flickr.com/photos/98274023@N00/3335326425/
  55. Tomatoes Peanut butter and Mayonnaise on brown bread. Wrapped in saran.    
  56.     http://www.flickr.com/photos/chegs/190039408/
  57. Preprocess functions: making your own (*^#Q$% lunch.    
  58. In the file template.php function bolg_preprocess_page (&$variables) {    // Add a "go home" button to page.tpl.php    if ($variables['logged_in'] == TRUE && $variables['is_front'] == FALSE) {       $image_path = $variables['directory'] . "/images/go_home.jpg";       $image_text = t("Go home!");       $image = theme('image', $image_path, $image_text, $image_text);       $variables['go_home'] = l($image, "<front>", array('html'=> TRUE));    } } // End of the preprocess_page function http://www.informit.com/articles/article.aspx?p=1336146&seqNum=2    
  59. Homework ● Download and dissect the Zen Theme ● http://drupal.org/project/zen ● Read Chapter 4 of Front End Drupal ● http://www.informit.com/articles/article.aspx?p=1336146 ● Imagine why you'd want a new template  variable. ● Create a preprocess function.    
  60. In short.....PHP theming essentials: ● PHP is a linear “programming” language, just like a  dance. ● PHP stores information in variables and actions in  functions. ● Sometimes variables hold lots of information in  special variables called “arrays” and objects. ● PHP and Drupal both have functions. ● Drupal has lots of magic variables that are loaded  with content. Check out: http://drupal.org/theme­ guide    
  61.   Theming http://usawestwa.com/Outfit/  
  62. Variables   http://www.jontwest.com/Pro­Bono.php  
  63. Regions   http://opswingers.free.fr/cestquoi.htm  
  64. Functions     http://www.dehnbase.org/sd/tutorial/counter­rotate.php?p=4
  65. Conditionals if (you're the inside couple) { go clockwise } } else { go counter clockwise. }     http://www.dehnbase.org/sd/tutorial/counter­rotate.php?p=4
  66. Snippets & Variables ● Create a library. ● Use a base theme. ● Beg, borrow, steal snippets. GPL 'em and  give 'em back to the community.    
  67. Preprocess functions     http://www.flickr.com/photos/98274023@N00/3335326425/
  68. Friends don't let friends eat  peanut butter and mayo  sandwiches. Questions? @emmajanedotnet www.designtotheme.com <­­­ homework Front End Drupal <­­­ theming book    
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×