psd to wordpress (wordcamp la)
DESCRIPTION
Presentation by Kristin Falkner at WordCamp LA's Theme Workshop (2TRANSCRIPT
![Page 1: PSD to WordPress (WordCamp LA)](https://reader036.vdocuments.site/reader036/viewer/2022062319/555868d8d8b42aaa7e8b4a2c/html5/thumbnails/1.jpg)
PSD to
WordPress
Turning Any Design into a
Custom WordPress Theme
By Kristin Falkner
@KristinCodesWP
![Page 2: PSD to WordPress (WordCamp LA)](https://reader036.vdocuments.site/reader036/viewer/2022062319/555868d8d8b42aaa7e8b4a2c/html5/thumbnails/2.jpg)
Misconception: Designs must
look a certain way to work with
WordPress
![Page 3: PSD to WordPress (WordCamp LA)](https://reader036.vdocuments.site/reader036/viewer/2022062319/555868d8d8b42aaa7e8b4a2c/html5/thumbnails/3.jpg)
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)
![Page 4: PSD to WordPress (WordCamp LA)](https://reader036.vdocuments.site/reader036/viewer/2022062319/555868d8d8b42aaa7e8b4a2c/html5/thumbnails/4.jpg)
![Page 5: PSD to WordPress (WordCamp LA)](https://reader036.vdocuments.site/reader036/viewer/2022062319/555868d8d8b42aaa7e8b4a2c/html5/thumbnails/5.jpg)
Theming from Scratch
It’s mine! All mine!
Advantages:
• Flexibility
• Familiarity
• Limits unnecessary code
Disadvantages:
• Requires Greater Skill
• Possibly slower (only at first)
![Page 6: PSD to WordPress (WordCamp LA)](https://reader036.vdocuments.site/reader036/viewer/2022062319/555868d8d8b42aaa7e8b4a2c/html5/thumbnails/6.jpg)
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
![Page 7: PSD to WordPress (WordCamp LA)](https://reader036.vdocuments.site/reader036/viewer/2022062319/555868d8d8b42aaa7e8b4a2c/html5/thumbnails/7.jpg)
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
![Page 8: PSD to WordPress (WordCamp LA)](https://reader036.vdocuments.site/reader036/viewer/2022062319/555868d8d8b42aaa7e8b4a2c/html5/thumbnails/8.jpg)
• 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
![Page 9: PSD to WordPress (WordCamp LA)](https://reader036.vdocuments.site/reader036/viewer/2022062319/555868d8d8b42aaa7e8b4a2c/html5/thumbnails/9.jpg)
PSD
Breakdown
Let’s find the critical pieces.
![Page 10: PSD to WordPress (WordCamp LA)](https://reader036.vdocuments.site/reader036/viewer/2022062319/555868d8d8b42aaa7e8b4a2c/html5/thumbnails/10.jpg)
![Page 11: PSD to WordPress (WordCamp LA)](https://reader036.vdocuments.site/reader036/viewer/2022062319/555868d8d8b42aaa7e8b4a2c/html5/thumbnails/11.jpg)
![Page 12: PSD to WordPress (WordCamp LA)](https://reader036.vdocuments.site/reader036/viewer/2022062319/555868d8d8b42aaa7e8b4a2c/html5/thumbnails/12.jpg)
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.
![Page 13: PSD to WordPress (WordCamp LA)](https://reader036.vdocuments.site/reader036/viewer/2022062319/555868d8d8b42aaa7e8b4a2c/html5/thumbnails/13.jpg)
![Page 14: PSD to WordPress (WordCamp LA)](https://reader036.vdocuments.site/reader036/viewer/2022062319/555868d8d8b42aaa7e8b4a2c/html5/thumbnails/14.jpg)
![Page 15: PSD to WordPress (WordCamp LA)](https://reader036.vdocuments.site/reader036/viewer/2022062319/555868d8d8b42aaa7e8b4a2c/html5/thumbnails/15.jpg)
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.
![Page 16: PSD to WordPress (WordCamp LA)](https://reader036.vdocuments.site/reader036/viewer/2022062319/555868d8d8b42aaa7e8b4a2c/html5/thumbnails/16.jpg)
Each video can be a post (single.php)
Each section of videos can function as a post category (category.php)
![Page 17: PSD to WordPress (WordCamp LA)](https://reader036.vdocuments.site/reader036/viewer/2022062319/555868d8d8b42aaa7e8b4a2c/html5/thumbnails/17.jpg)
Step Two (cont.): Analyze the contentHow many page templates will the site need?
home-template.php
contact.php
![Page 18: PSD to WordPress (WordCamp LA)](https://reader036.vdocuments.site/reader036/viewer/2022062319/555868d8d8b42aaa7e8b4a2c/html5/thumbnails/18.jpg)
Step Three: Let the coding begin!
![Page 19: PSD to WordPress (WordCamp LA)](https://reader036.vdocuments.site/reader036/viewer/2022062319/555868d8d8b42aaa7e8b4a2c/html5/thumbnails/19.jpg)
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.
![Page 20: PSD to WordPress (WordCamp LA)](https://reader036.vdocuments.site/reader036/viewer/2022062319/555868d8d8b42aaa7e8b4a2c/html5/thumbnails/20.jpg)
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:
![Page 21: PSD to WordPress (WordCamp LA)](https://reader036.vdocuments.site/reader036/viewer/2022062319/555868d8d8b42aaa7e8b4a2c/html5/thumbnails/21.jpg)
PSD to HTML
Prepping for WP
<!-- HEADER -->
CODE FOR HEADER
<!-- END HEADER -->
<!-- CONTENT -->
CODE FOR CONTENT
<!-- END CONTENT -->
<!-- FOOTER -->
CODE FOR FOOTER
<!-- END FOOTER -->
![Page 22: PSD to WordPress (WordCamp LA)](https://reader036.vdocuments.site/reader036/viewer/2022062319/555868d8d8b42aaa7e8b4a2c/html5/thumbnails/22.jpg)
Don’t forget!
<?php wp_head(); ?>
Before closing </head> tag
<?php wp_footer(); ?>
Before closing </body> tag
![Page 23: PSD to WordPress (WordCamp LA)](https://reader036.vdocuments.site/reader036/viewer/2022062319/555868d8d8b42aaa7e8b4a2c/html5/thumbnails/23.jpg)
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
![Page 24: PSD to WordPress (WordCamp LA)](https://reader036.vdocuments.site/reader036/viewer/2022062319/555868d8d8b42aaa7e8b4a2c/html5/thumbnails/24.jpg)
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
![Page 25: PSD to WordPress (WordCamp LA)](https://reader036.vdocuments.site/reader036/viewer/2022062319/555868d8d8b42aaa7e8b4a2c/html5/thumbnails/25.jpg)
Creating a Page Template
<?php/*Template Name: Name of Page Template*/?>
<?php get_header(); ?>
<!– WHAT THIS PAGE DISPLAYS -->
<?php get_footer(); ?>
![Page 26: PSD to WordPress (WordCamp LA)](https://reader036.vdocuments.site/reader036/viewer/2022062319/555868d8d8b42aaa7e8b4a2c/html5/thumbnails/26.jpg)
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 ?>
![Page 27: PSD to WordPress (WordCamp LA)](https://reader036.vdocuments.site/reader036/viewer/2022062319/555868d8d8b42aaa7e8b4a2c/html5/thumbnails/27.jpg)
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; ?>
![Page 28: PSD to WordPress (WordCamp LA)](https://reader036.vdocuments.site/reader036/viewer/2022062319/555868d8d8b42aaa7e8b4a2c/html5/thumbnails/28.jpg)
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(); ?>
![Page 29: PSD to WordPress (WordCamp LA)](https://reader036.vdocuments.site/reader036/viewer/2022062319/555868d8d8b42aaa7e8b4a2c/html5/thumbnails/29.jpg)
Custom Post Types
Plug-ins
Custom Post Type UI
CMS Press
Magic Fields (Custom Post Type Alt.)
![Page 30: PSD to WordPress (WordCamp LA)](https://reader036.vdocuments.site/reader036/viewer/2022062319/555868d8d8b42aaa7e8b4a2c/html5/thumbnails/30.jpg)
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 }; ?>
![Page 31: PSD to WordPress (WordCamp LA)](https://reader036.vdocuments.site/reader036/viewer/2022062319/555868d8d8b42aaa7e8b4a2c/html5/thumbnails/31.jpg)
WordPress
Conditional Tags
http://codex.wordpress.org/Conditional_Tags
![Page 32: PSD to WordPress (WordCamp LA)](https://reader036.vdocuments.site/reader036/viewer/2022062319/555868d8d8b42aaa7e8b4a2c/html5/thumbnails/32.jpg)
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"; }?>
![Page 33: PSD to WordPress (WordCamp LA)](https://reader036.vdocuments.site/reader036/viewer/2022062319/555868d8d8b42aaa7e8b4a2c/html5/thumbnails/33.jpg)
Google is your friend.
![Page 34: PSD to WordPress (WordCamp LA)](https://reader036.vdocuments.site/reader036/viewer/2022062319/555868d8d8b42aaa7e8b4a2c/html5/thumbnails/34.jpg)
“Get in over your head as often and as joyfully as possible.”
-Alexander Isley
![Page 35: PSD to WordPress (WordCamp LA)](https://reader036.vdocuments.site/reader036/viewer/2022062319/555868d8d8b42aaa7e8b4a2c/html5/thumbnails/35.jpg)
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/