PSD to WordPress Child Theme – Body Conceptions

PSD-to-WordPress conversion via WP Twenty Eleven child theme. (Two notes: 1) I produced about 70% of this site on The New iPad (v3). 2) This post is more for my own notes rather than a tutorial, so there may be small gaps in the knowledge.)

Client: Body Conceptions by Mahri Relin
Website design: Brad Egnor
Parent theme: WordPress Twenty Eleven, v1.4

1. Approach: Create a Twenty Eleven child theme to match design specs

– Using iPad to upload the background images to the WordPress site is a pain in the ass (requiring Textastic to FTP images and Add From Server to import to Image Library). I might provide more detail later.

2. Five full-size sliding background images on Home page and separate full-size background images on each inside page: WP Supersized plugin.

3. Resource: Creating a Simple Child Theme Using Twenty Eleven

4. Resource: Move menu bar above header in Twenty Eleven

5. Remove site description; make page’s background transparent; set page’s max-width:

#branding #site-description {
display: none;
}
#page {
background-color: transparent;
max-width: 701px;
}
#primary {
background-color: transparent;
}
#content {
background-color: transparent;
}

6. Replace the site title with a logo, while still keeping the logo clickable back to home page.

Resources:

Twenty Eleven Logo – How to add a Logo in TwentyEleven theme
WordPress : How to change blog title to image or logo?

7. Use Conditional Tags to display stacked logo only on the Home page, while displaying single-line logo on all inside pages

Resourses:

The Ultimate Guide to WordPress Conditional Tags
WordPress Codex – Conditional Tags
Introduction to WordPress conditional tags
How To: Use WordPress Conditional Tags to Hack Your Theme

6. + 7. above looks like this in header.php (starting at line 74):

<h1 id="site-title"><a title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home">
<!--?php if ( is_front_page() ) { ?-->
<img id="home_logo" alt="<?php bloginfo( 'name' ); ?>" src="<?php echo bloginfo('stylesheet_directory');?>/images/home_logo.png" width="701" height="237" />
<!--?php } else { ?-->
<img id="logo_bodyconceptions" alt="<?php bloginfo( 'name' ); ?>" src="<?php echo bloginfo('stylesheet_directory');?>/images/logo_bodyconceptions.png" width="696" height="79" />
<!--?php } ?-->
<!--?php //bloginfo( 'name' ); ?--></a></h1>

8. Since we have two different sized logos (home and inside pages), we need to accommodate keeping their respective sizes proportional. We’ll do this by adding unique IDs to the logo image code in header.php, that can be targeted via CSS:

#site-title #home_logo {
height:237px;
width:701px;
}
#site-title #logo_bodyconceptions {
height:79px;
width:696px;
}

9. Add copyright code to page.php, between the primary and content DIVs:

<div id="primary">
© <!--?php echo date("Y") ?--> body conceptions.
All rights reserved.
<div id="content" role="main">

Style copyright:

/* Copyright */
#copyright {
color: #acabab;
font-size: 10px;
letter-spacing: 0;
line-height: 1.625;
margin-bottom: 0;
position: absolute;
}

CSS positioning resources:
Learn CSS Positioning in Ten Steps

10. Let’s make sure everything in the header (logo, quote, copyright text) is restricted to the width of the logo (701px) and centered on the page:

/* Remove margin so logos are centered */
#branding hgroup {
margin: 0;
}

11. Make the page content float right and restrict it to 490px wide:

#primary {
float: right !important;
margin: 0 !important;
}
#content {
float: right !important;
margin: 0 !important;
width: 490px !important;
}

12. Contact Page: Mailing List CSS Button

.button a {
display: inline-block;
background: none;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
color: #ae59a5; /* pink text */
padding: 0;
border: 2px solid #ae59a5; /* pink border */
text-align: center;
font-size: 14px;
line-height: 37px;
font-weight: normal;
width: 127px;
height: 37px;
}
.button a:hover {
background: #ae59a5; /* pink background */
color: #333; /* dk gray text */
}

13. Add scrollbars to About and Testimonials pages. See jScrollPane jQuery scrollbars post.

14. There’s more detail that hasn’t been added yet.