As designers and developers, it’s not uncommon to build a website based on a static website design mockup such as a Photoshop PSD. So, how do we go from a static mockup to a fully functional WordPress theme? How do we deconstruct a static website design and convert it into something that lives and breathes on the web? In this session we’ll take a look at how to convert a static design into a WordPress theme and some of the things to consider when doing so. Presented at WordCamp Lehigh Valley, July 2016.

1. PSD to WordPress Theme
Lauren Pittenger
@laurenpittenger
1

2. 2

3. Why work
this way?
3

4. Strategy
14

5. Efficiency
25

6. Intentionality
16

7. Design
7

8. Development
8

9. 9

10. Underscores
10

11. Starter theme
1,000-hour head start
Well-commented
Handy template tags
HTML5
JavaScript mobile menu
CSS or Sass
Why Underscores?
11

12. Other Starter Themes
Make your own!
Bones
Foundation
Genesis
12

13. Download from
Unzip file & place in
wp-content/themes/my-theme
Activate it at
Appearance > Themes
underscores.me
Starting with
Underscores
13

14. All Done! Yay!
14

15. Visit Site
15

16. Functionality
16

17. Logo
Menu
Slider
Widgets
Custom Fields
Customizer
Planning
WordPress
Integration
17

18. What is our goal?
What does the client need?
Who are our users?
18

19. Use a named layer group
to organize elements
PSD Layers Groups
19

20. Layout
20

21. Layout Tools
Bootstrap
Susy
Bourbon Neat
Worth having a chat about!
21

22. View > Show > Guides
Use a Grid
22

23. PS Ruler Tool
Measure all the things
from column widths to
padding widths and
beyond
23

24. Measuring Layout
24

25. Measuring Layout
25

26. Header
.site-header {
max-width: 1170px;
margin: 0 auto;
}
26

27. 27

28. Automated
Columns
Margins
Gutters
GuideGuide
PS Plugin
guideguide.me
28

29. Images
29

30. Sizes
Custom WP image sizes
Images
Considerations
// in functions.php
if ( function_exists( 'add_image_size' ) ) {
add_image_size( 'portfolio-thumb', 375, 375, true );
}
Codex: add_image_size()
30

31. Placing vs. Embedding
Embedding an image
into a PSD makes PSD
more transportable
Placing an image allows
us to easily save it out
from within Photoshop
Images
Considerations
31

32. Typography
32

33. Font Family
Font Sizes
Line Height
Paragraph Styles
Fonts Panel
33

34. Enqueue Google Fonts
Add font styles
Font Styles
34

35. 35

36. // in functions.php
function psd_to_wp_theme_scripts() {
// other code here - removed for brevity
wp_enqueue_script( 'psd-to-wp-theme-roboto', '//fonts.googleapis.com/css?family=Roboto:400,700,300' );
}
add_action( 'wp_enqueue_scripts', 'psd_to_wp_theme_scripts' );
Enqueue Roboto Google Font
/* in style.css
.main-navigation ul {
font-family: "Roboto";
font-weight: 700; /* "Bold" in Photoshop */
font-size: 16px;
}
Use it in CSS!
36

37. 37

38. Colors
38

39. Finding the Color
39

40. Handy way to save
color palette
Easily copy them to
SASS variables
Beware using
eyedropper tool on
transparent colors
Color Swatches
40

41. Other Cool Tools
41

42. Take any website and turn
it into a layered PSD file
Page Layers App
www.pagelayers.com
42

43. Photoshop plugin which
instantly turns layer styles
to CSS3!
CSS HAT
madebysource.com
43

44. Finishing Touches
44

45. themes/mytheme/screenshot.png​
1200x900px
Theme Screenshot
45

46. Resources
Design
Adobe Photoshop
Page Layers
Aspect Ratio Calculator
Development
WordPress Codex
CSS Hat
Underscores
Bones
Foundation
Genesis
SASS
Susy
Bourbon Neat
Bootstrap
Theme + PSD
github.com/lepittenger/
psd-to-wp-theme​
46

47. Thank you!
Questions?
Lauren Pittenger
laurenpittenger.com
@laurenpittenger
47