Drupal Front End Tips and Tricks

Drupal Front End
Tips and Tricks

www.hicktech.com
www.designtotheme.com

@emmajanedotnet

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, 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 Guide
http://drupal.org/themeguide

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

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

Variables

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

Contents of variables
exist inside their containers

Contents of variables
exist inside their containers

http://www.laboutiquedupetitprince.com/en/figures56/pixi81/pixifigurethelittle

princesheepbox518.html

Regions

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

Functions

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

Functions

user_is_logged_in ()

Homework (f'reals)
●
It's time to make your firstever function!
●

Functions with Parameters
user_access ('access administration pages')

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

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

Theme Functions
http://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)
●

Theming
http://usawestwa.com/Outfit/

Theming
www.squaredanceomaha.org/dress

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

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


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>

Zomg
where'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

Conditionals
if (you're the inside couple) {
go clockwise
}

} else {
go counter clockwise.
}

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

What's an “if”?
if ($logo) {
<?php print ?>
}

Fancy data structures: arrays + objects
Grouping and sorting your data

Fancy data structures: arrays

Multiple “drawers” of sorted content

Multiple values stored in one array

$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.php

<?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 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 } ?>

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

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 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.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 ($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/theme
guide

Snippets &
Variables
●
Create a library.
●
Use a base theme.
●
Beg, borrow, steal snippets. GPL 'em and
give 'em back to the community.

Preprocess
functions

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

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

Questions?
@emmajanedotnet
www.designtotheme.com < homework
Front End Drupal < theming book

Drupal Front End Tips and Tricks

Recommended

Recommended

More Related Content

What's hot

What's hot (19)

Similar to Drupal Front End Tips and Tricks

Similar to Drupal Front End Tips and Tricks (20)

More from Emma Jane Hogbin Westby

More from Emma Jane Hogbin Westby (20)

Recently uploaded

Recently uploaded (20)

Drupal Front End Tips and Tricks