WordPress Theme from Scratch- Day 2: PSD to HTML

written by aext on December 26, 2009 in WordPress with 36 comments

This tutorial is in the series of “WordPress Theme from Scratch” that help you build a WordPress theme by yourself from nothing. We already learned how to create a mock up for WordPress theme in Photoshop last week. Today, we will continue to make HTML file from that psd layout.

If You want to stay updated and get news regularly consider subscribing to AEXT.NET feed and following on Twitter.

Have you check the previous post in this series? If you haven’t, I would like to forward you a link to a PSD tutorial right here: WordPress Theme from Scratch – Day 1: PSD. After showing that post, please download it then open it via Photoshop and we can begin the tutorial for HTML from it.

From the mock up that you have just downloaded, we will create one more layout for the post page in HTML that you can see at the end of this post.

Get ready


Honestly, I love to create a basic HTML in Dreamweaver first then edit it in Coda or any text editor. However, I would use Coda for the whole tutorial to help you know clearly how our layout comes from scratch.

To begin, we will create a files structure for our project. To help us easy to control our file, the easiest way for structure is something like below:

-- FrozenFlirt
----- index.html
----- style.css
----- images

Your layout in HTML should be:

We are going to work with the first mock up which is your blog home page. At first, there are some information about this template that you should know.

  • Our template will be centered.
  • Because we are going to create a design that works for screen solution from 1024×768, the width should be 910px and we need some extra margin 20px in the left and right side.
  • I’m not sure if it supports for all major web browsers, but I will try my best

Prepare the HTML file


From the root folder of our project, create index.html file that contains this basic code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type"content="text/html; charset=UTF-8" />
    <title>FrozenFlirt WordPress Theme From Scratch</title>
    <link href="style.css"rel="stylesheet"type="text/css" />

</head>

<body>

    <div id="main-wrapper">

        <div class="container">

            <div id="header">

                <ul id="topmenu">
                    Menu items
                </ul>

                <div id="topsearch">
                    Search Panel
                </div>

                <div id="logo">
                    Logo
                </div>

            </div>

            <div id="main-content">

                Your content goes here

            </div>

            <div id="sidebar">

                Sidebar content goes here

            </div>

            <div id="flickr-stream">

                Flickr Stream

            </div>      

            <div id="twitter-update">

                Twitter

            </div>                      

        </div>

    </div>

    <div id="footer-wrapper">

        <div class="container">

            Footer content goes here

        </div>

    </div>

</body>
</html>

All of DIV element inside the segments (…-wrapper) will be fixed in width. However, before we go to CSS part, let reset our layout style first. Download the css reset right here and include it in our HTML file:

<head>
    <meta http-equiv="Content-Type"content="text/html; charset=UTF-8" />
    <title>FrozenFlirt WordPress Theme From Scratch</title>
    <link href="reset.css"rel="stylesheet"type="text/css" />
    <link href="style.css"rel="stylesheet"type="text/css" />

</head>

We try to add some CSS code for the segments and the body, by the way, center the DIV with class name container:

body {
    font: 14px/21px Helvetica, Arial, sans-serif;
    font-weight: normal;
    color: #333333;
    background-color:#cacaca;
}

#main-wrapper {

}

#footer-wrapper {

}

.container {
    width:950px;
    margin:0 auto;
}

Now, look at our page after reset css style and add some css code

Adding Background


And now, it’s time for us to add some backgrounds for our layout. First, we will add the main background. Because our background goes with noise effect, we cannot slide the image as small as 1px or 2px you usually did with solid background. Come back to our psd file and slide a background for it.

To slide out an image for background, you have to deselect the eye icon in the layers panel, that means you make other layers invisible except the background. Select an square by using Rectangular Marquee Tool with the size about 200px x 200px or larger like this:

We do the same as above for the header-wrapper, and this is how I did:

