Your SlideShare is downloading. ×
0
PSD to WordPress (WordCamp LA)
PSD to WordPress (WordCamp LA)
PSD to WordPress (WordCamp LA)
PSD to WordPress (WordCamp LA)
PSD to WordPress (WordCamp LA)
PSD to WordPress (WordCamp LA)
PSD to WordPress (WordCamp LA)
PSD to WordPress (WordCamp LA)
PSD to WordPress (WordCamp LA)
PSD to WordPress (WordCamp LA)
PSD to WordPress (WordCamp LA)
PSD to WordPress (WordCamp LA)
PSD to WordPress (WordCamp LA)
PSD to WordPress (WordCamp LA)
PSD to WordPress (WordCamp LA)
PSD to WordPress (WordCamp LA)
PSD to WordPress (WordCamp LA)
PSD to WordPress (WordCamp LA)
PSD to WordPress (WordCamp LA)
PSD to WordPress (WordCamp LA)
PSD to WordPress (WordCamp LA)
PSD to WordPress (WordCamp LA)
PSD to WordPress (WordCamp LA)
PSD to WordPress (WordCamp LA)
PSD to WordPress (WordCamp LA)
PSD to WordPress (WordCamp LA)
PSD to WordPress (WordCamp LA)
PSD to WordPress (WordCamp LA)
PSD to WordPress (WordCamp LA)
PSD to WordPress (WordCamp LA)
PSD to WordPress (WordCamp LA)
PSD to WordPress (WordCamp LA)
PSD to WordPress (WordCamp LA)
PSD to WordPress (WordCamp LA)
PSD to WordPress (WordCamp LA)
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

PSD to WordPress (WordCamp LA)

5,970

Published on

Presentation by Kristin Falkner at WordCamp LA's Theme Workshop (2

Presentation by Kristin Falkner at WordCamp LA's Theme Workshop (2

Published in: Technology, Business
0 Comments
7 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
5,970
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
88
Comments
0
Likes
7
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. PSD to WordPress
    Turning Any Design into a Custom WordPressTheme
    By Kristin Falkner
    @KristinCodesWP
  • 2. Misconception: Designs must look a certain way to work with WordPress
  • 3. Where to Begin
    • Themes geared towards heavy customization (ex: Starkers)
    • 4. Parent/child themes (Genesis, Hybrid, etc.)
    • 5. Theme Frameworks (Thesis, Headway, etc.)
    • 6. Start from scratch (not as daunting as it sounds)
  • 7. Disadvantages:
    • Requires Greater Skill
    • 8. Possibly slower (only at first)
    Advantages:
    • Flexibility
    • 9. Familiarity
    • 10. Limits unnecessary code
    Theming from ScratchIt’s mine! All mine!
  • 11.
    • HTML/CSS knowledge
    • 12. PHP Skills (or willingness to /understanding that you will break things while learning)
    • 13. Understanding of the WordPress template hierarchy
    • 14. Understanding of how WordPress queries content
    Skills Necessary for Custom Theming
  • 15. What My Themes Start With
    • Not that different
    • 29. Extracting layout images = the same
    • 30. Structure HTML & CSS = the same
    • 31. Content areas = not the same
    PSD to HTML vs.PSD to WordPress
  • 32. PSD Breakdown
    Let’s find the critical pieces.
  • 33.
  • 34.
  • 35. 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.
  • 36.
  • 37.
  • 38. Step Two: Analyze the content
    What content, if any, makes sense for posts?
    • Blog entries (obviously)
    • 39. News items
    • 40. Videos
    • 41. Products
    • 42. Testimonials (orderby=rand is nice for rotation)
    • 43. 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.
  • 44. Each video can be a post (single.php)
    Each section of videos can function as a post category (category.php)
  • 45. Step Two (cont.): Analyze the content
    How many page templates will the site need?
    contact.php
    home-template.php
  • 46. Step Three:
    Let the coding begin!
  • 47. 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.
  • 48. 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
  • 49. PSD to HTMLPrepping for WP
    <!-- HEADER -->
    CODE FOR HEADER
    <!-- END HEADER -->
    <!-- CONTENT -->
    CODE FOR CONTENT
    <!-- END CONTENT -->
    <!-- FOOTER -->
    CODE FOR FOOTER
    <!-- END FOOTER -->
  • 50. Don’t forget!
    <?phpwp_head(); ?>
    Before closing </head> tag
    <?phpwp_footer(); ?>
    Before closing </body> tag
  • 51. Focus On This
    • Familiarizing yourself with the WordPress Template Hierarchy
    • 52. Creating a theme template
    • 53. How to do a custom WordPress loop
    • 54. Custom Post Types/Custom Fields
    • 55. PHP If/Else statements
    • 56. WordPress conditional tags
  • WordPress Template Hierarchy
    http://codex.wordpress.org/Template_Hierarchy
    • Prevents unnecessary work by utilizing inherent theme structure
    • 57. Category-{ID} before category before archive
    • 58. Single-{post-type} before single
    • 59. Functions can influence hierarchy
  • <?php
    /*
    Template Name: Name of Page Template
    */
    ?>
    <?phpget_header(); ?>
    <!– WHAT THIS PAGE DISPLAYS -->
    <?phpget_footer(); ?>
    Creating a Page Template
  • 60. <?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
  • 61. <?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)
  • 62. <?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
  • 63. Custom Post TypesPlug-ins
    Custom Post Type UI
    CMS Press
    Magic Fields (Custom Post Type Alt.)
  • 64. 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 }; ?>
  • 65. WordPress Conditional Tags
    http://codex.wordpress.org/Conditional_Tags
  • 66. 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))
    • 67. Display CSS class for highlighting active page: <?php if (is_page('Title')) { echo "active_page"; }?>
  • Google is your friend.
  • 68. “Get in over your head as often and as joyfully as possible.”
    -Alexander Isley
  • 69. 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/

×