Developer Meets Themer Talk

This site was set up for a talk at the 2008 Seattle Drupal Camp.

• Talk by: Jared Stoneberg and Jennifer Hodgdon
• Purpose: Basic PHP for Drupal themers
• Assumptions: PHPTemplate-based theme (most are); basic Drupal, CSS, HTML knowledge; content types already set up on site with CCK module

Outline

• Site background: Children's television programs site, main content type is a television program listing, with fields for title, image, producer (reference to a Producer content item), characters in the show, creator's name, etc.
• Default view of program content vs. designer's conception: For illustration purposes, we created duplicate content types for programs. Click here to view the program's default view. Click here to view the designer's conception of how the page should look. Click here to view the program's final, customized view.
• How to get from default to concept:
  1. Copy the default node.tpl.php file and give the copy the name "node-kids_tv.tpl.php" (kids_tv is the "machine-readable" name of the TV program content type). (Click here to see the original node.tpl.php file.)
  2. Use the print_r function to examine the PHP "variables" available for printing in the file. Some useful "snippets":
     • Print out a list of all the special variables available to the template:
       

       <?php
       print '<pre>';
       $tmp = get_defined_vars();
       print_r(array_keys($tmp));
       print '</pre>';
       ?>
       

     • Choose a variable you would like to see the details of, such as "node", and print it out:
       

       <?php
       print '<pre>';
       print_r($node);
       print '</pre>';
       ?>
       

  3. Use PHP if, foreach, and print statements to pick out variables and parts of variables, and send the required information to the browser.
  4. Use Drupal-specific functions like url, check_plain, check_markup, t, format_date, base_path, path_to_theme, path_to_subtheme -- documentation on these functions is available at api.drupal.org.
  5. Modify the theme's CSS file to make the page look the way you want it to look, once all the information is there in the right order.
  6. Click here to see the completed node-kids_tv.tpl.php file.