Referring to the layout that we made in Photoshop, we have a little light on top to make the background more attractive. Ok, show up your Guides by using CTRL + ; (Command + ; on Mac) and crop your main header background:

Change something in your css code to add background:

body {
    font: 14px/21px Helvetica, Arial, sans-serif;
    font-weight: normal;
    color: #333333;
    background:#cacaca url(images/bg.png);
}

#main-wrapper {
    background: url(images/topmenu-bg.png) repeat-x;

}

#footer-wrapper {

}

.container {
    width:910px;
    padding: 0 20px;
    margin:0 auto;
}

#main-wrapper .container {
    background: url(images/mainheader-bg.png) no-repeat;

}

Also add some text to your main content to make our current draft layout higher, and here is what we got:

Header


We are going to add some items to our header menu first, then create a search panel with awesome transparent effect. Prepare the menu with some items by using un-order list:

                <ul id="topmenu">
                    <li>
                        <a href="#"title="Home Page"><span>Home</span></a>
                    </li>
                    <li>
                        <a href="#"title="Tutorial Category"><span>Tutorial</span></a>
                    </li>
                    <li>
                        <a href="#"title="Freebie Category"><span>Freebie</span></a>
                    </li>
                    <li>
                        <a href="#"title="Inspiration Category"><span>Inspiration</span></a>
                    </li>
                    <li>
                        <a href="#"title="Resources Category"><span>Resources</span></a>
                    </li>
                </ul>

This screenshot is captured before using css:

Add these CSS code to style our header menu:

#header {
    padding-top: 10px;
}

#header ul#topmenu {
    margin-top: 5px;
}

#header ul#topmenu li {
    display: inline;
    line-height: 28px;
    margin-right: 15px;
}

#header ul#topmenu li a {
    color: #6f6f6f;
    font-size: 10px;
    font-weight: bold;
    text-transform: uppercase;
    text-decoration: none;
}

#header ul#topmenu li a:hover {
    color: #000000;
}

If you are using the psd file downloaded from previous post, you will understand why we have some margin and padding space here by show Guides in Photoshop.

I wrap menu item by a span tag because I want to make a rounded border for menu items when mouse is over. I will use 2 images for each menu, and this is the best way to cross browsers for rounded corners.

In Photoshop, crop the rounded border image into 2 images. By the way, we also need a background for search panel. Create new PNG file with some images inside for css sprites.

And now, make our menu more beautiful:

/*------ TOP MENU ------ */

#header ul#topmenu {
    margin-top: 5px;
}

#header ul#topmenu li {
    display: inline;
    float: left;
    margin-right: 10px;
}

#header ul#topmenu li a {
    display: block;
    color: #6f6f6f;
    font-size: 10px;
    font-weight: bold;
    text-transform: uppercase;
    text-decoration: none;
    padding:0 6px 0 0;
}

#header ul#topmenu li a:hover {
    color: #000000;
    background:transparent url(images/sprites.png) no-repeat right -34px;
}

#header ul#topmenu li a span {
    display: block;
    line-height: 28px;
    padding:0px 0px 0px 6px;
}

#header ul#topmenu li a:hover span {
    background:transparent url(images/sprites.png) no-repeat left -2px;
}

For the search panel, insert these HTML code into your html file:

<div id="topsearch">
  <form action="http://aext.net/"id="searchform"method="get">
    <fieldset>
        <input type="text"                 onblur="if (this.value == '') {this.value = 'Type Keywords And Hit Enter...';}"                 onfocus="if(this.value == 'Type Keywords And Hit Enter...') {this.value = '';}"                 value="Type Keywords And Hit Enter..."                 class="searchfield"id="searchbox"name="s"/>
    </fieldset>
  </form>
</div>

And CSS for it:

/*------ TOP SEARCH ------ */

#header #topsearch {
    float: right;
}

#header #topsearch fieldset {
    height: 28px;
    width: 247px;
    background:transparent url(images/sprites.png) no-repeat left -69px;
}

