psd to wordpress (wordcamp la)

PSD to

WordPress

Turning Any Design into a

Custom WordPress Theme

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)

Theming from Scratch

It’s mine! All mine!

Advantages:

• Flexibility

• Familiarity

• Limits unnecessary code

Disadvantages:

• Requires Greater Skill

• Possibly slower (only at first)

Skills Necessary for

Custom Theming

• 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

What My Themes

Start With

• Style.css

• Index.php

• Header.php

• Footer.php

• Sidebar.php

• Comments.php

• Functions.php

• Archive.php

• Page.php

• Page-custom.php

• Single.php

• Search.php

• Searchform.php

• 404.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 elementsthat 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 consideredand utilized to prevent the creation of special page templatesthat 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 contentHow many page templates will the site need?

home-template.php

contact.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.

1)Code PSD in HTML and then break it apart for WordPress

2)Code PSD directly into the appropriate theme files

Two Main Options Available To You:

PSD to HTML

Prepping for WP

<!-- HEADER -->

CODE FOR HEADER

<!-- END HEADER -->

<!-- CONTENT -->

CODE FOR CONTENT

<!-- END CONTENT -->

<!-- FOOTER -->

CODE FOR FOOTER

<!-- END FOOTER -->

Don’t forget!

<?php wp_head(); ?>

Before closing </head> tag

<?php wp_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

Creating a Page Template

<?php/*Template Name: Name of Page Template*/?>

<?php get_header(); ?>

<!– WHAT THIS PAGE DISPLAYS -->

<?php get_footer(); ?>

Custom WordPress Loop

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

<?php endwhile; // end of one post ?><?php endif; //end of loop ?>

Custom WordPress Loop

(Paged)

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

<?php endwhile; ?>

NAVIGATION LINKS

<?php endif; ?>

Custom Page Loop

<?php query_posts('pagename=Press Release Archives'); ?><?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

DISPLAY THIS STUFF FROM THIS PAGE

<?php endwhile; // end of one post ?><?php endif; //end of loop ?><?php wp_reset_query(); ?>

Custom Post Types

Plug-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

<?php endif; ?>

<?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 Hierarchyhttp://codex.wordpress.org/Template_Hierarchy

WordPress Theme Developmenthttp://codex.wordpress.org/Theme_Development

How to Be a RockStar WordPress Designerhttp://rockablepress.com/books/rockstar-wordpress-designer/

WordPress.org Forumshttp://wordpress.org/support/

WPQuestionshttp://www.wpquestions.com

Coda (not WP-related but amazing)http://www.panic.com/coda/