Drupal Front End PHP

Drupal Front EndTips and Tricks

www.hicktech.comwww.designtotheme.com@emmajanedotnet

PHP Survival TechniquesUsing Square Dancing

as an Analogy

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 crowbarworthy 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 (coauthored by Emma Jane and Konstantin Kaefer).

Stick around, I've got copies to give away.

Drupal Theme Guidehttp://drupal.org/themeguide

Theme snippetshttp://drupal.org/node/45471

The Zen Themehttp://drupal.org/project/zen

Learning through analogies

www.travelinghoedowners.com

bootstrappingbootstrapping

http://www.jontwest.com/ProBono.php

VariablesVariables

Variables

Contents of variablesexist inside their containers

Contents of variablesexist inside their containers

http://www.laboutiquedupetitprince.com/en/figures56/pixi81/pixifigurethelittleprincesheepbox518.html

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

RegionsRegions

Regions

http://www.dehnbase.org/sd/tutorial/counterrotate.php?p=4

FunctionsFunctions

Functions

user_is_logged_in ()

Homework (f'reals)

● It's time to make your firstever function!● www.designtotheme.com

Functions with Parametersuser_access ('access administration pages')

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

theme('links', $primary_links, array('class' => 'links primarylinks'))

Theme Functionshttp://api.drupal.org/api/group/themeable/6

theme('links',

$primary_links,

array('class' => 'links primarylinks')

)

See also: theme_links

Homework Part 2 (also f'reals)

● www.designtotheme.com

ThemingTheminghttp://usawestwa.com/Outfit/

www.squaredanceomaha.org/dress

ThemingTheming

Decide on the danceChoose your clothes Dance the dance

http://www.kodakgallery.com/Slideshow.jsp?mode=fromshare&Uc=6m9np57.9mj7q0yf&Uy=ripni&Ux=0

PHPtemplatePHPtemplate

PHPtemplate

Collect the content from Drupal using modules Run through the

Drupal theme functions & your

custom theme layer

Print the variables in your template

files


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.

page.tpl.php template file<!DOCTYPE html PUBLIC "//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1strict.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 } ?>

Variables must be printed

<?php print ?>

Variables must be printed

<title>

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

Zomgwhere'd you find those variables?● Look at /modules/system/page.tpl.php

OR● http://api.drupal.org/api/drupal/modules

systempage.tpl.php/6

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.● Download Root Candy.

● Copy tpl.php files into your theme's folder.● Manipulate them.

Even more tpl.php files

● www.example.com/node/5● pagenode5.tpl.php● pagenode.tpl.php● page.tpl.php

● http://www.informit.com/articles/article.aspx?p=1336146


ConditionalsConditionalsif (you're the inside couple) {

go clockwise}

} else {go counter clockwise.

}

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/DTD/xhtml1strict.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 } ?>

Fancy data structures: arrays + objectsGrouping and sorting your data

Fancy data structures: arrays

Multiple values stored in one array

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.● Take a LOT of notes.● Be bold! And be brave!

Lessons from Drawing Class

1. Imagine what you want.2. Make a gesture drawing.

3. Fill out the details.

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.

My first Perl scripts had comments explaining “foreach” loops.There is no shame in this level of commenting because I say so.

A snippet for node.tpl.phphttp://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 } ?>

PHP Snippetfrom: 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 } ?>

Homework

● Read a snippet and imagine, sketch, visualize what it does.

http://drupal.org/node/45471

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.

Using template.php

Collect the content from Drupal using modules and run it through the

default theme functions provided by Drupal.

Create new Create new information to feed information to feed

to your themeto your theme

Print the variables in your template

files


http://www.flickr.com/photos/98274023@N00/3335326425/

TomatoesPeanut butter and

Mayonnaiseon brown bread.

Wrapped in saran.

http://www.flickr.com/photos/chegs/190039408/

Preprocess functions:making your own (*^#Q$% lunch.

In the file template.phpfunction 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

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.

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/themeguide

ThemingTheminghttp://usawestwa.com/Outfit/

http://www.jontwest.com/ProBono.php

VariablesVariables

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

RegionsRegions


FunctionsFunctions


ConditionalsConditionalsif (you're the inside couple) {

go clockwise}

} else {go counter clockwise.

}

Snippets &Snippets &VariablesVariables

● Create a library.● Use a base theme.● Beg, borrow, steal snippets. GPL 'em and

give 'em back to the community.

http://www.flickr.com/photos/98274023@N00/3335326425/

PreprocessPreprocessfunctionsfunctions

Friends don't let friends eat peanut butter and mayo sandwiches.

[email protected] < homeworkFront End Drupal < theming book

Drupal Front End PHP

Technology

Transcript of Drupal Front End PHP