#header #topsearch fieldset .searchfield {
    background-color: transparent;
    -x-system-font:none;
    text-transform: uppercase;
    border: none;
    color:#6f6f6f;
    font-family:Arial,Helvetica,sans-serif;
    margin: 3px 0 0 3px;
    padding:5px;
    width:200px;
}

When you are styling the searchfiled, you may get problem with placing the textfiled perfectly with the background behind it. That will be easy if you set border for your TextField first, then you can see clearly its position. When you think it’s ok, just set border for it to none, example:

I don’t use the button for submit the form because who still want to click on that such submit button instead of enter in this century 21?

With logo, in Photoshop, select the selection of this logo layer, then navigate to Image > Crop. Remember to hide the background and you will get the logo with transparent background.

Now, insert HTML code for your logo. However, don’t forget to put the a div with clear class to make sure there is no floating elements allowed on the left or the right side of your logo. That means your logo part will go down, it will not float on the header menu or search panel.

.clear {
    clear: both;
}

[smartads]

Insert it right after the end of header menu:

<div id="topsearch">

    .............

</div>

<div class="clear"></div>

<div id="logo">
    <a href="#"title="FrozenFlirt Homepage"><h1>FrozenFlirt Theme</h1></a>
    <h3>"Wordpress Theme From Scratch"</h3>
</div>

<div class="clear"></div>

And css for it:

/*------- TOP LOGO -------*/

#header #logo {
    float: left;
    margin: 20px 0px;
}

#header #logo h1 {
    background: transparent url(images/logo.png) no-repeat;
    text-indent: -9999px;
    width: 253px;
    height: 39px;
}

#header #logo h3 {
    margin-top: 5px;
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 18px;
    font-style: italic;
    font-weight: normal;
}

Your header without clear one would be:

It would be better if using clear class:

Main Content


In Photoshop, hold CTRL then select the gradient background on the top of main content to make a selection. Crop it, hide background behind and you will have the gradient background with transparent. Although you will see your selection is just a small selection, the image will be larger when you crop.

The following code is for the content:

<div id="main-content">
 <div class="container">

     <div class="post exerpt clearfix">
         <a href="#">
             <img alt="ahh ahh ahh"src="images/post-image-1.png"width="200"height="200"class="thumbnail" />
         </a>

         <h2><a href="#"rel="nofollow">Fronze Flirt Theme</a></h2>                
         <small>Written by <a href="#"title="Lam Nguyen">Lam Nguyen</a> on <strong>Dec 11th</strong> in <a href="#"title="Tutorial Category">Tutorials</a></small>

         <div class="summary">

            <p>Lorem ipsum dolor sit amet, this is bold text consectetur adipiscing elit. This font is in italic cras lacinia pellentesque elit nec sodales. Etiam vehicula egestas interdum. Nulla facilisi. In at lectus odio, quis iaculis dui. </p>
            <p><a rel="nofollow"title="Read more this post"href="#">Continue Reading &raquo;</a></p>

         </div>
     </div>    

 </div>
</div>

CSS for it:

/*------ MAIN CONTENT -------*/
#main-content {
    width: 574px;
    background-color: #FFFFFF;
    border: solid 1px #bbbbbb;
    padding: 1px;
    float: left;
}

#main-content .container {
    width: auto;
    padding: 20px;
    background: url(images/gradient.png) repeat-x;
    border: none;
}

.post {
    display: block;
    position: relative;
    font-size: 100%;
    border-bottom:1px solid #DFDDD5;
    margin-bottom:25px;
    padding-bottom:5px;
}

.post .thumbnail {
    float:left;
    margin-right:15px;
    margin-bottom:15px;
    width:200px;
    height:200px;
}

.post h2 {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 2em;
    letter-spacing:-0.04em;
    line-height: 1.05em;
    padding-bottom: 5px;
}

.post h2 a {
    color: #000000;
    text-decoration: none;
}

