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