PSD to WordPress (WordCamp LA)

PSD to WordPress
Turning Any Design into a Custom WordPressTheme
By Kristin Falkner
@KristinCodesWP

Misconception: Designs must look a certain way to work with WordPress

Where to Begin
Themes geared towards heavy customization (ex: Starkers)
Parent/child themes (Genesis, Hybrid, etc.)
Theme Frameworks (Thesis, Headway, etc.)
Start from scratch (not as daunting as it sounds)

Disadvantages:
Requires Greater Skill
Possibly slower (only at first)
Advantages:
Flexibility
Familiarity
Limits unnecessary code
Theming from ScratchIt’s mine! All mine!

HTML/CSS knowledge
PHP Skills (or willingness to /understanding that you will break things while learning)
Understanding of the WordPress template hierarchy
Understanding of how WordPress queries content
Skills Necessary for Custom Theming

What My Themes Start With
Archive.php
Page.php
Page-custom.php
Single.php
Search.php
Searchform.php
404.php
Style.css
Index.php
Header.php
Footer.php
Sidebar.php
Comments.php
Functions.php

Not that different
Extracting layout images = the same
Structure HTML & CSS = the same
Content areas = not the same
PSD to HTML vs.PSD to WordPress

PSD Breakdown
Let’s find the critical pieces.

Step One:
Identify the Header and Footer content
TIP: The header and footer consist of the universal elements
that are along the top and bottom of the website.

Step Two: Analyze the content
What content, if any, makes sense for posts?
Blog entries (obviously)
News items
Videos
Products
Testimonials (orderby=rand is nice for rotation)
Recipes
TIP: The template hierarchy for posts should be considered
and utilized to prevent the creation of special page templates
that you didn’t really need.

Each video can be a post (single.php)
Each section of videos can function as a post category (category.php)

Step Two (cont.): Analyze the content
How many page templates will the site need?
contact.php
home-template.php

Step Three:
Let the coding begin!

If you were given a design and you were coding in standard HTML, each page’s code would likely be done in one file.
In WordPress, that code has to be broken up into pieces that work together to create each page, much
like a puzzle.

Two Main Options Available To You:
Code PSD in HTML and then break it apart for WordPress
Code PSD directly into the appropriate theme files

PSD to HTMLPrepping for WP

CODE FOR HEADER


CODE FOR CONTENT


CODE FOR FOOTER

Don’t forget!
<?phpwp_head(); ?>
Before closing </head> tag
<?phpwp_footer(); ?>
Before closing </body> tag

Focus On This
Familiarizing yourself with the WordPress Template Hierarchy
Creating a theme template
How to do a custom WordPress loop
Custom Post Types/Custom Fields
PHP If/Else statements
WordPress conditional tags

WordPress Template Hierarchy
http://codex.wordpress.org/Template_Hierarchy
Prevents unnecessary work by utilizing inherent theme structure
Category-{ID} before category before archive
Single-{post-type} before single
Functions can influence hierarchy

<?php
/*
Template Name: Name of Page Template
*/
?>
<?phpget_header(); ?>
<!– WHAT THIS PAGE DISPLAYS -->
<?phpget_footer(); ?>
Creating a Page Template

<?php $my_query = "cat=21&showposts=1&orderby=rand"; $my_query = new WP_Query($my_query); ?>
<?php if ($my_query->have_posts()) : while ($my_query->have_posts()) : $my_query->the_post(); ?>
DO THIS STUFF TO THE RANDOM POST
<?phpendwhile; // end of one post ?>
<?phpendif; //end of loop ?>
Custom WordPress Loop

<?php $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
query_posts('cat=60&order=desc&posts_per_page=10&paged='.$paged); ?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
DO STUFF FOR EACH POST BEING QUERIED
<?phpendwhile; ?>
NAVIGATION LINKS
<?phpendif; ?>
Custom WordPress Loop(Paged)

<?phpquery_posts('pagename=Press Release Archives'); ?>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
DISPLAY THIS STUFF FROM THIS PAGE
<?phpendwhile; // end of one post ?>
<?phpendif; //end of loop ?>
<?phpwp_reset_query(); ?>
Custom Page Loop

Custom Post TypesPlug-ins
Custom Post Type UI
CMS Press
Magic Fields (Custom Post Type Alt.)

PHP IF/ELSE Statements
<?php if ( evaluation ) : ?>
DO THIS STUFF
<?php else: ?>
DO THIS STUFF
<?phpendif; ?>
<?php if ( evaluation ) { ?>
DO THIS STUFF
<?php } else { ?>
DO THIS STUFF
<?php }; ?>

WordPress Conditional Tags
http://codex.wordpress.org/Conditional_Tags

PHP IF Statement + WP Conditional = BFF
Plenty of things to take advantage of:
Display photo based on post category with if in_category(catID#) (ex: in_category(3))
Display CSS class for highlighting active page: <?php if (is_page('Title')) { echo "active_page"; }?>

Google is your friend.

“Get in over your head as often and as joyfully as possible.”
-Alexander Isley

WordPress Template Hierarchy
http://codex.wordpress.org/Template_Hierarchy
WordPress Theme Development
http://codex.wordpress.org/Theme_Development
How to Be a RockStarWordPress Designer
http://rockablepress.com/books/rockstar-wordpress-designer/
WordPress.org Forums
http://wordpress.org/support/
WPQuestions
http://www.wpquestions.com
Coda (not WP-related but amazing)
http://www.panic.com/coda/

http://2011.la.wordcamp.org	855
http://live.wordcamp.la	116
http://www.kristinfalkner.com	71
http://www.cantus.us	11
http://cantus.us	11
http://paper.li	9
http://twitter.com	3
http://feeds.feedburner.com	2
https://twitter.com	1
http://feeds2.feedburner.com	1
http://a0.twimg.com	1
http://translate.googleusercontent.com	1

PSD to WordPress (WordCamp LA)

by KristinCodesWP on Sep 09, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

12 Embeds 1,082

Statistics

PSD to WordPress (WordCamp LA) — Presentation Transcript