Since I began running Nettuts+ nearly a year ago, the number one tutorial request I’ve received is for a PSD to WordPress screencast. Today, we’re releasing a complete series on our Premium site. Over the course of fourteen videos, I will personally teach you how to take a PSD design and convert first to HTML, and then to a dynamic WordPress site. This was a massive undertaking; I hope you’ll consider signing up if it interests you.
Our Goal
Take a somewhat simple blog design and turn it from a PSD into a dynamic WordPress website.
Lesson Overview
- Intro – (3:53)
- Slicing the PSD – (16:32)
- Coding the HTML – (3:53)
- The CSS – (55:52)
- Installing WordPress / Working on the Server – (24:57)
- WordPress Header – (9:17)
- From Static to Dynamic – (12:04)
- Search / Sidebar – – (8:53)
- Sidebar Widgets – (9:47)
- Revising the CSS – (37:21)
- Single Page Template – (4:44)
- Comments – (10:26)
- The Page Template – (5:15)
- Finishing Up – (16:54)
Is This Series For Me?
If you can answer yes to any of the following, this series should help a great deal.
- I have zero experience with WordPress, but have some PHP knowledge.
- I have some CSS and HTML knowledge, but still struggle when converting a PSD
- I’ve never sliced a PSD before.
- I’ve used WordPress, but have never created a theme for it.
- My CSS skills are rusty.
Join Tuts Premium
For those unfamiliar, the family of TUTS sites runs a premium membership service called “Premium”. For $19 per month, you gain access to exclusive premium tutorials, screencasts, and freebies at nettuts+, psdtuts+, and vectortuts+! For the price of a pizza, you’ll learn from some of the best minds in the business. Join today!
- Subscribe to the NETTUTS RSS Feed for more daily web development tuts and articles.
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By Jeffrey Way
Getting Good with JavaScript
Learn how to liven up your webpages, from start to finish. Veteran Nettuts+ author Andrew Burgess helps you Get Good with JavaScript.
Join our newsletter!
UberMenu - WordPress Mega Me ... only $16.00 
RoyalSlider – Touch-Enable ... only $12.00 
Kult House - More
Web Basix
Just getting started? Start with our basix tutorials on the fundamentals. View All Basix Tutorials
Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Nettuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
Ive got the tuts plus suscription and i fucking love it, i learned so much on this video, I also can submit a theme on ThemeForest!! Thank Guys
This is so great, I think you’ve just made me a +member. 9$/month is ridiculous for what you get here. can’t believe it. so awesome :)
Hello i have made my front page a “static page” and have added at the bottom so you are able to submit comments on the front page of my blog but when you hit submit it just goes to a blank page of wp-comments-post.php ?? when i switch back to the default theme i notice i will submit the comments but links to the blog page where the posts are but when i got back to the home page of the default theme it works… but when i am on my custom theme it does not work. Help?? lol
how do i download this? i just registered for a 3 month membership
hi guys, I downloaded this and the 3rd file is damage I can’t zip it. I downloaded the 3rd file many times but its still damage. Please help me guys!
REQUEST:
Please integrate more payment methods for subscription. Some people (like me) do not have Paypal in their region.
It’d be quite helpful to have VISA here.
Hi Jeffery would first like to say thank you for this truly great tutorial its really opened me up to new and better ways to put designs together as well as enhanced my knowledge of coding which for a beginner is such a +.
I wanted to ask I followed everything in the tutorial several times and the only thing that isn’t working for me is the custom image display in the post and getting it to display dynamically.
This was last piece of code offered in part 13 the last section:
<img src="” alt=” /> and I added it to the index.php file but when I loaded it nothing happens, I also uploaded images back in my admin panel in wordpress but all I’m getting is no image and a repeat of the title where the image would normally show up, is there something that I may be missing?
Thank you so much and sorry for the long comment ;O)
Hey Jeff found my answer its always right under your nose…
Jeff, this is a great tutorial! very helpful.
I have a quick question about your navigation. Can you edit the css so that the nav icons become the button as well as the text? I tried using the display: block tag you used on the logo, but couldn’t get it to work for me. I’d like my icons to act as the links as well as the text.
here is the temp site i’m trying to accomplish this on.
http://www.philipdesignlab.com
I’d appreciate any help!
thanks
This is really helpful to learn wordpress. Thanks for posting this tutoria. :)
PHEW! That was one exhaustive tutorial! I just finished it…awesome. A lot of new info is now crammed into my brain lol
Thanks for watching! :)
I have to say, even though I normally create my own themes and convert other peoples designs over to WordPress – - I actually learned some new and interesting things. Thank you!
Just goes to show, you may think you know it all but eventually you’ll learn yah don’t.
This is really helpful to newbie like me…
hi, how can i contac you? i have some html psd and html knowlegde but nothing about php, could this tuto help me, anyway?
Yep! this has just converted me into a premium member, ill be joining in a few weekes ;)
Thanks so so so much!
I signed up for the premium service to get the PSD to HTML Video series and I can’t find them. All I can find is a PDF for $29 dollars. Can someone direct me to the link to the PSD to HTML Video series
Thanks!
Wow awesome post. I really love it and I am glad that I found this site. I am been working with the development team converting from psd to wordpress. I will add you anyway in my google feed reader. I hope to hear from you.
Just signed up because of this tutorial. Where are the videos/files? I sign in and nothing. search doesn’t pull it up either.
You can download it here in 3 parts Login press Premium Content button search psd to wordpress
you´ll get with and without PSD
i too have have just joined to see this tut Where are the video files????
HI GUYS…I CANT BE PREMIUM USER BUT I WANT TO LEARN:(
PLEASE ANYONE CAN SEND ME THIS VIDEO TUTORIAL ?:(
OR UPLOAD RAPIDSHARE? PLEASE…I NEED:( THANKS I WILL WAIT
I’m sorry my brother…it would be really unfair to do something like that. It’s ONLY $9.00 and you want people to do such a thing for you. Trust me, you should just pay the premium price…YOU won’t be disappointed. You see, I’m only 16 years old and I’m currently making thousands of dollars doing web design for people…I didn’t learn web designing here, but instead this whole site has helped me a lot and I’ve learned most of UI design on this website…Hope you take my word into consideration. Thanks!
hi, coul you say please, where you learned web design and how to get job , i know a little about html and css but i would like to earn money with web design.
Thanks a lot.
Hi,
Is possible to send your design and get converted to WordPress, PSD TO WORDPRESS code your design to a WordPress Theme.
The website is http://www.psdtowordpress.eu
They do cross-browser compatible valid WordPress Theme and they offer a Non Disclosure Agreement (NDA) for all customers.
Hope it’s useful :-)
Go to http://codehunterbd.wordpress.com to see the best tutorial.
This is such a nice tutorial! Hopefully, when I finished my own custom wordpress theme, it will be as awesome as yours in the screenshot!
This is really helpful to learn wordpress.Is not easy to convert a psd to wordpress ,I found an article similar to this post to learn how to convert a psd to wordpress :
http://depotwebdesigner.com/tutorials/8-great-tutorials-on-how-to-build-a-custom-wordpress-theme.html
Hi!
can anyone tell me how it works, can you download movies after premium subscription? or you just watch them online during subscription period?
thanks
Will this tutorial be put onto the tutorial marketplace?
Very interesting tutorial about Pst, Html and WordPress Design Skills, I think I need it, too.
Great job on your site guys. What template is this if you dont mind me asking? I looked for a contact page and couldnt find it. Thanks, John
Hi – Does this Tutorial cover WordPress 3.0 ?
Thanks for such a interesting post…
Really nice one ! Thanks :)
http://www.therofldaily.com
The tutorial was great and i was able to achieve my dream site design. I have learnt so much from this tutorial.
This tutorial is really helpful me..
I really love it..Very helpful..
Is this tut still useful for designing themes for the current WP version 3.1.1?
Thanks!
Where can I buy the PSD that is displayed in the pics?
Can anyone give me the link?
Hey Jeff,
I just watched this videos, fantastic series. A lot of information packed in these videos. Thanks for that!
I’ve got a question for you, I am looking for a website template for my company, we are going to be starting a blog site as a “Community” type deal.
I created my own site in photoshop, but I don’t know everything there is to know about html and css so it’s tough to code it. So I decided to try and find one I liked, I have been looking on Themeforest for a wordpress template, but have yet to find anything I liked. They all seem to have a big slider on the front, which is not what I want.
I want something subtle, such as the net+ website, easy to navigate, understand, and everything is right there with no flashy slider.
Any advice? I’d love to use the template I created, but the coding is a bit much for someone who doesn’t know everything there is to know.
Thanks,
Jon
Heya, one question :
If starting to get through all this, PSD -> Wp would it actually be better to use Grid with 12 / 24 cols or just use the styles in each and every divs in sides?
Can Grid make it easier ?
I am logged in, the videos aren’t available and there is no download link. How can I watch this?
Amazing work… Thank you somuch for your “The Best PSD to HTML to WordPress Video”
This is an awesome tutorial. Can be used for training teams.
Thank you Jeffery Way!
I just finished up this series and after attempting several other ones including ones that use starter themes, this is the one where I actually understood what the heck was going on. Thanks for so much detail and explanation. I feel like I can make another one all on my own now.
I used codex to learn how to use wp_nav_menus() instead of wp_list_pages() and set up the dashboard to let me add a class to each menu item so now I can use classes (home, about, contact) in my css rather than looking for the post-item-xx . It’ll come in handy for a design that has room for more nav items or for adding another nav menu somewhere on the page.
Had only one issue. Apparently WP no longer supports custom fields on posts and it put the image inside a p tag which of course pushed everything over 230px. I had to absolute position the image to get it in the right place. So I think it would be better to use a div and the img url and not rely on wordpress for the thumbnail. Unless someone can tell me how to stop wordpress from putting a p tag around it.
Thanks again! Now on to the plugin tutorials!
Is there a forum for discussion on this tutorial. I’m finding that there are many anomalies in the tutorial that are making it difficult to follow along. Here is one instance that I have documented that has brought me to a stand still. It’s dealing with the logo not displaying properly. Please follow this link for all of the screen shots and documentation.
http://picr.clarify-it.com/d/vy9akm
I am a TutsPlus paying member.
Thanks,
Matt