How I Learned to Stop Worrying and Love the
Code
Benjamin J. Balter web
Ben.Balter.com email
[email protected] 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
Top Related