Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

WordPress

Posted by Praveen Selvasekaran
Praveen Selvasekaran
9,847 Points

Converting a PSD to WordPress Theme

Hi

I need to convert a PSD into a functional WP theme , I have completed the Complete wordpress track on TTH also. any ideas/steps on doing the above would be cool. thanks.

Praveen

4 Answers

Praveen Selvasekaran
Praveen Selvasekaran
9,847 Points

Thanks folks , I will take the following route :

1.Convert the PSD to HTML/CSS 2.Use Underscores starter theme to build the WP theme.

  1. Implement slider, Widget functionality in the backend.
  2. Test with WP Unit test data.

Have a good happy new year !!

Lauren Clark
Lauren Clark
33,155 Points
Lauren Clark
Lauren Clark
33,155 Points

I'd just go ahead and start building the website in html & css - split all your sections out (header, main, footer, sidebar etc) and then look at how you want certain pages and posts to look and behave. Is there a plugin you can use? Do you want to widgetize an area, or do you want to code something in manually?

I usually make notes as I'm building the basics of how I want things to play out, and research different ways of doing it as I'm building the foundations. Then you can work through each feature in sprints.

Also, if it's for another person who wishes to use the CMS facility once the site is deployed, and they have little coding knowledge, it's sometimes best to make an admin section in the back end, for changing fonts from a pre-determined list or sizes of paragraphs and header text. Things like sliders, galleries etc will need to be easily updated from the backend too in this scenario.

danielcroft
danielcroft
7,438 Points
danielcroft
danielcroft
7,438 Points

This may help https://tutsplus.com/tutorial/converting-a-psd-to-wordpress-in-4-steps/

Matt Campbell
Matt Campbell
9,767 Points
Matt Campbell
Matt Campbell
9,767 Points

Start with the basic theme files, header, index and footer. Put in your main containers and then start at the top and work your way down the PSD.