PSD to WordPress Series Part 2

I know there are many developers and normal people who want to know how to design a wordpress theme from scratch. Well today is your lucky day. In this series, PSD to WordPress we will design a Mockup in Photoshop, then code it for wordpress. If everyone likes this tutorial then we will also do a theme option for it. So let’s get this thing started.

Welcome to part 2 of PSD to WordPress Series. In this part of the tutorial we’re going to slice and code our theme for valid Xhtml/css.

Note: I do not slice my layouts because I end up having so many unused images so in this tutorial we’re going to crop everything. Also When you have a cropped image I will not go over how to save.

Step 1

Open Photoshop (Continue where we left of from previous tutorial)

Step 2

Select the crop tool
crop tool

Step 3

First thing we’re going to crop will be the header top. ( Press enter key when you feel you have the appropriate crop. ) Save as body-bg.jpg

crop header top

after crop

Note: After you crop an image go to File>>Revert or press F12 to go back to last save point

Step 4

Now we will crop our logo. ( save as logo.jpg )
crop logo

Step 5

To speed things up so we can get to coding this thing, I will go over the next 3 objects we will need to crop.

Post Thumbnail: Save as Post_thumb.jpg
crop thumbnail

Sample ad 125×125: Save as ad125.jpg
125 ad

Flickr image: Save as flk_samp.jpg
flickr thumb

Now that we’ve finished cropping the images that well need for our layout, we can get to coding it.( Woooooooooooooo! )

Note: Before we begin this tutorial Make sure you create a new folder so you can store files.

Step 1

Open dreamweaver ( Other text editors are fine! ) File>>New>>HTML>none
open dreamweaver

Step 2

We will first begin by creating our header section. Go ahead and copy & paste it . I will explain it below.

Step 3

For the navigation I used an unordered list with links inside. Also we will take care of the logo and clear class when we begin styling our theme.

Note: If you’re not familiar with that it is basically a push down for our theme. For example if you do not clear the floats the theme and everything will be completely disorder.

Step 4

Now we will begin adding the content. First we will create the page wrap to contain all of our content.

Step 5

Now we will create our main column which will hold all of our post, thumbnails and etc. The code below will go inside of the container tags.

Step 6

Ok so we have our main_col wrap created, we can now start to add our post to our theme. div class=”post_break” holds our posts information. When working with divs id can not be repeated so we used a class so that we can repeat it and have valid code.

div id=”post_thumb” is our thumbnail for our

div id=”post_info” is what we will used to define the author and tags.

div id=”post_text” will be used for our wordpress excerpt.
div id=”post_more” will be used to link our front page to the actual post. The will keep everything from overlapping and pushed the divs down. Now it’s time to Add the code below inside of the main_col div.

Note: Copy and paste the code above 4 times.

Step 7

Now it’s time to create our sidebar. For the sidebar I used an unordered list for advertising since most people want to run ads on their blog. Copy & paste the code below inside of the main_col div.

Step 8

For the last html markup we will now add the footer

Step 9

Here is the final HTML code.

Step 10

Now it’s time to style our HTML. We will begin by linking our stylesheet with our HTML document. Place the following code in the head section of the HTML.
stylesheet

Step 11

First let’s add our css reset into the top part of our stylesheet.

Step 12

Now lets add our basic typography into our stylesheet.

Step 13

Ok we will now style our main divs.
style main div tags

Step 14

It’s time to style the navigation.
style navigation

Step 15

Post_break>The code below will style our post.
style post area

Step 16

adverts This will style the code thumbnails in our sidebar
style thumbnails in sidebar

Step 17

sidebar This will style out sidebar and sidebar headings
style side heading

Step 18

footer The final code below will style our wonderful, but simple footer.
footer

Here is the final css code! Hope this tutorial helps. Please leave comments giving feedback

Joe Granados the author

Joe Granados is the owner of WebDevTuts. He is also a web designer & developer who loves to design and develop websites. If you're looking for him you can find him via @webdevtuts
  1. JimmyBean says:

    I don’t know If I said it already but …Hey good stuff…keep up the good work! 🙂 I read a lot of blogs on a daily basis and for the most part, people lack substance but, I just wanted to make a quick comment to say I’m glad I found your blog. Thanks,)

    A definite great read..Jim Bean

  2. Rick Lamers says:

    Im trying to develop my webdesign company with making all future sites in WordPress. I followed a look-a-like tutorial once but this one is definately better! It`s really good. I would suggest you keep doing what you do, because what ever you do the magic is happening 🙂

Leave a Reply