blog work services seo quotes flickr contact

Converting a Design to a WordPress Website

There doesn’t appear to be too many psd to HTML tutorials on the net, so I thought I’d write one. Given the popularity of the WordPress blogging software, I’ll code the design up for WordPress rather than a static HTML site.  To reiterate, this is about taking a design (in whatever format), slicing it up in Photoshop, or similar (Gimp), then applying the CSS to the HTML. WordPress features intuitive markup, so I’ll base the HTML around theirs.

The slicing of the design will be dealt with first, followed by a look at the HTML, then proceeded by the all important CSS. To begin with, let’s look at the design in the slicing environment.

1-overview

This is the psd of a recently completed website opened up and ready to slice in Photoshop. It’s a clean, uncomplicated design, so should be ideal for a tutorial. For demonstration purposes, I’m using the ‘crop’ tool instead of slicing tool, and saving each piece as a jpg in turn. There’s not a particular preference for image formt, so use what you wish; jpgs load up quicky, that’s all. Right, let the cutting begin.

background-slice

A slice is taken from the top of the psd going through the white space to just below the thick green line. It will be repeated across the <body> of the document, covering the width of the screen. Next, the little house with the lightbulb is cut out.

cutting-out-the-little-hous

The house is cut out from the top to just beneath the green like. It will later be layered over repeated background strip. Now for the logo and introductory text.

cutting-out-the-logo

cutting-out-logo

A similar effect for the text could have been gained using sIFR, but on this occassion opted for a CSS text replacement technique. After cutting out the navigation buttons – both the blue and ‘hover effect’ orange – and other bits and pieces, the last substantial piece of cutting is the Twitter section.

cutting-out-twitter

That’s all the cutting; let’s run through the pieces.

  • Background strip
  • Logo
  • Introductory text
  • House with lightbulb
  • Navigation buttons
  • Twitter section
  • Twitter button
  • Contact and Twitter headings

The HTML

Assuming you’ve installed a copy of WordPress, let’s navigate to the default theme to inspect the markup – ‘wp-content’, ‘themes’, ‘default’ directory. Open the index.php to view the following:

<?php
/**
* @package WordPress
* @subpackage Default_Theme
*/
get_header(); ?>
<div id="content" role="main">
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<div <?php post_class() ?> id="post-<?php the_ID(); ?>">
<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
<small><?php the_time('F jS, Y') ?> <!-- by <?php the_author() ?> --></small>
<div>
<?php the_content('Read the rest of this entry &raquo;'); ?>
</div>
<p><?php the_tags('Tags: ', ', ', '<br />'); ?> Posted in <?php the_category(', ') ?> | <?php edit_post_link('Edit', '', ' | '); ?>  <?php comments_popup_link('No Comments &#187;', '1 Comment &#187;', '% Comments &#187;'); ?></p>
</div>
<?php endwhile; ?>
<div>
<div><?php next_posts_link('&laquo; Older Entries') ?></div>
<div><?php previous_posts_link('Newer Entries &raquo;') ?></div>
</div>
<?php else : ?>
<h2>Not Found</h2>
<p>Sorry, but you are looking for something that isn't here.</p>
<?php get_search_form(); ?>
<?php endif; ?>
</div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

The WordPress loop, in bold, doesn’t have any bearing on this tutorial, so we can ignore it. get_header() renders the header part of the HTML, while get_sidebar() and get_footer() render the sidebar and footer, respectively. I’ve gone through the index.php file to avoid confusion; what I’d like to do is go through the rendered HTML as that’s what we’re going to style. Here’s the rendered HTML of index.php without the PHP ‘loop’ (I’ve deleted a few unordered lists fro the sidebar as they’re not relevant):

<body>
<div id="page">
<div id="header" role="banner">
<div id="headerimg"><h1><a href="Blog name"</a></h1>
<div><?php bloginfo('description'); ?></div>
</div>
</div>
<hr />
<div id="content" role="main">
</div>
<div id="sidebar" role="complementary">
<ul role="navigation">
<li><h2>Archives</h2></ul></li>
<ul><li><h2>Meta</h2></li></ul>
</div>
<hr />
<div id="footer" role="contentinfo">
</div>
</div>
</body>

Minus a few unordered listed from the sidebar, the above is more or less the standard HTML from the default theme. The site we’re working on in this tutorial is customised, so has slightly different HTML, but importantly, a similar structure. Here’s the HTML from DRC Electrical:

<body>
<div id="page">
<div id="header">
<h1><a href="http://drcelectrical.co.uk/" onfocus="if (this.blur)this.blur();"><span>DRC Electrical Services</span></a></h1>
<ul id="nav">
<li><a href="http://drcelectrical.co.uk/" onfocus="if (this.blur)this.blur();">Home</a></li>
<li><a href="/services/" onfocus="if (this.blur)this.blur();">Services</a></li>
<li><a href="/testimonials/" onfocus="if (this.blur)this.blur();">testimonials</a></li>
<li><a href="/blog/" onfocus="if (this.blur)this.blur();">blog</a></li>
<li><a href="/contact/" onfocus="if (this.blur)this.blur();">contact</a></li>
</ul>
<div><span>Hello, we are a company offering electrical services</span></div>
<div></div>
</div><!--end of header-->
<div id="content">
<div id="sidebar">
<div>
<div>
<h1><span>Contact DRC Electrical</span></h1>
<p>We always like to talk to people.
Just drop us an email or call us.</p>
<div>020 8287 7907</div>
<p>Mobile:</p>
<div>07985 279916</div>
<p>Email:</p>
<div>info@drcelectrical.co.uk</div>
</div>
<div>
<h1><span>Twitter</span></h1>
<div>
Going to elex expo at sandown should be good <a href="http://twitter.com/DRC_Electrical/statuses/6218208623" class="twitter-link">Go</a> <span class="twitter-timestamp"><abbr title="2009/12/01 00:24:04">2009/12/01</abbr></span>
</div> <!--end of twitter-message-->
<a href="http://twitter.com/DRC_Electrical/"></a>
</div><!--end of Twitter-div-->
<ul><li>
</ul>
</div><!--end of sidebar-content-->
</div><!--end of sidebar-->
<div id="content-left"><!--post/content goes in here-->
<div id="post-3">
<h2>DRC Electrical….</h2>
<div>
<p>provide electrical services to the London and Surrey areas. Fully qualified, and with years of experience on hand, our typical jobs range from electrical testing to full rewires. Emergency callouts, or jobs booked well in advance, we cover them all.</p>
<p>Our work is balanced between domestic and corporate customers alike. Onsite commercial electrical work is an area we’re very familiar with. From quotation to completion, we handle everything including sourcing products to disposal.</p>
<p>If you’re after a competitive rate from an company that’ll provide peace of mind, please don’t hesitate to get in touch. For emails, we aim to respond within 12-hours, while for enquiries that need immediate attention, please telephone.</p>
</div>
</div><!--end of post-->
</div><!--end of content-left-->
</div><!--end of content-->
<div id="footer">
<div><a href="http://www.zorinweb.com" target='blank' title="Website by Zw">Site by Zw</a></div>
<div>&copy; 2009 DRC Electrical</div>
</div><!--end of footer-->
</div>
</body>

That’s the generated HTML from the home page which I’ve commented as best as possible. The structure’s very similar to the default theme; we still have the ‘page’ DIV, ‘header’, ‘content’, ‘sidebar’ and ‘footer’. Assuming you’ve cut out the images, place them in an appropriate folder, and set up the development environment (if you use one), and let’s begin the styling.

The CSS

First, the body:

body {
margin: 0;
padding: 0;
font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
font-size: 13px;
color: #fff;
height: 100%;
background: #1479c7 url(images/background-repeat.jpg) repeat-x;
}

Importantly here, we’ve taken our initial bit of slicing, ‘background-repeat.jpg’, and repeated it across the body’s x axis, and set the background to #1479c7. That’s the top of the sorted out, margin and padding zeroed in, etc.. As for the structure:

#page {
width: 810px;
margin: 0 auto;
}

The outer DIV, page, is set to 810px wide and placed in the centre.

#header {
width: 810px;
height: 380px;
position: relative;
}

With the header’s styling in place, we can now plonk the logo, navigation and introductory sentence in.

#header h1 {
margin:0px;
font-weight:bold;
}
#header h1 a {
height:100px;
width:350px;
background: url(images/logo.jpg) no-repeat 0px 10px;
float:left;
margin:20px 0 0 0;
}
#header h1 a span {
display: none;
}

Adhering to best practices and accessibility, the logo’s attached to a link within an H1 one heading. The actual HTML for DRC Electrical is inserted between span tags set to ‘display: none’. Here’s the navigation’s CSS:

#nav {
width: 800px;
position: relative;
padding: 3px;
margin: 0 0 0 7px;
height: 30px;
float: left;
font-weight: bold;
font-family: Georgia, "Times New Roman", Times, serif;
}
#nav li {
width: 120px;
float: left;
list-style: none;
}
#nav a {
height: 26px;
color: #FFF;
display: block;
text-decoration: none;
text-align: center;
background: url(images/nav-button.jpg) no-repeat;
padding: 4px 0 0 0;
}
#nav a:hover {
background: url(images/nav-button-hover.jpg) no-repeat;
}

‘#nav’ sets the container’s dimensions, ‘#nav li’ sorts out the individual elements, while ‘#nav a’ style’s out the actual links assigning the background of each to ‘images/nav-button.jpg’, the blue button cut out earlier on. Lastly for the navigation, ‘#nav a:hover’ gives a nice little hover effect with the orange button, ‘nav-button-hover.jpg’.

The introductory sentence is encased within ‘hello’ DIV.

.hello {
background: url(images/intro-text.jpg) no-repeat;
float: left;
height: 140px;
margin: 30px 0 0;
width: 470px;
}
.hello span {
display: none;
}

Again, the background’s set to images/intro-text.jpg, with a span styled to display none for the HTML to make it accessible. Closing out the header section, a DIV with a class of ‘lamp’. The following should be self explanatory:

.lamp {
float: right;
height: 200px;
margin: 16px 70px 0 0;
width: 230px;
background: url(images/lightbulb4.jpg) no-repeat;
}

Moving onto the ‘content’ portion:

#content {
width: 810px;
float :left;
}
#content-left {
width: 530px;
min-height: 650px;
position: relative;
float: left;
}

‘content-left’ is simply floated to the left to make way for the sidebar which appears before ‘content-left’ in the markup. Here’s the sidebar and it’s paragraph element:

#sidebar {
margin: 0 0 0 6px;
min-height: 600px;
width: 258px;
float: right;
display: table;
}
#sidebar p {
margin:4px 0;
color:#B8B291;
width:220px;
}

Incidentally display is set to ‘table’; I’ll explain about that in another tutorial. The next DIV in the sidebar is ‘side-content’.

.side-content {
float: left;
width: 258px;
padding: 0;
min-height: 500px;
}

The first piece of content in the sidebar deals with contact details, which is inserted in:

.contact {
border-bottom: 1px #7ab3df solid;
}

This gives us a nice border at the bottom.

h1.contact-sidebar  {
width: 226px;
height: 38px;
background: url(images/sidebar-contact.jpg) no-repeat -6px 0;
margin: 0;
}
h1.contact-sidebar span {
display: none;
}

The above styling’s for the ‘contact’ heading. sidebar-contact.jpg is cut out of the psd and assigned to an H1 heading with a class of .contact-sidebar. The same applies to the Twitter heading.

h1.twitter-sidebar  {
width: 226px;
height:38px;
background: url(images/sidebar-twitter.jpg) no-repeat -6px 0;
margin:0;
}
h1.twitter-sidebar span {
display:none;
}

Finishing off the sidebar is Twitter feed box and the corresponding ‘follow me’ button:

.twitter-div {
background:transparent url(images/twitter-box.jpg) no-repeat -10px 55px;
border-bottom:1px solid #7ab3df;
height:205px;
padding:10px 0;
}
.twitter-message {
color:#B8B291;
margin:18px 0 0 8px;
padding:0;
width:240px;
height:82px;
}
.followme {
background:url(images/follow-me-button.jpg) no-repeat;
display:block;
margin-top:25px;
height:30px;
width:145px;
}

The .twitter-div has it’s background set to  url(images/twitter-box.jpg) no-repeat -10px 55px; this is the Twitter box cut out earlier on. The ‘twitter-message’ fits in the box and styles the input, while ‘follow me’ button has it’s background set appropriately.

That takes care of all the images; here’s the rest of the CSS to go with the remaining markup:

#footer {
float:left;
height:39px;
padding:40px 0 0;
width: 810px;
color:#7ab3df;
}

Hope you enjoyed the tutorial.

Tags: , , ,

You can follow any responses to this entry through the RSS 2.0 feed.

«
»

5 Responses to “Converting a Design to a WordPress Website”

  1. Redman says:
    January 3, 2010 at 3:41 am

    I just wanted to leave a quick comment to thank you for your post! I really like your blog site!!! Would you mind terribly if I put up a backlink from my site to your site? Keep up the great work!

  2. Social Media Optimization says:
    January 3, 2010 at 8:59 am

    Hi,

    Very Nice post, I found this news feed from my Technorati upcomming News feed section, it’s really fantastic post and usefull all of us.

    Keep it up.

    Jennifer

  3. Jane says:
    January 5, 2010 at 9:28 am

    Hi,
    Very nice information. Thanks for this.
    Regards,
    Jane

  4. Magen Kerens says:
    January 14, 2010 at 9:24 pm

    Hello and thanks for a enlightening article. I thank you what you talked about.

  5. Wordpress Theme Designed in Photoshop - tony @ home & work says:
    April 9, 2010 at 7:52 pm

    [...] Converting a Design to a WordPress Website – starts off by seeming to change the template files, but ends up creating  HTML and CSS documents only. [...]

Leave a Reply

CAPTCHA Image
*