PSD To CSS To WP

MAKING THE PSD FILE
Good evening welcome to the first part of my PSD to wordpress tutorial. In these series of
tutorials we'll be creating a wordpress theme called "mywordpress" the first part of the tutorial will
be mocking up the layout in photoshop. Part two will involve converting the PSD file into a
working CSS website, then the third part will be converting the CSS template over to wordpress.
Each part will be released within a week of each other and the good thing is you can download
the PSD, CSS template and wordpress theme ALL for free. Right lets get cracking with part #1,
open up photoshop and create a new document 900x1150 pixels select the colors #e5e5e3 and
#FFFFFF, set #e5e5e3 as your forground color then drag a linear gradient over your canvas.
Select the rectangular marquee tool and create a rectangle at the top of your canvas.
Add these layer styles to your top bar.

Your top bar should now be identical to mine, using the rectangular marquee tool again create a
bigger rectangle underneath your top bar.
Add this layer style to your bigger rectangle.

Add to the top bar some items you'd want in your wordpress theme, then add your website title
and slogan, swap the colors on your website title so you have a nice white and then a blue, the
color code for the blue is #309dcf.
Next were going to mimic our search field for the header, select the rectangle marquee tool and
create a rectangle for our search field, fill the rectangle with the color #494949 then add a 1 pixel
stroke using the color #666666. Do the same for the "go" button, just make the rectangle square.
With the rectangular marquee tool once more create another rectangle the width of your canvas
underneath your header.
Add these layer styles to your navigation rectangle.

Directly underneath your navigation bar add a 1 pixel white line, spanning the width of the
canvas.
Add some dummy navigation text onto your navigation bar, inbetween each link add a small
divider. The small divider is made up of two 1pixel lines next to each other, then a layer mask is
applied. Using a reflected gradient start from the middle of the divider and drag upwards to the
top of the divider. Make sure your forground color is set to white and background is set to black.
Now were going to create a dummy post, select the rectangular marquee tool and create a
rectangle exactly 600 pixels wide. You can create exact sizes by changing the settings of the
rectangular marquee tool to "fixed size" you can then enter the values in the width and height
fields. If you want to be exact to mine the height of my rectangle is 223pixels.
Fill your rectangle with any color than add these layer styles.
You should have a nice box like this.
Inside your small content box, which will represent out post on wordpress, add your thumbnail
image, example post title, post content and some meta data. Then duplicate the box and there
contents about 3 times moving them down equally as you go along.
Next create your sidebar using the same layer styles as your post boxes. Only this time stretch
the sidebar box all the way down to the bottom of your last post. Then fill your sidebar with some
example content like ads, titles and text. Just to get a feel for the sidebar would be like. This will
help us visualize what the theme should look like. Although you dont need to be precise on
postioning etc... as this will come later when were coding it into CSS.
Finally lets create our footer, duplicate your top bar and header. Move the duplicated top bar and
header down to the bottom of your canvas.
On your top bar in the footer add your website title and slogan, then in the black area add your
copyright text. Thats it all done, heres our finished peice.
The layout doesnt look like much at the moment but once coded into CSS it will look good. Just to
give you a taster on what it will look like "CLICK HERE". We'll be coding the PSD into a CSS
template in part2 next week. Dont forget to subscribe via RSS & twitter. See you next time in "part
#2".
CONVERTING THE PSD TO A CSS TEMPLATE

Hello welcome to part #2 of the "mywordpress" tutorial, today were going to be converting our
PSD file into a working CSS template ready for when we convert it over to wordpress.
You can download the CSS template for FREE by using the button above. Right lets get started,
create a folder on your desktop called "mywordpress" inside this folder create another folder
called "images". Open up a blank notepad document then goto "file > save as" then save the
blank file as "style.css" inside the "mywordpress" folder. Open up dreamweaver and start a new
HTML document.
Once the new blank HTML document has loaded goto "file > save as" then save it as "index.html"
into your "mywordpress" folder on your desktop. Select the code view tab to view the code to the
index.html file.
Inside the "code view" edit the TITLE TAG to display what ever you want in your title bar of the
browser. "MYWORDPRESS - fancy wordpress slogan here - Welcome...".
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>MYWORDPRESS - fancy wordpress slogan here - Welcome...</title>
</head>
<body>
</body>
</html>
On the far right side of the dreamweaver window there should be a big box in which you can slide
in and out.
If you cant see it, click the little black arrow. If you find there are loads of boxes open just collapse
them the only window we need is the CSS window. In the CSS window we can attach our style
sheet by clicking the little chain button. OR if you prefer type it out by hand.
Once you've clicked the chain button, you'll be presented with a box like this.
Just click browse and select your .CSS file in your "mywordpress" folder. Then click ok. You'll
notice once you click ok the style sheet is attached and the code is automatically written for you.

<head>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
</body>
</html>
You can also add and edit any styles linked to your HTML document in the CSS window.
Although i prefer to write out my CSS then edit or tweak in the CSS window just for quickness.
When you start to write your CSS styles they will be automatically added into the CSS window,
all's you need to do is just double click what ever style you want to edit then a box will pop up with
loads of wonderfull options. Right lets start mocking up our DIV's in our HTML document, we'll
start with the top half first. Were going to need a container DIV, a DIV for the topbar, header and
navigation. The code looks like this.

<head>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="top-bar">

</div>
<div id="header">

</div>
<div id="navigation">

</div>
</div>
</body>
</html>
Notice all my DIV's are commented, i cant stress enough how important it is that you should
comment code, it will save bags of time when finding you DIV's later on as things can get quite
messy. Another thing i tend to do is always TAB in DIV's that are inside other DIV's, it just keeps
things nice and neat. Right open up your style sheet inside dreamweaver, the first items we need
to style is the body of our document.
/* MAIN BODY STYLES */
*{
padding:0;
margin:0;
}
body {
background-image: url(images/bg.png);
background-repeat: repeat-x;
background-color: #f6f7f1;
font-family: Verdana, Arial, "Century Gothic";
font-size: 12px;
color: #878787;
}
Let me explain a little bit about the code above, firstly we dont want any of our document to have
any padding or margin, setting the margins and padding to 0 will make the document sit flush at
the top, sides and bottom of the browser. In the body style we have a background image which
we'll be creating in a moment, the background repeats along the x axis (horizontal). Then we
have our document background color which is the color of the last pixel on the background
image, then we have our font family, font size and default font color. Lets create our background
image. Duplicate your PSD file (a backup is always good) open up your backup PSD file in
photoshop, goto "layer > flatten image". Select the rectangular marquee tool and make a 2 pixel
wide selection spanning from the very top of your document down to the end of the last post.
Keep the selection 1 pixel from the left side of the edge. If you start the selection from the edge
you'll get small inperfections on the image. as the last pixel on the navigation is slighly lighter. If
you zoom in you'll see. Once you've made the selection goto "image > crop" then save the image
as "bg.png" inside your images folder. Once you've saved the image select the eye dropper tool,
zoom right in to the bottom of the image and select the last pixel on the image, get the color code
by clicking on your forground color, you'll see the color code in the window that pops up.
The hex color code of the last pixel you need to paste into the "background-color" style in your
CSS file. If you view you HTML document in your browser you should see your background in
action. Now lets style the container, topbar and header.
#container {
margin: auto;
width: 900px;
}
#top-bar {
float: left;
height: 24px;
width: 900px;
padding-top: 8px;
}
#header {
float: left;
height: 125px;
width: 900px;
}
For the container we just want a 900px wide box which is centered, the 900px is what we created
our PSD file at, you dont need a height as the container will increase or decrese depending on
the amount of content. For the topbar we want to float it left, we also want it to be 900px wide. We
also need to set a height, to determine the height i measured it in photoshop, the topbar was
actually 32px in height, but we have to minus the padding 32 - 8 = 24. So we set the height to
24px. We also want abit of padding as we dont want the text in our topbar to be stuck right
underneath our URL bar in the browser. If you find your text isnt quite centered due to you using
a bigger size or something just adjust the padding. The header is pretty much the same as the
top bar, 900px wide, floated left and a measured height of 125px. Now we need to fugure out how
were going to display our elements inside our divs.
As you can see from the image above its pretty straight forward, the topbar will have 2 lists inside
of it, the header DIV will have to more DIV's inside it one for the website title and slogan and
another for the search fields. We write this in our HTML document like this.
<div id="container">
<div id="top-bar">
<ul class="nav1">
<li><a href="#">Login</a></li>
<li><a href="#">Wordpress.org</a></li>
</ul>
<ul class="nav2">
<li><a href="#">Sitemap</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
<div id="header">
<div id="site-title">

</div>
<div id="search">

</div>
Inside the topbar there is two unordered lists one with class of nav1 and the other with a class of
nav2, then we've simply added two more DIV's inside our header DIV. Lets style our topbar lists
first, head over to your style sheet and add this code underneath your "top-bar" DIV.
#top-bar a{
color: #FFFFFF;
text-decoration: none;
}
#top-bar a:hover{
color: #323232;
}
.nav1 li {
display: inline;
list-style-type: none;
margin-right: 20px;
color: #FFFFFF;
float: left;
}
.nav2 li{
display: inline;
list-style-type: none;
color: #FFFFFF;
float: right;
margin-left: 20px;
}
The first two styles refer to the list's links. "top-bar a" sets the links to have a color of white and
the text-decoration removes the line underneath the link. The next one is the hover state of the
link, when you hover over a link in the list the color will change to #323232. Then we have out two
lists, we display our links inline oppsosed to vertically, list style type is set to none, this removes
the bullet points from the list. nav1 is floated left and nav2 is floated right. The list that is floated
left will have a right margin of 20px spacing the links apart by 20px then vise-versa for nav2. If
you view your document in your browser you should see your lists active. Now lets add our
website title and slogan, add the following code inside your "site-title" DIV.
<div id="site-title">
<h1>your<span class="blue-title">wordpress</span><span class="slogan"> "your wordpress

slogan here"</span></h1>
</div>
First we wrap out website title and slogan inside a H1 tag, because one of our words is blue in
our title we need to add a span class before the word. So we add a span class of "blue-title"
before the word "wordpress". Then because our slogan will look different again we need to add
another span class. A span class of slogan. Now we can style the word "wordpress" and the
whole slogan sentance though css. You could just use an image but why mess about with images
when the effect can be pulled off with CSS. We style our website title and slogan like this.
#site-title{
height: 80px;
float: left;
padding-top: 45px;
}
#site-title h1{
color: #FFFFFF;
text-transform: uppercase;
font-size: 24px;
font-style: italic;
font-weight: bold;
}
.blue-title {
color: #309dcf
}
.slogan {
font-size: 12px;
font-weight: normal;
text-transform: none;
}
Our site-title DIV has the same height as our header box "125px" but also has 45px padding to
the top so we have to do 125px - 45px = 80px. We also want our text to the left so we float it left.
Next we style our H1 tag, the H1 tag has a color of white (#ffffff), the text has to be uppercase in
italic and bold, then the font size is a nice big 24px. Then we had a span class of "blue-title" which
was our word "wordpress" we just wanted to change the color so we set a new color. Then the
slogan inherits the H1 tags color (#ffffff) we just need to set a different font size so we set a
smaller 12px. The slogan will also inherit the H1 tags uppercase and font weight style so we just
set the slogan style to normal and none. Thats our title and slogan out the way now for our search
field, add the following code to your search DIV.

<form action="" method="get">
<input type="text" class="search-field" value="Search..." size="30" />
<input name="Submit" type="submit" class="search-button" value="Go!" />
</form>
Here we have a simple form mockup, we have a text field which will be our search field, the
search field has a class of "search-field" allowing us to style it in CSS. Then we have our go
button with a class of "search-button". We style our search field and button like this.
#search {
float: right;
padding-top: 45px;
}
.search-field {
margin-right: 10px;
padding: 4px;
background-color: #494949;
border: 1px solid #666666;
color: #FFFFFF;
}
.search-button {
border: 1px solid #666666;
color: #FFFFFF;
padding: 2px;
}
.search-button:hover {
}
We set our main search DIV to float right with the same top padding as our website title. Our
search field had a class of "search-field" in this style we add a 10px right margin will push the go
button over by 10px, we set 4px padding all the way around the search field. The search field has
a background color of #494949 and a 1px border all the way around it in the color #666666.
Finally the text inside the search field we want to be white so we add our color: #ffffff. The search
button has a class of "search-button" and has the same styles as the search field part from the
padding is 2px and it has no margin. The last style is optional really, i always find its better to
have a hover effect on buttons. We just want the color of the go button to change slightly once
hovered over it. Test your HTML document to reveal the search field iin action. Obviously it
doesnt work yet. The next part we need to create is our navigation, we mock this up like this.
<ul class="nav_links">
<li> <a href="#">Home</a></li>
<li class="withdiv"><a href="#">Page #1</a></li>
</ul>
Inside our navigation DIV we add a simple unordered list and within that unordered list i have 10
links. You might not get 10 links across if the words are longer. Ive just done page 1 - 9 for an
example, in the wordpress template these links will be our pages which will load up dynamically.
You'll also notice links 1-9 has a class of "withdiv", this basically means with divider, we'll be
creating the divider in a moment. The CSS for our navigation looks like this.
#navigation {
height: 42px;
float: left;
width: 900px;
}
.nav_links ul {
margin: 0px;
padding: 0px;
}
.nav_links li {
list-style:none;
display:block;
float: left;
}
.nav_links a {
color: #5f5f5f;
display: block;
height: 27px;
padding-right: 17px;
padding-left: 17px;
padding-top: 15px;
}
.withdiv {
background-image: url(images/nav_divider.png);
background-repeat: no-repeat;
}
.nav_links a:hover {
color: #FFFFFF;
background-image: url(images/nav_hover.png);
}
Our first style is our navigation DIV, it has a height of 42px which is the height of the actuall
navigation in photoshop. The navigation is floated left and is 900px wide. The unordered list has
no margin or padding, the list has no list style, this removes the bullet points from the list, its
floated left and is displayed as a block. All the navigation links have no text decoration, 15px
padding at the top. The links also have two identical padding of 17px. If your pages have longer
words then you might want to reduce the size of the padding. Next up is our class "withdiv" this
class basically place a small divider to the left of each link, we'll be creating the divider in
moment. Finally the navigation hover, when we mouse over each button or link we want the text
to change to white and have a background image called nav_hover show up. Lets create these
image now open up your duplicated PSD file in photoshop if you havent already flattern your PSD
FILE, and make a selection like this.
Goto "image > crop" then save the file as "nav_divider.PNG" into your images folder. Next create
a new document 200x43 pixels. You need to create an image like the image below.
The image above is exactly the same as our blue bar at the very top of our website you can refer
to our PSD file for the layer styles. Once you've replicated the image above make a 2 pixel wide
selection and crop it. Save the file as "nav_hover.PNG" save the file into the images folder. Test
your HTML file in your browser to see if it works. You should have a working navigation with a
nice hover, just make sure all the hovers look the way there surposed to. Now its time for our
content, before we start were going to make the background images for our sidebar and content
boxes or dummy posts. Open up photoshop with your PSD file HIDE all the layers apart from the
background layer and the content box in which our wordpress posts will be. Double click your
post content box and adjust the inner shadow layer style.
Change the size to 2pixels, the reason why we've done this is because when we add our border
in CSS it will overlap our white line and it wont be visable. Now we have a 2 pixel line so the
border will cover up the 1st 1 pixel white border on our content box background image, leaving
the 2nd white border visable. Make a selection like this.
Only select the rectangle dont include the stroke on the box, we'll be adding the border through
CSS. Flattern your PSD file then goto"image > crop" save the image as "post_bg.PNG" Do
exactly the same to the sidebar image, the sidebar image should be 280px wide. and the same
height as the "post_bg.PNG" save the sidebar image as "sidebar_bg.PNG" You should have two
images like this.
We mockup our content area like this.
We'll be doing the left content first, the HTML looks like this.
<div id="content">

<div id="content-left">
</div>
</div>
</body>
</html>
The CSS styling for our two content DIV's are.
#content {
float: left;
width: 900px;
margin-top: 20px;
padding-bottom: 40px;
}
#content-left {
float: left;
width: 602px;
}
Our DIV "content" will basically be the container which holds all our content, we float this DIV left,
we make it 900px wide. We also need to space it out abit so we add a 20px top margin and 40px
padding. The reason why we added the 40px padding instead of margin was because for some
reason in Internet Explorer the content seemed to sit on top of the footer. Adding a 40px padding
to the bottom instead of a margin seemed to fix it. The content left DIV will be the container which
holds our posts. We have to make the box 602px wide as we'll be adding a border to the box, a
left and right border makes up an extra 2px, 1px each side. Again we float it left. Now we need to
start mocking up what our dummy post will look like. The code looks like this.
<div class="a-post">
<div class="post-img">
<img src="images/post_thumbnail.png" alt="Test Image" />
</div>
<div class="post-title">
<h1>This is a post title...</h1>
<p>Posted on 25/03/2009 By "admin"</p>
</div>
<div class="post-desc">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has
been the industry's standard dummy text ever since the 1500s, when an unknown printer took a
galley of type and scrambled it to make a type specimen book. It has survived not only five
centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </p>
</div>
</div>
Inside our content-left DIV we have a number of classes. (remember DIV's should be unique and
never repeated. Classes can be repeated as often as you like). The code above starting from the
class "a-post" will be repeated everytime you make a post in the wordpress theme, so its
important to use classes not DIV's. The first class is "a-post" this will be the box which holds our
background image and will also contain all other elements of a wordpress post. Inside the class
"a-post" we have a class of "post-img" this will be our wordpress thumbnail for the posts. We then
have "post-title" this class contains our post title and meta data. Finally we have our "post-desc"
which is post description this class will contain our post content before the wordpress MORE tag.
The CSS styles for each of the classes looks like this.
.a-post {
background-color: #FFFFFF;
background-image: url(images/post_bg.png);
border: 1px solid #bababa;
width: 580px;
padding: 10px;
float: left;
margin-bottom: 20px;
}
.a-post h1{
color: #309DCF;
font-size: 24px;
font-weight: bold;
line-height: 34px;
}
.a-post img{
border: 1px solid #d4d4d4;
padding: 5px;
float: left;
}
.post-img {
float: left;
height: 198px;
width: 234px;
margin-right: 10px;
}
.post-title {
float: left;
width: 336px;
}
.post-title p {
color: #FFFFFF;
background-color: #90c6df;
float: left;
}
.post-desc {
float: left;
width: 336px;
text-align: justify;
font-style: italic;
line-height: 16px;
}
The class which we style is the "a-post" class this has a background color of #FFFFFF and a
background image post_bg.png which is our image we created in photoshop. We then set our
1px border around the whole class, we also give the box 10px padding all the way around which
then makes the width 580px. 580px + 10px padding left + 10px padding right + 1 px border left +
1 px border right = 602px wide. The next class is our H1 tag for our post, we want a nice big blue
font then we use line height of 34px to space the title out abit. For every image in a post we want
a nice little border, so we add a class for all images in "a-post img". We then give each thumbnail
its own container "post-img" the width and height set in these styles matches my thumbnail which
i created in the PSD file. We then space out the thumbnail by giving it a margin to the right of
10px, this will push the post title and content 10px away from the thumbnail. The next class is the
"post-title" class, this is the container which holds our post title and meta data. The class "post-
title p" refers to our meta data which is the bit of text underneath our post title. Finally we have
"post-desc" which relates to our content within the post. You should now have 1 single post in
your CSS template, to create more posts we just need to duplicate everything inbetween the "a-
post" class. Test your index.html file to see how it looks in your browser. Now lets mockup the
sidebar. Inbetween the ending div "content left ends" and "content ends" mockup our sidebar
which looks like this.
<div class="side-bar">
<div class="side-bar-content">
<img src="images/ad.png" alt="Your AD Here" class="side-bar-ads" /><img src="images/ad.png"
alt="Your AD Here" class="side-bar-ads" /><img src="images/ad.png" alt="Your AD Here"
class="side-bar-ads" /><img src="images/ad.png" alt="Your AD Here" class="side-bar-ads" />
</div>
<h1>Some Text</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has
been the industry's standard dummy text ever since the 1500s, when an unknown printer took a
galley of type and scrambled it to make a type specimen book.</p>
</div>
<h1>Categories</h1>
<ul>
<li><a href="#">Categorie #1</a></li>
</ul>
</div>
</div>
The sidebar is pretty simple we just have 2 classes of which one is repeated. The class "sidebar"
is our sidebar container which will hold our sidebar elements. Then the "side-bar-content" class
holds our content, each bit of content is contained within the "side-bar-content" class. Think of
each element in your sidebar as a seperate item, so for example you have 4 125x125px ads at
the top thats one item, then you have your categories thats another item and so on and so forth. If
you look at the code above you can easily look at it and determine what each item is. The CSS
for our sidebar looks like this.
.side-bar {
background-color: #FFFFFF;
border: 1px solid #bababa;
float: right;
width: 260px;
background-image: url(images/sidebar_bg.png);
padding: 10px;
}
.side-bar-content {
width: 260px;
float: left;
}
.side-bar-ads {
margin-left: 3px;
margin-bottom: 3px;
}
.side-bar h1{
color: #309DCF;
font-size: 20px;
font-weight: bolder;
line-height: 24px;
}
.side-bar p {
line-height: 16px;
}
.side-bar li {
line-height: 18px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #e1e1e1;
margin-left: 15px;
margin-top: 10px;
display: block;
}
The first thing to style is our sidebar class, this class contains our background image that we
created in photoshop. The styles are pretty much similar to our post styles. We then have a class
of "side-bar-content" this is our little container for each sidebar item. We then have a few classes
which relate to our sidebar content, "side-bar-ads" are the styless for my little 125x125px ads, the
"side-bar h1" tag refers to each header that we have in our sidebar, if we have any plain text in
our sidebar or paragraphs then these would be styled though the "side-bar p" style. Then finally
we have our "side-bar li" style which we'll use for any lists that we have in our sidebar. You can
go ahead and test your template in your browser. Everything should be in order, you may need to
copy the "ad image" from the images folder from my template unless you create your own. Finally
we need to mockup our footer which looks like this.
<div id="footer">
<div id="footer-topbar">
<h1>mywordpress<span> "Your fancy wordpress slogan here"</span></h1>
</div>
<div id="footer-content">
<p>Copyright © mywordpress.co.uk | All Rights Reserved<br />
Design By <a href="http://www.hv-designs.co.uk">HV-Designs.co.uk</a></p>
</div>
</div>
</body>
</html>
Make sure you add your footer outside of the container DIV as we want our footer to span across
the browser just like our header and top-bar does. We first add a DIV of footer and a DIV of
footer-topbar this will be our footer container DIV a DIV for our topbar pretty much similar to our
header and top-bar. We then add another DIV which will be for some copyright text so we add a
DIV of "footer-content". We need to make a background for our footer, we do this in the same
way as we did when we created the top half of our template. You need to make a 2 px selection
of your footer background in your PSD file. Then the image will be repeated through CSS. The
CSS for our footer looks like this.
#footer {
background-image: url(images/footer_bg.png);
clear: both;
height: 147px;
}
#footer-topbar {
height: 33px;
width: 900px;
margin: auto;
}
#footer-topbar h1 {
color: #FFFFFF;
font-size: 20px;
font-weight: bold;
text-transform: uppercase;
font-style: italic;
padding-top: 3px;
}
#footer-topbar span {
font-size: 12px;
font-style: normal;
font-weight: normal;
font-variant: normal;
color: #FFFFFF;
}
#footer-content {
height: 113px;
width: 900px;
margin: auto;
}
#footer-content p {
color: #FFFFFF;
padding-top: 45px;
text-align: right;
}
We style our footer DIV first as you can see we've added our background which is repeated along
the x axis. The height is the same height as a background image and importantly you have to
clear the floats eles footer background will be 900px instead of spanning the entire browser width.
We then have our footer top-bar, this is pretty much the same as when we created the header,
our footer top-bar has a width of 900px, margin is set to auto to center everything so it matches
the rest of our template, we then have a height of 33px which is the actual height of the blue bar,
which i measured in photoshop. We then have a H1 tag and a span, this is exactly the same as
when we created the website title. The copyright text is put inside the DIV "footer-content" and
styled through a P tag. All thats left to do now is style our default H tags for headers that aint
styled through another DIV, and also we need to style our links.
h1,h2 {
color: #309DCF;
font-weight: bold;
}
h1 {
font-size: 24px;
line-height: 34px;
}
h2 {
font-size: 18px;
line-height: 34px;
}
h3 {
color: #333333;
font-size: 18px;
line-height: 34px;
}
a:link {
color: #309DCF;
}
a:visited {
color: #309DCF;
}
a:hover {
color: #333333;
}
a:active {
color: #309DCF;
}
All done, hope you enjoyed this tutorial, sorry its so long, to be honest it could of been longer if i
went into more detail. In the next tutorial we'll be converting it into wordpress. Dont forget to
subscribe via RSS & twitter. You can also share my tutorials by using the "share & enjoy" buttons
at the bottom. Till next time, cya.
CONVERTING CSS TEMPLATE TO WORDPRESS
Hello welcome to part 3 of the PSD to CSS to WORDPRESS tutoral, in this part of the tutorial
we'll be converting our CSS template into a working wordpress theme. You can download the
theme for free using the button below.
Before we start converting our theme over to wordpress you might want to download and install
"xamp" this will allow you to run wordpress on your local hard drive saving on bandwidth and
internet load times. Your also going to need a theme by "elliot jay stocks" called "starkers". The
theme is a completely naked theme, its been stripped of all its CSS and HTML, basically giving
you a blank wordpress canvas to work on, its ideal for wordpress developers to start from. The
theme uses files from wordpress 2.6.2. But this doesnt mean its not going to work with the latest
wordpress software, i started with the exact same theme to build my hv-designs website and
thats running in wordpress 2.7. If your thinking "bummer i wanted threaded comments" well you
can easily grab a 2.7 comments file and replace it. Hopefully "elliot jay stocks" will release a
naked 2.7 theme soon. Any way lets press on once you've downloaded the "stalkers theme"
extract it to your desktop, rename the stalkers theme folder to "mywordpress", you can also
change the screenshot if you wish.
In your stalkers theme there is a folder called "style" inside this folder are some additional CSS
files for IE hacks, typography and reset files. You dont really need this folder so if you want to you
can delete it, but keep it by all means if you wish to keep it. Open up the "style.css" file in the
main "mywordpress" theme directory. Once its open you'll be greeted with this.
/*
Theme Name: Starkers
Theme URI: http://elliotjaystocks.com
Description: The totally nude Wordpress theme. Phwoar! (Based on the famous <a
href="http://binarybonsai.com/kubrick/">Kubrick</a> by <a
href="http://binarybonsai.com/">Michael Heilemann</a>)
Version: 2 (WP2.6.2)
Author: Elliot Jay Stocks
Author URI: http://elliotjaystocks.com
Tags: starkers, naked, clean, basic
*/
@import "style/css/reset.css";
@import "style/css/typography.css";
@import "style/css/layout.css";
Delete the 3 imported .CSS files at the bottom of the page, then edit the theme name, description
etc... Mine looks like this.
[sourcecode language='css']
/*
Theme Name: MyWordpress
Theme URI: http://www.hv-designs.co.uk
Description: A wordpress theme
Version: 1
Author: Richard Carpenter
*/
[/sourcecode]
Save your .CSS file when you load up the theme in wordpress under the appreance tab you'l now
see this.
If you havent changed your image you should see a wooden naked body. Which was the orginal
starkers theme screenshot. Back to your .CSS file underneath the information we just edited,
copy and paste the whole of your CSS templates CSS file into it save and exit. Now open up the
"header.php" file, you'll now be greeted will loads of PHP mixed in with some HTML, the first thing
we can do is remove all the code from the TITLE tag at the top of document.

<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>
<head profile="http://gmpg.org/xfn/11">
<title>
<?php if (is_home()) { echo bloginfo('name');
} elseif (is_404()) {
echo '404 Not Found';
} elseif (is_category()) {
echo 'Category:'; wp_title('');
} elseif (is_search()) {
echo 'Search Results';
} elseif ( is_day() || is_month() || is_year() ) {
echo 'Archives:'; wp_title('');
} else {
echo wp_title('');
}
?>
</title>
Once you've deleted the php from the title tag, just replace it with what ever you want to display at
the top of the browser.

<title>MYWORDPRESS "your wordpress slogan can go here"</title>
If you didnt want to manually add your wordpress title instead you can use your blogname, when
you installed wordpress it asked for the name of your blog, it is also displayed in your wordpress
admin panel at the top. If you wanted to dynamically display that instead of the manual title you
can use this bit of code.

<title> <?php bloginfo('name'); ?> </title>
Next still inside the header.php file at the very bottom delete everything underneath the body tag
your header.php document should look like this.

<title>MYWORDPRESS "your slogan can go here"</title>
<meta http-equiv="content-type" content="<?php bloginfo('html_type') ?>; charset=<?php

bloginfo('charset') ?>" />
<meta name="description" content="<?php bloginfo('description') ?>" />
<?php if(is_search()) { ?>
<meta name="robots" content="noindex, nofollow" />
<?php }?>
<link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url'); ?>" media="screen"

/>
<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed"
href="<?php bloginfo('rss2_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<?php wp_head(); ?>

</head>
<body>
All the content we add now will be pasted in underneath the body tag. Copy your images folder
from your CSS templates directory and paste it into the themes directory. Open up your
index.html file from your CSS template. Copy everything from the opening "container DIV" to the
ending "navigation DIV". Paste it underneath the body tag. Save your header.php file, if you
check the theme in your browser it should look like this.
Pretty quick eh??, we just need to make a few tweaks and the header file should be complete. On
our navigation we have a list that we created page #1, page #2, page #3 etc... well we want
wordpress to add our pages dynamically when we goto add page in our admin panel. To do this
we change our navigation to look like this.
<li> <a href="http://www.your_page_here.com">Home</a></li>
<li class="withdiv"><?php wp_list_pages('sort_column=menu_order&title_li='); ?></li>
</ul>
We can keep the 1st button "home" just link it to your main domain name
"http://www.what_ever.com. But underneath we can delete page #1 - page #9 and just add the
one line off php wrapped in out LI tag. The php basically gets your wordpress pages from the
database and displays them in page order. If you only had say one wordpress page and loads of
external pages you wanted to use then just add another page underneath like this.
<li><a href="http://www.your_page_here.com">Home</a></li>
<li class="withdiv"><?php wp_list_pages('sort_column=menu_order&title_li='); ?></li>
<li class="withdiv"><a href="http://www.your_external_page.com">External Page</a></li>
</ul>
You can have as many as you like within reason, anything that overflows the 900px navigation
will just mess the layout up so be carefull. Another item we need to tweak is our search field,
delete the form structure from your search DIV and add the following peice of PHP.

<?php include (TEMPLATEPATH . "/searchform.php"); ?>
[/sourcecode]
If you check your theme in your browser now, you'l notice the search form has lost all its styling.
Open up "searchform.php" from your "mywordpress theme folder". This file contains our search
form and looks like this.
[sourcecode language='php']
<form method="get" id="searchform" action="<?php bloginfo('url'); ?>/">
<label class="hidden" for="s"><?php _e('Search for:'); ?></label>
<input type="text" value="<?php the_search_query(); ?>" name="s" id="s" />
<input type="submit" id="searchsubmit" value="Search" />
</form>
All's we need to do is add our class of "search-field" and "search-button" which we created when
we created our CSS template. The form now looks like this.
<form method="get" id="searchform" action="<?php bloginfo('url'); ?>/">

