psd to css to wp

8/8/2019 PSD to CSS to WP

1/51

MAKING THE PSD FILE

Good evening welcome to the first part of my PSD to wordpress tutorial. In these series oftutorials we'll be creating a wordpress theme called "mywordpress" the first part of the tutorial willbe mocking up the layout in photoshop. Part two will involve converting the PSD file into aworking 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 downloadthe 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.


2/51

Your top bar should now be identical to mine, using the rectangular marquee tool again create abigger rectangle underneath your top bar.

Add this layer style to your bigger rectangle.


3/51

Add to the top bar some items you'd want in your wordpress theme, then add your website titleand slogan, swap the colors on your website title so you have a nice white and then a blue, thecolor code for the blue is #309dcf.

Next were going to mimic our search field for the header, select the rectangle marquee tool andcreate 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.


4/51

With the rectangular marquee tool once more create another rectangle the width of your canvasunderneath your header.

Add these layer styles to your navigation rectangle.


5/51

Directly underneath your navigation bar add a 1 pixel white line, spanning the width of thecanvas.

Add some dummy navigation text onto your navigation bar, inbetween each link add a smalldivider. The small divider is made up of two 1pixel lines next to each other, then a layer mask isapplied. Using a reflected gradient start from the middle of the divider and drag upwards to thetop of the divider. Make sure your forground color is set to white and background is set to black.


6/51

Now were going to create a dummy post, select the rectangular marquee tool and create arectangle exactly 600 pixels wide. You can create exact sizes by changing the settings of therectangular marquee tool to "fixed size" you can then enter the values in the width and heightfields. 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.


7/51


8/51

You should have a nice box like this.


9/51

Inside your small content box, which will represent out post on wordpress, add your thumbnailimage, example post title, post content and some meta data. Then duplicate the box and therecontents about 3 times moving them down equally as you go along.


10/51

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 someexample content like ads, titles and text. Just to get a feel for the sidebar would be like. This willhelp us visualize what the theme should look like. Although you dont need to be precise onpostioning etc... as this will come later when were coding it into CSS.


11/51

Finally lets create our footer, duplicate your top bar and header. Move the duplicated top bar andheader 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 yourcopyright text. Thats it all done, heres our finished peice.


12/51

The layout doesnt look like much at the moment but once coded into CSS it will look good. Just togive you a taster on what it will look like "CLICK HERE". We'll be coding the PSD into a CSStemplate 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


13/51

Hello welcome to part #2 of the "mywordpress" tutorial, today were going to be converting ourPSD 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 foldercalled "images". Open up a blank notepad document then goto "file > save as" then save theblank file as "style.css" inside the "mywordpress" folder. Open up dreamweaver and start a newHTML 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 theindex.html file.


14/51

Inside the "code view" edit the TITLE TAG to display what ever you want in your title bar of thebrowser. "MYWORDPRESS - fancy wordpress slogan here - Welcome...".

MYWORDPRESS - fancy wordpress slogan here - Welcome...

On the far right side of the dreamweaver window there should be a big box in which you can slide

in and out.


15/51

If you cant see it, click the little black arrow. If you find there are loads of boxes open just collapsethem the only window we need is the CSS window. In the CSS window we can attach our stylesheet by clicking the little chain button. OR if you prefer type it out by hand.


16/51

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'llnotice once you click ok the style sheet is attached and the code is automatically written for you.


17/51


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 withloads of wonderfull options. Right lets start mocking up our DIV's in our HTML document, we'llstart with the top half first. Were going to need a container DIV, a DIV for the topbar, header andnavigation. The code looks like this.


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 quitemessy. Another thing i tend to do is always TAB in DIV's that are inside other DIV's, it just keepsthings nice and neat. Right open up your style sheet inside dreamweaver, the first items we needto style is the body of our document.

/* MAIN BODY STYLES */

*{padding:0;margin:0;


18/51

}

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 haveany padding or margin, setting the margins and padding to 0 will make the document sit flush atthe top, sides and bottom of the browser. In the body style we have a background image whichwe'll be creating in a moment, the background repeats along the x axis (horizontal). Then wehave our document background color which is the color of the last pixel on the backgroundimage, then we have our font family, font size and default font color. Lets create our backgroundimage. Duplicate your PSD file (a backup is always good) open up your backup PSD file inphotoshop, goto "layer > flatten image". Select the rectangular marquee tool and make a 2 pixelwide 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 edgeyou'll get small inperfections on the image. as the last pixel on the navigation is slighly lighter. Ifyou zoom in you'll see. Once you've made the selection goto "image > crop" then save the imageas "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 codeby clicking on your forground color, you'll see the color code in the window that pops up.


19/51


20/51

The hex color code of the last pixel you need to paste into the "background-color" style in yourCSS file. If you view you HTML document in your browser you should see your background inaction. 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 createdour PSD file at, you dont need a height as the container will increase or decrese depending onthe amount of content. For the topbar we want to float it left, we also want it to be 900px wide. Wealso need to set a height, to determine the height i measured it in photoshop, the topbar wasactually 32px in height, but we have to minus the padding 32 - 8 = 24. So we set the height to24px. We also want abit of padding as we dont want the text in our topbar to be stuck rightunderneath our URL bar in the browser. If you find your text isnt quite centered due to you usinga bigger size or something just adjust the padding. The header is pretty much the same as the


21/51

top bar, 900px wide, floated left and a measured height of 125px. Now we need to fugure out howwere 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 insideof it, the header DIV will have to more DIV's inside it one for the website title and slogan andanother for the search fields. We write this in our HTML document like this.

LoginWordpress.org

SitemapContact Us

Inside the topbar there is two unordered lists one with class of nav1 and the other with a class ofnav2, then we've simply added two more DIV's inside our header DIV. Lets style our topbar listsfirst, head over to your style sheet and add this code underneath your "top-bar" DIV.

#top-bar a{color: #FFFFFF;


22/51

text-decoration: none;}

#top-bar a:hover{color: #323232;text-decoration: none;

}

.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 andthe text-decoration removes the line underneath the link. The next one is the hover state of thelink, when you hover over a link in the list the color will change to #323232. Then we have out twolists, we display our links inline oppsosed to vertically, list style type is set to none, this removesthe bullet points from the list. nav1 is floated left and nav2 is floated right. The list that is floatedleft will have a right margin of 20px spacing the links apart by 20px then vise-versa for nav2. Ifyou view your document in your browser you should see your lists active. Now lets add ourwebsite title and slogan, add the following code inside your "site-title" DIV.

yourwordpress "your wordpressslogan here"

First we wrap out website title and slogan inside a H1 tag, because one of our words is blue inour 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 addanother span class. A span class of slogan. Now we can style the word "wordpress" and thewhole slogan sentance though css. You could just use an image but why mess about with imageswhen 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;


23/51

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 tothe 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 initalic and bold, then the font size is a nice big 24px. Then we had a span class of "blue-title" whichwas 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 asmaller 12px. The slogan will also inherit the H1 tags uppercase and font weight style so we justset the slogan style to normal and none. Thats our title and slogan out the way now for our searchfield, add the following code to your search DIV.

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 gobutton 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 {background-color: #494949;border: 1px solid #666666;color: #FFFFFF;padding: 2px;

}


24/51

.search-button:hover {background-color: #707070;

}

We set our main search DIV to float right with the same top padding as our website title. Oursearch field had a class of "search-field" in this style we add a 10px right margin will push the gobutton over by 10px, we set 4px padding all the way around the search field. The search field hasa 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 searchbutton has a class of "search-button" and has the same styles as the search field part from thepadding is 2px and it has no margin. The last style is optional really, i always find its better tohave a hover effect on buttons. We just want the color of the go button to change slightly oncehovered over it. Test your HTML document to reveal the search field iin action. Obviously itdoesnt work yet. The next part we need to create is our navigation, we mock this up like this.

HomePage #1Page #2Page #3Page #4Page #5Page #6Page #7Page #8Page #9

Inside our navigation DIV we add a simple unordered list and within that unordered list i have 10links. You might not get 10 links across if the words are longer. Ive just done page 1 - 9 for anexample, 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 becreating 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;


25/51

float: left;}

.nav_links a {text-decoration: none;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);background-repeat: repeat-x;

}

Our first style is our navigation DIV, it has a height of 42px which is the height of the actuallnavigation in photoshop. The navigation is floated left and is 900px wide. The unordered list hasno margin or padding, the list has no list style, this removes the bullet points from the list, itsfloated left and is displayed as a block. All the navigation links have no text decoration, 15pxpadding at the top. The links also have two identical padding of 17px. If your pages have longerwords then you might want to reduce the size of the padding. Next up is our class "withdiv" thisclass basically place a small divider to the left of each link, we'll be creating the divider inmoment. Finally the navigation hover, when we mouse over each button or link we want the textto 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 PSDFILE, and make a selection like this.

Goto "image > crop" then save the file as "nav_divider.PNG" into your images folder. Next createa new document 200x43 pixels. You need to create an image like the image below.


26/51

The image above is exactly the same as our blue bar at the very top of our website you can referto our PSD file for the layer styles. Once you've replicated the image above make a 2 pixel wideselection and crop it. Save the file as "nav_hover.PNG" save the file into the images folder. Testyour HTML file in your browser to see if it works. You should have a working navigation with anice hover, just make sure all the hovers look the way there surposed to. Now its time for ourcontent, 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 thebackground layer and the content box in which our wordpress posts will be. Double click yourpost 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 borderin CSS it will overlap our white line and it wont be visable. Now we have a 2 pixel line so theborder will cover up the 1st 1 pixel white border on our content box background image, leavingthe 2nd white border visable. Make a selection like this.


27/51

Only select the rectangle dont include the stroke on the box, we'll be adding the border throughCSS. Flattern your PSD file then goto"image > crop" save the image as "post_bg.PNG" Doexactly the same to the sidebar image, the sidebar image should be 280px wide. and the sameheight as the "post_bg.PNG" save the sidebar image as "sidebar_bg.PNG" You should have two

images like this.


28/51

We mockup our content area like this.

We'll be doing the left content first, the HTML looks like this.

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 40pxpadding. The reason why we added the 40px padding instead of margin was because for somereason in Internet Explorer the content seemed to sit on top of the footer. Adding a 40px paddingto the bottom instead of a margin seemed to fix it. The content left DIV will be the container whichholds our posts. We have to make the box 602px wide as we'll be adding a border to the box, aleft and right border makes up an extra 2px, 1px each side. Again we float it left. Now we need tostart mocking up what our dummy post will look like. The code looks like this.


29/51

This is a post title...

Posted on 25/03/2009 By "admin"

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum hasbeen the industry's standard dummy text ever since the 1500s, when an unknown printer took agalley of type and scrambled it to make a type specimen book. It has survived not only fivecenturies, but also the leap into electronic typesetting, remaining essentially unchanged.

Inside our content-left DIV we have a number of classes. (remember DIV's should be unique andnever repeated. Classes can be repeated as often as you like). The code above starting from theclass "a-post" will be repeated everytime you make a post in the wordpress theme, so itsimportant to use classes not DIV's. The first class is "a-post" this will be the box which holds ourbackground 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 thenhave "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);background-repeat: no-repeat;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;


30/51

padding: 5px;float: left;

}

.post-img {float: left;height: 198px;width: 234px;margin-right: 10px;

}

.post-title {float: left;width: 336px;margin-bottom: 10px;

}

.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 abackground 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 whichthen 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 bluefont then we use line height of 34px to space the title out abit. For every image in a post we wanta nice little border, so we add a class for all images in "a-post img". We then give each thumbnailits own container "post-img" the width and height set in these styles matches my thumbnail whichi created in the PSD file. We then space out the thumbnail by giving it a margin to the right of10px, 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 inyour 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 sidebarwhich looks like this.


31/51

class="side-bar-ads" />

Some Text

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum hasbeen the industry's standard dummy text ever since the 1500s, when an unknown printer took agalley of type and scrambled it to make a type specimen book.

CategoriesCategorie #1Categorie #2Categorie #3Categorie #4Categorie #5

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" classholds our content, each bit of content is contained within the "side-bar-content" class. Think ofeach element in your sidebar as a seperate item, so for example you have 4 125x125px ads atthe top thats one item, then you have your categories thats another item and so on and so forth. Ifyou look at the code above you can easily look at it and determine what each item is. The CSSfor 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);background-repeat: no-repeat;padding: 10px;

}

.side-bar-content {width: 260px;float: left;

margin-bottom: 20px;}

.side-bar-ads {margin-left: 3px;margin-bottom: 3px;

}

.side-bar h1{color: #309DCF;


32/51

font-size: 20px;font-weight: bolder;line-height: 24px;

}

.side-bar p {text-align: justify;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 wecreated in photoshop. The styles are pretty much similar to our post styles. We then have a classof "side-bar-content" this is our little container for each sidebar item. We then have a few classeswhich 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 inour sidebar or paragraphs then these would be styled though the "side-bar p" style. Then finallywe have our "side-bar li" style which we'll use for any lists that we have in our sidebar. You cango ahead and test your template in your browser. Everything should be in order, you may need tocopy the "ad image" from the images folder from my template unless you create your own. Finallywe need to mockup our footer which looks like this.

mywordpress "Your fancy wordpress slogan here"

Copyright mywordpress.co.uk | All Rights Reserved
Design By HV-Designs.co.uk

Make sure you add your footer outside of the container DIV as we want our footer to span acrossthe browser just like our header and top-bar does. We first add a DIV of footer and a DIV offooter-topbar this will be our footer container DIV a DIV for our topbar pretty much similar to ourheader and top-bar. We then add another DIV which will be for some copyright text so we add aDIV of "footer-content". We need to make a background for our footer, we do this in the sameway as we did when we created the top half of our template. You need to make a 2 px selection


33/51

of your footer background in your PSD file. Then the image will be repeated through CSS. TheCSS for our footer looks like this.

#footer {background-image: url(images/footer_bg.png);background-repeat: repeat-x;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 toclear 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 matchesthe 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 aswhen we created the website title. The copyright text is put inside the DIV "footer-content" andstyled through a P tag. All thats left to do now is style our default H tags for headers that aintstyled through another DIV, and also we need to style our links.


34/51

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;text-decoration: none;

}a:visited {

text-decoration: none;color: #309DCF;

}a:hover {

text-decoration: none;color: #333333;

}

a:active {text-decoration: none;color: #309DCF;

}

All done, hope you enjoyed this tutorial, sorry its so long, to be honest it could of been longer if iwent into more detail. In the next tutorial we'll be converting it into wordpress. Dont forget tosubscribe via RSS & twitter. You can also share my tutorials by using the "share & enjoy" buttonsat 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 thetheme 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 andinternet load times. Your also going to need a theme by "elliot jay stocks" called "starkers". Thetheme is a completely naked theme, its been stripped of all its CSS and HTML, basically givingyou a blank wordpress canvas to work on, its ideal for wordpress developers to start from. Thetheme uses files from wordpress 2.6.2. But this doesnt mean its not going to work with the latestwordpress software, i started with the exact same theme to build my hv-designs website and


35/51

thats running in wordpress 2.7. If your thinking "bummer i wanted threaded comments" well youcan easily grab a 2.7 comments file and replace it. Hopefully "elliot jay stocks" will release anaked 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 alsochange the screenshot if you wish.

In your stalkers theme there is a folder called "style" inside this folder are some additional CSSfiles for IE hacks, typography and reset files. You dont really need this folder so if you want to youcan delete it, but keep it by all means if you wish to keep it. Open up the "style.css" file in themain "mywordpress" theme directory. Once its open you'll be greeted with this.

/*Theme Name: StarkersTheme URI: http://elliotjaystocks.comDescription: The totally nude Wordpress theme. Phwoar! (Based on the famous Kubrick by Michael Heilemann)Version: 2 (WP2.6.2)Author: Elliot Jay StocksAuthor URI: http://elliotjaystocks.comTags: 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, descriptionetc... Mine looks like this.


36/51

[sourcecode language='css']/*Theme Name: MyWordpressTheme URI: http://www.hv-designs.co.ukDescription: A wordpress themeVersion: 1Author: Richard Carpenter*/[/sourcecode]

Save your .CSS file when you load up the theme in wordpress under the appreance tab you'l nowsee this.

If you havent changed your image you should see a wooden naked body. Which was the orginalstarkers 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 thingwe can do is remove all the code from the TITLE tag at the top of document.


37/51

} else {echo wp_title('');}?>

Once you've deleted the php from the title tag, just replace it with what ever you want to display atthe top of the browser.

>

Next still inside the header.php file at the very bottom delete everything underneath the body tagyour header.php document should look like this.


38/51

All the content we add now will be pasted in underneath the body tag. Copy your images folderfrom your CSS templates directory and paste it into the themes directory. Open up yourindex.html file from your CSS template. Copy everything from the opening "container DIV" to theending "navigation DIV". Paste it underneath the body tag. Save your header.php file, if youcheck 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. Onour navigation we have a list that we created page #1, page #2, page #3 etc... well we wantwordpress to add our pages dynamically when we goto add page in our admin panel. To do thiswe change our navigation to look like this.

Home

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 theone line off php wrapped in out LI tag. The php basically gets your wordpress pages from the


39/51

database and displays them in page order. If you only had say one wordpress page and loads ofexternal pages you wanted to use then just add another page underneath like this.

HomeExternal Page

You can have as many as you like within reason, anything that overflows the 900px navigationwill 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.

[/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 searchform and looks like this.

[sourcecode language='php']


40/51

Then there a line of PHP code underneath the P tag which says.

This displays the content of the post, and when you use the wordpress more tag to cut off yourposts the text "read the rest of this entry" is displayed. Then finally we have another P tag.

Posted in |

This PHP displays the tags if there any for the post, it displays what catergorie the post wasposted in and shows how many comments were made on the posts. Now we need to jumble allthis PHP around so it displays the way we want, like our CSS template. Firstly we need to copyand paste a couple of DIV tags in there from our CSS template. The 1st two DIV tags we need toadd are DIV ID content and DIV ID content-left. We add these two DIV's at the very topunderneath GET HEADER.

Then at the very bottom of our page above GET SIDEBAR we need to end our content left DIV.

Now we need to add our "a-post" class to the document we add this just above div class post andend it underneath the PHP code containing the tags and number of comments etc...


41/51

We now need to start sorting through the PHP code and get rid of what we dont want to bedisplayed. At the very bottom around line 34 you should see.

This line will display a search field when a post cant be found, we have a search field in ourheader already so we dont really need a 2nd one. Delete the one line of code. Scroll up to thePHP code which contains the post tags and amount of comments.

Posted in |

On our main page we dont really need the tags, or the edit post link, so the delete these two lines.

Your code should now look like this.

Posted in |

We now need to start copying and pasting our post classes over to our theme. The first one weneed to copy over will be for our thumbnail code. Copy the class "post-img" from our CSStemplate, paste it underneath the "div class post". The code looks like this.


42/51

Our index.php all in all should now look like this.


43/51

Posted in |

We want to delete the first chunk which basically says "posted in and then some php code". Wedont really need this bit. So the code would look like this after its been deleted.

We then need to delete the starting P tag and ending P tag from the code above, then cut thePHP code and paste it into the post title class next to the PHP code for the time and date.


44/51

mywordpress "Your fancy wordpress slogan here"

Copyright mywordpress.co.uk | All Rights Reserved
Design By HV-Designs.co.uk

Paste it into your footer.php file, save and exit. Refresh your theme in your browser to see thechanges. The footer is as easy as that. The theme is nearly complete we just need to tweak a fewmore 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.

At the very bottom above the "get sidebar php" code add.

Your "page.php" code should now look like this.


45/51

If you check a page on your theme it should now be wrapped in a box like we used for our mainposts in the index.php file. This wont be the first time you'll reuse the code, we can use the samecode in our search.php file which displays our search results within our wordpress theme, whichbrings me to our next file. Open up your index.php file and goto "file > save as" save theindex.php as "search.php" overwrite the existing file. All done, when you search using the searchfield in the header, the search results will be displayed the same as our posts. Obvisouly you canmake 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.

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 thesidebar 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 justdisplayed in a different way. You can make your archives page look the same as your searchpage 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 ourCSS template.

Error 404 - Not Found

Theres only two more files left to edit then your theme is complete. Ive left these two files till lastbecause they are sometime abit fiddley. Open up your "single.php" file underneath the "get

header php code" add the post classes.


46/51

Scroll down to the very bottom above the "get footer code" add the two ending DIV's. The sidebaris not included in the single.php file so we need to add it manually. Underneath the two endingDIV's add the get sidebar php code.

Load up your theme in the browser and check what your post pages look like. Look ok, thecomments 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.


47/51

Notice the "columns" are set to 100%, thats where our problem lies. Remove the "%" and changeto 70. It should now look like this.

Test the changes in your browser, the text area is now a snug fit my end. Our next problems lie'swith our text input fields, there is a quick fix for these. At the begining of each form field add the Ptag then at the end add the ending P tag.


48/51

Says:

Your comment is awaiting moderation.


49/51

Says:

Your comment is awaiting moderation.


50/51

So when were in wordpress and we make a post instead of inserting it into the actual post wegoto 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 willbe available within a drop down box.

Finally The End


51/51

The end, you should now have a working wordpress theme from a PSD file we created a coupleof 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. Thereis loads of documentation over at wordpress.org to help you with certain things if you ever getstuck. Id also suggest downloading a wordpress cheat sheet, someone made one a while backbut i dont have the link. Also diving into wordpress can be a right pain and i can safely say it willpiss you off big time. You've just got to work at it and work at it, another thing id suggest is tomake and code each file before you start the wordpress side of coding, that way most of the hardwork would of been done, it will just be a case of sifting through the loops. Il try to make a couplemore wordpress tutorials in the near future. Any questions just ask. See you next time.

psd to css to wp

Documents