.post h2 a:hover {
    text-decoration: underline;
}

.post small {
    background-color:#B50505;
    padding:3px;
    padding-left:8px;
    padding-right:8px;
    color:#fffffe;
    font-size:0.85em;
}

.post small a {
    color:#fffffe;
    text-decoration:none;
}
.post small a:hover {
    text-decoration:underline;
    color:#fffffe;
}
.post .summary {
    display:block;
    font-style: italic;
    margin-top:20px;
    float:left;
    width:300px;
}

.post p {
    padding-bottom:2em;
}

Duplicate this post for many times, you will have a list of posts in homepage or categories posts listing.

You should use WP-Pagenavi plugin for pagination because it is a popular pagination plugin for WordPress. Please write your HTML code as that plugin will generate. In the HTML file, use these code for pagination:

                <div class="wp-pagenavi">
                    <span class="pages">Page 1 of 8</span>
                    <span class="current">1</span>
                    <a title="2"class="page"href="http://aext.net/page/2/">2</a>
                    <a title="3"class="page"href="http://aext.net/page/3/">3</a>
                    <a href="http://aext.net/page/2/">&raquo;</a>
                    <span class="extend">...</span>
                    <a title="Last &raquo;"class="last"href="http://aext.net/page/8/">Last &raquo;</a>
                </div>

The pagination temporary looks like this:

Copy css file of WP-Pagenavi plugin and replace it with:

/* +----------------------------------------------------------------+ |                                                                | |   WordPress 2.5 Plugin: WP-PageNavi 2.31                       | |   Copyright (c) 2008 Lester "GaMerZ" Chan                      | |                                                                | |   File Written By:                                             | |   - Lester "GaMerZ" Chan                                       | |   - http://lesterchan.net                                      | |                                                                | |   File Information:                                            | |   - Page Navigation CSS Style                                  | |   - wp-content/plugins/wp-pagenavi/pagenavi-css.css            | |                                                                | +----------------------------------------------------------------+ */

.wp-pagenavi {
    text-align: right;
    font-size: 14px;
}

.wp-pagenavi a, .wp-pagenavi a:link {
    display: inline;
    line-height: 80%;
    text-align: center;
    margin: 2px;
    text-decoration: none;
    color:#333333;
    background-color: #cacaca;
    padding: 3px 8px;
}
.wp-pagenavi a:visited {
}
.wp-pagenavi a:hover {
    background-color: #B40000;
    color:#FFFFFF;
}
.wp-pagenavi a:active {
    color:#FFFFFF;
}
.wp-pagenavi span.pages {
    min-width: 14px;
    line-height: 80%;
    text-align: center;
    padding: 8px 6px 8px 0px !important;
    text-decoration: none;
    float: left;
}
.wp-pagenavi span.current {
    display: inline-block;
    text-align: center;
    margin: 2px;
    text-decoration: none;
    color:#fff;
    background-color: #B40000;
    margin-left:3px;
    padding: 3px 8px;
}
.wp-pagenavi span.extend {
    display: inline-block;
    line-height: 22px;
    min-width: 18px;
    padding: 0px 3px 0px 3px;
    text-align: center;
    margin: 2px;
    text-decoration: none;
    color:#333333;
}

Here is your result:

Sidebar


For the popular posts widget, I suggest you using WordPress Popular Posts Plugin. The default code that plugin will generate is:

                <div class="widget"id="popular-posts">
                    <h3>Popular Posts</h3>
                    <ul>
                    <!-- WordPress Popular Posts Plugin v1.5.0 -->
                        <li><a title="blablabla"href="#"><span class="wpp-post-title">5 New Useful jQuery Plugins For Your Next Projects</span></a> </li>
                        <li><a title="blablabla"href="#"><span class="wpp-post-title">35 Fresh and Cool Web Design Interfaces for Inspiration</span></a> </li>
                        <li><a title="blablabla"href="#"><span class="wpp-post-title">Bubble Effect with CSS</span></a> </li>
                        <li><a title="blablabla"href="#"><span class="wpp-post-title">CSS Absolute Positioning: Create A Fancy Link Block</span></a> </li>
                        <li><a title="blablabla"href="#"><span class="wpp-post-title">Incredible Drop Down Menu Solution With CSS Only</span></a> </li>
                    </ul>
                    <!-- End WordPress Popular Posts Plugin v1.5.0 -->
                </div>