<label class="hidden" for="s"></label>
<input type="text" class="search-field" value="Search..." name="s" id="s" />
<input type="submit" id="searchsubmit" class="search-button" value="Go!" />
</form>
We've applyed our search form classes, deleted the the "search for" text before the search field
and changed the word on the submit button from "search" to "go!". Close the searchform.php file
and check your theme in your browser to see the changes you can also test out your search form
it should now work, you wont see anything exciting as we need to style our search results page.
Thats it for the header.php file you can now close it. Now open up your "index.php" file in from
your themes directory. The index.php file is the main page of our website, this is the 1st page
people will see when logging onto your website. We have quite abit of work to do, to get it
working. All the PHP code wrapped inside the H2 tag is the title of the post.
<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php

the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
The PHP code wrapped in the P tag underneath is the date.

<p><?php the_time('F jS, Y') ?> </p>
Then there a line of PHP code underneath the P tag which says.
<?php the_content('Read the rest of this entry »'); ?>
This displays the content of the post, and when you use the wordpress more tag to cut off your
posts the text "read the rest of this entry" is displayed. Then finally we have another P tag.
<p><?php the_tags('Tags: ', ', ', '<br />'); ?> Posted in <?php the_category(', ') ?> | <?php
edit_post_link('Edit', '', ' | '); ?> <?php comments_popup_link('No Comments »', '1
Comment »', '% Comments »'); ?></p>
This PHP displays the tags if there any for the post, it displays what catergorie the post was
posted in and shows how many comments were made on the posts. Now we need to jumble all
this PHP around so it displays the way we want, like our CSS template. Firstly we need to copy
and paste a couple of DIV tags in there from our CSS template. The 1st two DIV tags we need to
add are DIV ID content and DIV ID content-left. We add these two DIV's at the very top
underneath GET HEADER.
<?php get_header(); ?>

<?php if (have_posts()) : ?>
Then at the very bottom of our page above GET SIDEBAR we need to end our content left DIV.
<?php endif; ?>
<?php get_sidebar(); ?>
<?php get_footer(); ?>
Now we need to add our "a-post" class to the document we add this just above div class post and
end it underneath the PHP code containing the tags and number of comments etc...
<?php while (have_posts()) : the_post(); ?>
<div class="post" id="post-<?php the_ID(); ?>">

</div>
<?php endwhile; ?>
We now need to start sorting through the PHP code and get rid of what we dont want to be
displayed. At the very bottom around line 34 you should see.
<?php include (TEMPLATEPATH . "/searchform.php"); ?>
This line will display a search field when a post cant be found, we have a search field in our
header already so we dont really need a 2nd one. Delete the one line of code. Scroll up to the
PHP code which contains the post tags and amount of comments.
On our main page we dont really need the tags, or the edit post link, so the delete these two lines.
<?php the_tags('Tags: ', ', ', '<br />'); ?>
<?php edit_post_link('Edit', '', ' | '); ?>
Your code should now look like this.
<p>Posted in <?php the_category(', ') ?> | <?php comments_popup_link('No Comments »',

'1 Comment »', '% Comments »'); ?></p>
We now need to start copying and pasting our post classes over to our theme. The first one we
need to copy over will be for our thumbnail code. Copy the class "post-img" from our CSS
template, paste it underneath the "div class post". The code looks like this.
</div>
We then had some PHP wrapped in a H2 tag, change the H2 tag to a H1 tag then wrap the whole
thing in our "post-title class" from our CSS template.
</div>
We then need to move over our "post-desc class" from our CSS template, we wrap this class
around the post content PHP.
</div>
Our index.php all in all should now look like this.

<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
</div>
</div>
</div>

</div>
<?php endwhile; ?>
<ul>
<li><?php next_posts_link('« Older Entries') ?></li>
<li><?php previous_posts_link('Newer Entries »') ?></li>
</ul>
<?php else : ?>
<h2>Not Found</h2>
<p>Sorry, but you are looking for something that isn't here.</p>
<?php endif; ?>
Underneath our "post-desc" class we have this code.

We want to delete the first chunk which basically says "posted in and then some php code". We
dont really need this bit. So the code would look like this after its been deleted.
<p><?php comments_popup_link('No Comments »', '1 Comment »', '% Comments

»'); ?></p>
We then need to delete the starting P tag and ending P tag from the code above, then cut the
PHP code and paste it into the post title class next to the PHP code for the time and date.
<p><?php the_time('F jS, Y') ?>  | <?php
comments_popup_link('No Comments »', '1 Comment »', '% Comments »');
?></p>
</div>
Thats it for the index.php file for now. Now lets get the sidebar sorted, open up your sidebar.php,
most of the code at the top can go. Delete from.
<ul>
<?php /* Widgetized sidebar, if you have the plugin installed. */
if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?>
All the way down to.
<?php wp_list_pages('title_li=<h2>Pages</h2>' ); ?>
Now above the code above add
<div class="side-bar">
At the very bottom of the page add your sidebar ending and content ending DIV's.
</div>
Now change ALL H2 tags to H1 tags. Your search bar is complete, if you test your theme in the
browser you will see the sidebar is not the same as our CSS template. If your not really that
bothered about having all the catergores, archives etc.. in the sidebar and want to create
something on your own, then just remove all the code from inbetween the sidebar opening and
ending tags. Then just create your own sidebar as we did in our CSS template. Id highly
recommend wrapping your "custom" sidebar content in the sidebar-content class.
Which we used in our CSS template. I always find it best to create your own sidebar from scratch.
Now lets sort out our footer, open your footer.php file, there shouldn't be alot of content in there
just highlight it all and hit the delete key. In your index.HTML file from the CSS template copy this
chunk of code.
<div id="footer">
<div id="footer-topbar">
<h1>mywordpress<span> "Your fancy wordpress slogan here"</span></h1>
</div>
<div id="footer-content">
<p>Copyright © mywordpress.co.uk | All Rights Reserved<br />
Design By <a href="http://www.hv-designs.co.uk">HV-Designs.co.uk</a></p>
</div>
</div>
</body>
</html>
Paste it into your footer.php file, save and exit. Refresh your theme in your browser to see the
changes. The footer is as easy as that. The theme is nearly complete we just need to tweak a few
more pages. Open up "page.php" this file relates to single pages which we add through the
wordpress admin panel. The tags we added to our index.php file can also be used in this file.
Underneath the "get header php code" add this code.

<div class="a-post">
At the very bottom above the "get sidebar php" code add.
</div>
</div>
Your "page.php" code should now look like this.

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

<h2><?php the_title(); ?></h2>
<?php the_content('<p class="serif">Read the rest of this page »</p>'); ?>
<?php wp_link_pages(array('before' => '<p><strong>Pages:</strong> ', 'after' => '</p>',
'next_or_number' => 'number')); ?>
</div>
<?php endwhile; endif; ?>
<?php edit_post_link('Edit this entry.', '<p>', '</p>'); ?>
</div>
</div>

If you check a page on your theme it should now be wrapped in a box like we used for our main
posts in the index.php file. This wont be the first time you'll reuse the code, we can use the same
code in our search.php file which displays our search results within our wordpress theme, which
brings me to our next file. Open up your index.php file and goto "file > save as" save the
index.php as "search.php" overwrite the existing file. All done, when you search using the search
field in the header, the search results will be displayed the same as our posts. Obvisouly you can
make your search results look how they want by applying different styles and DIV's to the file.
Now open up "archive.php" underneath the "get header php code" add the following.

At the very bottom of above the "get sidebar php" code add two ending DIV's.
</div>
</div>
Everything thats in your wordpress archive like posts by categorie, posts with the same tags,
posts posted on the same day etc... all this information will be displayed like our single pages are.
If you make a post with a couple of tags or click a month under the "archives" section in the
sidebar you'll see how its displayed. Again you can make it display what you want how you want.
Have you noticed a pattern emerging????? most of the files use the same PHP tags but its just
displayed in a different way. You can make your archives page look the same as your search
page and index.php page, you just need to add the relative "classes / DIV's" to the "post loop".
Right now time for our 404 page. Open up the 404.php file. again add the post code from our
CSS template.

<h2>Error 404 - Not Found</h2>
</div>
</div>

Theres only two more files left to edit then your theme is complete. Ive left these two files till last
because they are sometime abit fiddley. Open up your "single.php" file underneath the "get
header php code" add the post classes.


Scroll down to the very bottom above the "get footer code" add the two ending DIV's. The sidebar
is not included in the single.php file so we need to add it manually. Underneath the two ending
DIV's add the get sidebar php code.
<?php endif; ?>
</div>
</div>
Load up your theme in the browser and check what your post pages look like. Look ok, the
comments field looks abit big for our theme, so our next job is to shorten it. Open up your
"comments.php" file. Near the bottom locate the form. Which looks like this.
<form action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php" method="post"

id="commentform">
<?php if ( $user_ID ) : ?>
<p>Logged in as <a href="<?php echo get_option('siteurl'); ?>/wp-admin/profile.php"><?php echo

$user_identity; ?></a>. <a href="<?php echo get_option('siteurl'); ?>/wp-login.php?action=logout"
title="Log out of this account">Log out »</a></p>
<?php else : ?>
<input type="text" name="author" id="author" value="<?php echo $comment_author; ?>"

size="22" tabindex="1" <?php if ($req) echo "aria-required='true'"; ?> />
<label for="author">Name <?php if ($req) echo "(required)"; ?></label>
<input type="text" name="email" id="email" value="<?php echo $comment_author_email; ?>"

<label for="email">Mail (will not be published) <?php if ($req) echo "(required)"; ?></label>
<input type="text" name="url" id="url" value="<?php echo $comment_author_url; ?>" size="22"

tabindex="3" />
<label for="url">Website</label>
<?php endif; ?>
<p><strong>XHTML:</strong> You can use these tags: <code><?php echo allowed_tags();

?></code></p>
<textarea name="comment" id="comment" cols="100%" rows="10" tabindex="4"></textarea>
<input name="submit" type="submit" id="submit" tabindex="5" value="Submit Comment" />

<input type="hidden" name="comment_post_ID" value="<?php echo $id; ?>" />
<?php do_action('comment_form', $post->ID); ?>
</form>
At the bottom of this code you should see the text area.
<textarea name="comment" id="comment" cols="100%" rows="10" tabindex="4"></textarea>

Notice the "columns" are set to 100%, thats where our problem lies. Remove the "%" and change
to 70. It should now look like this.
<textarea name="comment" id="comment" cols="70" rows="10" tabindex="4"></textarea>
Test the changes in your browser, the text area is now a snug fit my end. Our next problems lie's
with our text input fields, there is a quick fix for these. At the begining of each form field add the P
tag then at the end add the ending P tag.
<p><input type="text" name="author" id="author" value="<?php echo $comment_author; ?>"

<label for="author">Name <?php if ($req) echo "(required)"; ?></label></p>
<p><input type="text" name="email" id="email" value="<?php echo $comment_author_email; ?>"

<label for="email">Mail (will not be published) <?php if ($req) echo "(required)"; ?></label></p>
<p><input type="text" name="url" id="url" value="<?php echo $comment_author_url; ?>"

size="22" tabindex="3" />
<label for="url">Website</label></p>
You can add your own styles to the form boxes, just make a class with some styless in your CSS
file, then apply the class to the input form boxes. Another problem with have is our text boxes sit
right on top of our XHTML text. To sort this add a BR tag after the last form box.
<p><input type="text" name="url" id="url" value="<?php echo $comment_author_url; ?>"

size="22" tabindex="3" />
<label for="url">Website</label></p>
<?php endif; ?>
<br />
<p><strong>XHTML:</strong> You can use these tags: <code><?php echo allowed_tags();

?></code></p>
<textarea name="comment" id="comment" cols="70" rows="10" tabindex="4"></textarea>
<input name="submit" type="submit" id="submit" tabindex="5" value="Submit Comment" />

<input type="hidden" name="comment_post_ID" value="<?php echo $id; ?>" />
<?php do_action('comment_form', $post->ID); ?>
</form>
Now make some example comments on your theme, you'll notice they aint very nice too look at,
everything is close together, theres basically no styling or nothing. This is where we need to start
adding some basic styling of our own. In our comments.php file scroll towards the top to locate
the comments loop. We need to add two new classes the first class is a class of "comment-box"
this wraps the whole comments loop, dont forget to end the class at the bottom. The second class
is a class for our gravatar, you can see where the gravatar is called in php by looking at the code
below.
<?php foreach ($comments as $comment) : ?>
<div class="comment-box">

<li <?php echo $oddcomment; ?>id="comment-<?php comment_ID() ?>">
<div class="gravatar">

<?php echo get_avatar( $comment, 32 ); ?>
</div>
<cite><?php comment_author_link() ?></cite> Says:

<?php if ($comment->comment_approved == '0') : ?>
<p>Your comment is awaiting moderation.</p>
<?php endif; ?>
<p><a href="#comment-<?php comment_ID() ?>" title=""><?php comment_date('F jS, Y') ?> at
<?php comment_time() ?></a> <?php edit_comment_link('edit',' ',''); ?></p>
<?php comment_text() ?>
</li>
</div>
Open up your CSS file for the theme and add your classes.
.comment-box {
border: 1px dashed #666666;
padding: 5px;
float: left;
width: 565px;
}
.gravatar {
float: right;
margin: 5px;
}
To the whole comment loop were going to add a 1 pixel dashed border, a bottom margin to
seperate each comment, then add 5 px padding so the content inside the comments box arn't
right against the dashed lines, we then float out box left, justify our text and set a width of 565px.
We then add our styling for our gravatar image, We just want to float the gravatar image to the
right and add a 5px margin all the way around the image. The comment text should flow around
our gravatar image. You can also change the size of your gravatar image by altering the number
in the code.
<div class="gravatar">
<?php echo get_avatar( $comment, 32 ); ?>
</div>
The number 32 in the code means the image will be 32px by 32 px. Try changing to something
eles, i find 72 is a nice size. Save and test what your comments look like in your browser. They
dont look too bad. Still think it needs some work. Lets insert a line break inbetween the date and
time, locate the time and date in the loop.
<?php foreach ($comments as $comment) : ?>

<div class="comment-box">
<li <?php echo $oddcomment; ?>id="comment-<?php comment_ID() ?>">
<div class="gravatar">
<?php echo get_avatar( $comment, 72 ); ?>
</div>
<cite><?php comment_author_link() ?></cite> Says:

<?php if ($comment->comment_approved == '0') : ?>
<p>Your comment is awaiting moderation.</p>
<?php endif; ?>
<p><a href="#comment-<?php comment_ID() ?>" title=""><?php comment_date('F jS, Y') ?> at
<?php comment_time() ?></a> <?php edit_comment_link('edit',' ',''); ?></p>
<br />
<?php comment_text() ?>

</li>
</div>
Thats pretty much it for the comments, obviously you can take more time to per-fect the look of
your theme. Test your theme in the browser, ive tested mine in firefox and internet explorer and it
works fine, there are a few minor bugs which we'll sort now. If you notice in firefox there are
numbers next to the comments and bullet points here and there. Open up the CSS file and paste
in the following rule.
ul, ol {
list-style:none;
}
Another bug you'll notice is that wordpress doesnt include the line breaks inbetween text on
pages (NOT POSTS) and comments. To sort this we just need to add.
#content p {
margin: 5px 0 10px;
padding: 0;
}
.comment-box p {
margin: 5px 0 10px;
padding: 0;
}
I am sorry if ive missed any bugs. The theme is complete the only snippet of code id add now is
so we can use custom fields for our post images. Open up your index.php file and locate the
class "post-img" within the post loop.
</div>
Delete the code containing the image and replace with the code below. The code below basically
means if a post used a custom field of image display the thumbnail, if the post uses an image
apply the url.
<a href="<?php $values = get_post_custom_values("url"); echo $values[0]; ?>" title="<?php

the_title(); ?>">
<img src=" <?php $values = get_post_custom_values("image"); echo $values[0]; ?>" alt="<?php
the_title(); ?>" /></a>
So when were in wordpress and we make a post instead of inserting it into the actual post we
goto our custom fields section at the bottom.
Enter our first custom field of "image".
Click add custom field, do the same for the next field, enter "url" then enter the url of the post.
Once you have entered the custom fields once, when you add more posts the custom fields will
be available within a drop down box.
Finally The End

The end, you should now have a working wordpress theme from a PSD file we created a couple
of days ago, although this tutorial wont make you a wordpress developer over night.... its a start.
The PHP part of a wordpress theme is pretty simple and isnt hard to work out whats what. There
is loads of documentation over at wordpress.org to help you with certain things if you ever get
stuck. Id also suggest downloading a wordpress cheat sheet, someone made one a while back
but i dont have the link. Also diving into wordpress can be a right pain and i can safely say it will
piss you off big time. You've just got to work at it and work at it, another thing id suggest is to
make and code each file before you start the wordpress side of coding, that way most of the hard
work would of been done, it will just be a case of sifting through the loops. Il try to make a couple
more wordpress tutorials in the near future. Any questions just ask. See you next time.

PSD To CSS To WP

Caricato da

Informazioni sul documento

Descrizione originale:

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

PSD To CSS To WP

Caricato da

Copyright:

Formati disponibili

MAKING THE PSD FILE

Add these layer styles to your top bar.

Add this layer style to your bigger rectangle.

Add these layer styles to your navigation rectangle.

CONVERTING THE PSD TO A CSS TEMPLATE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

<div id="container">

<div id="top-bar">

<div id="header">

<div id="navigation">

/* MAIN BODY STYLES */

<div id="container">

<div id="top-bar">

</div>

<div id="header">

<div id="site-title">

<div id="search">

<div id="site-title">

<h1>your<span class="blue-title">wordpress</span><span class="slogan"> "your wordpress

</div>

<div id="search">

<div id="navigation">

<div id="content">

The CSS styling for our two content DIV's are.

<div class="a-post">

</div>

</div>

</div>

<div class="side-bar">

<div id="footer">

CONVERTING CSS TEMPLATE TO WORDPRESS

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

<title>MYWORDPRESS "your wordpress slogan can go here"</title>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

<title> <?php bloginfo('name'); ?> </title>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

<title>MYWORDPRESS "your slogan can go here"</title>

<meta http-equiv="content-type" content="<?php bloginfo('html_type') ?>; charset=<?php

<link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url'); ?>" media="screen"

<?php wp_head(); ?>

<div id="navigation">

<div id="navigation">

<div id="search">

<form method="get" id="searchform" action="<?php bloginfo('url'); ?>/">

<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php

The PHP code wrapped in the P tag underneath is the date.

<?php the_content('Read the rest of this entry &raquo;'); ?>

<?php get_header(); ?>

<div id="content">

<?php if (have_posts()) : ?>

<?php endif; ?>

</div>

<?php get_sidebar(); ?>

<?php get_footer(); ?>

<?php while (have_posts()) : the_post(); ?>

<div class="a-post">

<div class="post" id="post-<?php the_ID(); ?>">

<?php the_content('Read the rest of this entry &raquo;'); ?>

<?php endwhile; ?>

<?php the_content('Read the rest of this entry »'); ?>

<?php the_content('Read the rest of this entry »'); ?>

<p>Posted in <?php the_category(', ') ?> | <?php comments_popup_link('No Comments »',

<p>Posted in <?php the_category(', ') ?> | <?php comments_popup_link('No Comments »',

<p><?php comments_popup_link('No Comments »', '1 Comment »', '% Comments