PSD to Wordpress Series Part 2

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

Here’s what we’re going to create today! Click image to enlarge

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

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

2. Select the crop tool
crop tool

3. First thing we’re going to crop will be the header top. ( Press enter key when you feel you have the approiate 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

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

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.

  1. Post Thumnail

    2. Save as Post_thumb.jpg
    crop thumbnail

  2. Sample ad 125×125

    3. 125 ad
    Save as ad125.jpg

  3. Flickr image

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

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

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

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.

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

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.

6. Ok so we have our main_col wrap created, we can now start to add our post to our theme.

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

is our thumbnail for our post.

is what we will used to define the author and tags.

will
be used for our wordpress excerpt.

will be used to link our frontpage 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.



thumbnail




10 Wordpress Theme You Probably Won't Forget




Posted in Articles, by Marcell, on May 5th | 19 comments








vitae mattis turpis nunc sed lectus. Integer vitae massa nisi, sed adipiscing enim. Etiam semper suscipit nunc, vel condimentum elit mollis ut. Duis scelerisque lacus quis dui sodales tincidunt. Nulla consectetur imperdiet eros vitae vestibulum.


Read More

Note: Copy and paste the code above 4 times.

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

8. For the last html markup we will now add the footer

9.Here is the final HTML code.











thumbnail




10 Wordpress Theme You Probably Won't Forget




Posted in Articles, by Marcell, on May 5th | 19 comments






vitae mattis turpis nunc sed lectus. Integer vitae massa nisi, sed adipiscing enim. Etiam semper suscipit nunc, vel condimentum elit mollis ut. Duis scelerisque lacus quis dui sodales tincidunt. Nulla consectetur imperdiet eros vitae vestibulum.

Read More









thumbnail




10 Wordpress Theme You Probably Won't Forget




Posted in Articles, by Marcell, on May 5th | 19 comments






vitae mattis turpis nunc sed lectus. Integer vitae massa nisi, sed adipiscing enim. Etiam semper suscipit nunc, vel condimentum elit mollis ut. Duis scelerisque lacus quis dui sodales tincidunt. Nulla consectetur imperdiet eros vitae vestibulum.

Read More









thumbnail




10 Wordpress Theme You Probably Won't Forget




Posted in Articles, by Marcell, on May 5th | 19 comments






vitae mattis turpis nunc sed lectus. Integer vitae massa nisi, sed adipiscing enim. Etiam semper suscipit nunc, vel condimentum elit mollis ut. Duis scelerisque lacus quis dui sodales tincidunt. Nulla consectetur imperdiet eros vitae vestibulum.

Read More









thumbnail




10 Wordpress Theme You Probably Won't Forget




Posted in Articles, by Marcell, on May 5th | 19 comments






vitae mattis turpis nunc sed lectus. Integer vitae massa nisi, sed adipiscing enim. Etiam semper suscipit nunc, vel condimentum elit mollis ut. Duis scelerisque lacus quis dui sodales tincidunt. Nulla consectetur imperdiet eros vitae vestibulum.

Read More

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

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

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre,
form, fieldset, input, p, blockquote, table, th, td, embed, object {
padding: 0;
margin: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
fieldset, img, abbr {
border: 0;
}
address, caption, cite, code, dfn, em,
h1, h2, h3, h4, h5, h6, strong, th, var {
font-weight: normal;
font-style: normal;
}
ul {
list-style: none;
}
caption, th {
text-align: left;
}
h1, h2, h3, h4, h5, h6 {
font-size: 1.0em;
}
q:before, q:after {
content: '';
}
a, ins {
text-decoration: none;
}
[/sourcecode]

12. Now lets add our basic typography into our stylesheet.

[sourcecode language='css']
.clear							{ clear:both; }
a,a:hover,a:visited				{ color:#b8bab6; }
p							   { line-height:18px; }

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

body							{ background: #72434d url(images/body-bg.jpg) repeat-x ; font-family:arial; }
#Container						{ width:972px; margin:0 auto; }
#header							{ width:972px; margin:auto; }
#logo							{ width:317px; height:98px; background:url(images/logo.jpg); }
#main_col						{ width:640px; float:left; padding:15px; font-family:arial; }
#main_col p						{ font-size:12px; text-align:left; padding-bottom:2em }

14. It’s time to style the navigation.
style navigation

/*
Navigation
*/
#main_nav						{ float:left; margin:10px 0 21px 0;}
#main_nav li						{ display:inline; font-weight:bold; font-size:12px;}
#main_nav li a					{ color:#fff;}

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

/*
Post
*/
.post_break						{ float:left; margin:10px 0 10px 0; }
.post_break h2					{ color:#222226; font-family: arial; font-weight:bold; font-size:24px; }
#post_text						{ padding:40px 0; font-size:12px; font-family:arial; }
#post_info						{ background:#000; float:left; color:#fff; font-size:12px; padding:5px;  margin:5px 0 5px 0;}
#post_info p						{ padding:0;}
#post_thumb						{ float:right;}
a.post_more						{ font-size:12px; color:#fff; float:right; margin-right:20em;}

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

/*
Adverts
*/
#adverts						{ margin:0 0 0 10px;}
#adverts li						{ display:block; float:left; margin:5px 5px; }
#adverts 						{ }
#adverts						{ }
#flickr							{ margin:10px 0 0 10px;	}
#flickr li 						{ display:block; float:left; margin:5px;}

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

/*
sidebar
*/
#sidebar						{ width:290px; float:right; background:#000;  }
#sidebar  h2						{ color:#fff; font-family: arial; font-weight:bold; font-size:31px; background:#71434b; padding:5px; margin:30px 40px 0 0; }
.side_more						{ font-size:12px; color:#fff; margin:0 15px; float:right;}

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

/*
Footer
*/
#footer							{ margin: auto; background:#000; height:50px; color:#fff; text-align:center; font-size:12px; font-weight:bold; }
#footer p						{ padding:15px;}

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

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre,
form, fieldset, input, p, blockquote, table, th, td, embed, object {
padding: 0;
margin: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
fieldset, img, abbr {
border: 0;
}
address, caption, cite, code, dfn, em,
h1, h2, h3, h4, h5, h6, strong, th, var {
font-weight: normal;
font-style: normal;
}
ul {
list-style: none;
}
caption, th {
text-align: left;
}
h1, h2, h3, h4, h5, h6 {
font-size: 1.0em;
}
q:before, q:after {
content: '';
}
a, ins {
text-decoration: none;
}

/*---------------------------------------------------------------Code starts--------------------------------------------------------------------------------------*/
.clear							{ clear:both; }
a,a:hover,a:visited				{ color:#b8bab6; }
p								{ line-height:18px; }

body							{ background: #72434d url(images/body-bg.jpg) repeat-x ; font-family:arial; }
#Container						{ width:972px; margin:0 auto; }
#header							{ width:972px; margin:auto; }
#logo							{ width:317px; height:98px; background:url(images/logo.jpg);}
#main_col						{ width:640px; float:left; padding:15px; font-family:arial;}
#main_col p						{ font-size:12px; text-align:left; padding-bottom:2em}

/*
Navigation
*/
#main_nav						{ float:left; margin:10px 0 21px 0;}
#main_nav li						{ display:inline; font-weight:bold; font-size:12px;}
#main_nav li a					{ color:#fff;}

/*
Post
*/
.post_break						{ float:left; margin:10px 0 10px 0; }
.post_break h2					{ color:#222226; font-family: arial; font-weight:bold; font-size:24px; }
#post_text						{ padding:40px 0; font-size:12px; font-family:arial; }
#post_info						{ background:#000; float:left; color:#fff; font-size:12px; padding:5px;  margin:5px 0 5px 0;}
#post_info p						{ padding:0;}
#post_thumb						{ float:right;}
a.post_more						{ font-size:12px; color:#fff; float:right; margin-right:20em;}

/*
Adverts
*/
#adverts						{ margin:0 0 0 10px;}
#adverts li						{ display:block; float:left; margin:5px 5px; }
#adverts 						{ }
#adverts						{ }
#flickr							{ margin:10px 0 0 10px;	}
#flickr li 						{ display:block; float:left; margin:5px;}

/*
sidebar
*/
#sidebar						{ width:290px; float:right; background:#000;  }
#sidebar  h2						{ color:#fff; font-family: arial; font-weight:bold; font-size:31px; background:#71434b; padding:5px; margin:30px 40px 0 0; }
.side_more						{ font-size:12px; color:#fff; margin:0 15px; float:right;}

/*
Footer
*/
#footer							{ margin: auto; background:#000; height:50px; color:#fff; text-align:center; font-size:12px; font-weight:bold; }
#footer p						{ padding:15px;}

title

Tags: , , ,

Author: Marcell Purham

Hey there! My name is Marcell Purham and I am a 17 year old web developer/ designer from Chicago IL. When I'm not designing or coding things up I'm probably skateboarding, or gaming, or just being the average human. If you would like to stalk me just follow me @marcellpurham

Share

3 Responses

  1. JimmyBean says:
    October 1, 2009 at 1:11 am

    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

    Reply
  2. Rick Lamers says:
    October 6, 2009 at 3:03 pm

    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 :)

    Reply
  3. PSD to Wordpress Series Part 3: Final Tutorial | Webdevtuts says:
    November 30, 2009 at 6:20 pm

    [...] 1.Stalker Naked Wordpress theme!-By Elliot Jay STocks 2. Local Server to run wordpress xxamp 3. The html file fromPSD to wordpress part 2 [...]

    Reply

Leave a Reply

CommentLuv Enabled