Because we need to build a sidebar with widget ready, so it depends on what widgets you will use. CSS code for the whole sidebar I’m using is simple as:

/*------SIDEBAR-------*/

#sidebar {
    float: right;
    width: 314px;
}

#sidebar .widget {
    margin-bottom: 25px;
}

#sidebar .widget h3 {
    font-family: "Myriad Pro", Helvetica, Arial;
    font-size: 2.5em;
    letter-spacing:-0.04em;
    line-height: 1.05em;
    padding-bottom: 5px;
    color: #000;
    text-shadow:1px 1px 1px #FFFFFF;
}

#sidebar #adblocks {
    text-align: center;
}

#sidebar #adblocks img {
    border:5px solid #DFDFDF;
    margin:0 5px 5px;
}

#sidebar .widget ul li {
    font-size: 100%;
    margin-bottom: 5px;
}

#sidebar .widget ul li a {
    background: url(images/606060.gif) no-repeat left 3px;
    padding-left: 20px;
    color: #606060;
    text-decoration: none;
}

#sidebar .widget ul li a:hover {
    background: url(images/B40000.gif) no-repeat left 3px;
    color: #B40000;
}

Some others footer stuffs


In this theme, I’m using Flickr Stream and Twitter Update. Someone love to use plugins to fetch data from their Flickr and Twitter account but I like to use javascript to handle it.

            <div id="flickr-stream">

                <h3>Flickr Stream</h3>
                <hr />
                <div class="clear"></div>
                <div id="flickr">
                    <noscript>Your message for people w/o javascript enabled goes here.</noscript>
                </div>

            </div>      

            <div id="twitter-update">
                <h3>Twitter Update</h3>
                <hr />
                <div class="clear"></div>
                <div id="twitter">
                    <ul id='twitter_update_list'></ul>
                </div>
                <a href="http://twitter.com/prlamnguyen"title="Follow me on twitter"><span id="followme">Follow Me!</span></a>

            </div>

Add 2 lines of html code here at the end of your HTML file before closing body tag to display twitter update. Change it to your twitter username and the number of tweet you wanna display:

    <script type="text/javascript"src="http://twitter.com/javascripts/blogger.js"></script>
    <script type="text/javascript"src="http://twitter.com/statuses/user_timeline/prlamnguyen.json?callback=twitterCallback2&count=2"></script>

Javascript to display Flickr stream:

<script type="text/javascript">

function flickr(id){

    $("<div>").attr("id", "photos").prependTo("#flickr");

    var url = 'http://api.flickr.com/services/feeds/photos_public.gne?id='+ id +'&format=json&jsoncallback=?';

    $.getJSON( url , function(data){

        $.each(data.items, function(i,item){

            var mImg = item.media.m,
                sImg = (item.media.m).replace("_m.jpg", "_s.jpg");

            $("<img/>")
                .attr("src", sImg)
                .attr("id", "thumb")
                .appendTo("#photos")
                .wrap('<a href="' + item.link + '" title="' + item.title + '" target="_blank" ></a>');

            if( i >= 9 ) return false;

        });

    });
}

$(document).ready(function() {

    var id = '35591378@N03';
    flickr(id);

});

</script>

Remember to implement jQuery framework to your theme.

Conclusion


We have just walked throught the tutorial explains how to convert PSD layout to HTML. This is just for your blog homepage. However, other pages on your blog will change only the content part, from this layout, I can create a layout for display articles: