How I Learned to Stop Worrying and Love the

Code

Benjamin J. Balter web

Ben.Balter.com email

Ben@Balter.com twitter

@BenBalter

In Five Minutes You Will Know

HTML & PHP

(well, just enough knowledge to be dangerous)

Browser User

HTML

CSSJavaScript

PHPVisual

Server

HTML

Tags

• HTML consists of Tags• All tags are surrounded by “<“ and “>”• e.g., <tag>• Tags come in pairs, affecting the content

between them• e.g., <tag> …. </tag>• Tags can also have attributes• e.g, <tag attribute=“value”> … </tag>

Common Tags

• Bold: <strong> … </strong>• Italic: <em> … </em>• Paragraph: <p> … </p>• Heading: <h1> … </h1>, <h2> …

</h2>• Link: <a href=“http://…”> … </a>• Image: <img src=“http://…” />• Full List: w3schools.com

<p>This is an <em>example</em> of a <a href=“http://wordpress.org”>Link to <strong>WordPress<strong></a>,and here is an image <img src=“http://

wordpress.org/logo.jpg” /></p>

New to HTML?

• Google: HTML, CSS, & js from the Ground Uphttp://code.google.com/edu/submissions/html-css-javascript/

• HTML Doghttp://htmldog.com/

• W3 Learning Wikihttp://www.w3.org/wiki/HTML/Training

• W3 Element Wikihttp://www.w3.org/wiki/HTML/Elements

In the Beginning There was…

<?php

Distinguishing PHP from HTML

PHP code is wrapped in <?php and ?> tags. Example:

<p>The current time is: <?php echo date(‘m:s’); ?

></p>

Variables

• A variable is value stored by the server• This value can be– A number– Text– Bool (true/false)– Other variables (an array)

• Variables are identified by “$”• Variables are set with “=”• e.g., $name = “Ben”;

echo $name;

If Statement

An if statement performs an action if a statement is true

if ( $color == “red” ) {echo “The ball is

red!”;}

If Statement

If statements can also perform an action if a statement is false.

if ( $color == “red” ) {echo “The ball is red!”;

} else {echo “The ball is not

red”;}

While Loop

A while loop continues to perform an action while a condition is true

While ( $count < 5 ) {echo $count;$count = $count + 1;

}

Other Loops

Forfor ( $count, $count < 5, $count++ ) {

echo $count;}

Foreachforeach ( $students as $student_name )

{echo $student_name;

}

Functions

• A function is a pre-set list of commands

• 700+ built in functions, or you can make your own

• Functions can take arguments• Always followed by parenthesis• e.g., strlen( ‘how now brown cow’ );

Functions

A function is defined…

function add( $number1, $number2 ) {

$sum = $number1 + $number2;

return $sum;}

Functions

And then called…

The sum of 1 and 1 is <?php echo add( 1, 1 ); ?>.

Final Notes on PHP

• After every command you need a semicolon– Not after If, for, while, foreach, etc.– Yes: round( $number, 2 );– No: if ( $number > 5 ) { ;

• Want to know what a function does?– http://php.net/{the name of the

function}– e.g., http://php.net/strtoupper

Putting It All Together: loop-page.php

<?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>

<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

<?php if ( is_front_page() ) { ?><h2 class="entry-title">

<?php the_title(); ?></h2>

<?php } else { ?><h1 class="entry-title">

<?php the_title(); ?></h1>

<?php } ?>

Putting It All Together (Cont.)

<div class="entry-content"><?php the_content(); ?><?php wp_link_pages( array( 'before' =>

'<div class="page-link">' . __( 'Pages:', 'twentyten' ),

'after' => '</div>' ) ); ?><?php edit_post_link( __( 'Edit', 'twentyten'

), '<span class="edit-link">', '</span>' ); ?>

</div><!-- .entry-content --></div><!-- #post-## --><?php comments_template( '', true ); ?>

<?php endwhile; // end of the loop. ?>

Tools & Resources

Tools

• Text Editor– Whatever came with your computer– Notepad++ (Windows)– TextWrangler, Coda (Mac)

• FTP Client (to connect to server)

– WinSCP, Notepad++ (Windows)– CyberDuck, Coda (Mac)

• WordPress– Define( WP_DEBUG, true); in wp-config.php– Debug bar plugin– WordPress Codex

Benjamin J. Balter web

Ben.Balter.com email

Ben@Balter.comtwitter

@BenBalter