Turning a PSD into Wordpress
September 17, 2010 7:47 AM   Subscribe

I have the PSD, I have average knowledge of Photoshop, PHP, CSS & HTML and I have a Wordpress blog. What advice can you give me on making my blog look like the PSD?

I need to modify a wordpress 3.0 theme (TwentyTen preferably) to use a design I have in a PSD. I'm not an expert but over past few months I have built a page from scratch using a PSD, CSS & HTML (no tables). I have also built simple web applications using PHP & MySql (my background is in databases). The PSD design is not especially complicated, and I won't need javascript or jQuery or anything like that.

What do I need to know to pull these things together in Wordpress? This post has some useful information but is there anything specific I need to know to make this easier? Any web resources or tutorials to guide me through this particular task?
posted by jontyjago to Computers & Internet (14 answers total) 5 users marked this as a favorite
 
Designing something in Photoshop is a completely different thing than designing a website. You may as well ask how to make Wordpress look like the sketch you did on a legal pad.

You simply must re-design with the web in mind, which includes making considerations for various font sizes, browser inconsistencies, reflowing of content, image alignment, etc. There are dozens of projects designed to make this easier. One such is the Yahoo YUI library.
posted by odinsdream at 7:55 AM on September 17, 2010


Just to clarify - the PSD I have has been made by a professional designer, and it is the design for the homepage of the blog.
posted by jontyjago at 8:03 AM on September 17, 2010


Use a PSD to WordPress service.
posted by elle.jeezy at 8:24 AM on September 17, 2010


This is actually a pretty involved process. I suggest going to Tuts+, pay the $9 monthly premium membership and get the Photoshop to Wordpress tutorial. This is the best and cheapest walk through I've found of the steps you'll have to take to do this.

Other than that I would suggest trying to hire a coder off of Craigslist or something.
posted by dozo at 8:25 AM on September 17, 2010


If you would like a referral to the MeFi member who provides this service to me in preference to PSD to WordPress, please MeMail me.
posted by DarlingBri at 8:39 AM on September 17, 2010


Whilst I appreciate the comments I'm not looking to pay someone to do this - I know some CSS, HTML and PHP and I want to do it myself. I'll check Tuts+ and something like this may be worth investing in.
posted by jontyjago at 8:46 AM on September 17, 2010


Depends how important these things are:
  1. pixel-perfection
  2. cross-browser compatibility
  3. your free time

posted by Civil_Disobedient at 9:13 AM on September 17, 2010


Just to clarify - the PSD I have has been made by a professional designer, and it is the design for the homepage of the blog.

To clarify further, the PSD is the "design for the homepage" in the same way that a storyboard is a "design for a movie".

It's a step on the design process to a functional webpage, and it's definitely not the step right before the finished webpage. It's more like:

Step 1: Have designer create idea in Photoshop.
Steps 2 - 40: Everything web designers do.
Step 41: Finished Website.
posted by odinsdream at 9:17 AM on September 17, 2010


There are two 3 part series' on CSS Tricks that might help you out:

Video Screencasts on CSS Tricks. Episodes 1, 2, 3 and 12,13,14 are the ones you are after. He has some Wordpress specific stuff too, but hopefully those help.
posted by backwards guitar at 10:13 AM on September 17, 2010


This tutorial might be helpful.
posted by lovecrafty at 11:26 AM on September 17, 2010


There are 10 billion free Wordpress templates. Chances are, one of them looks kinda like your design. Once you find that one, you should be able to replace images and play with colors in the CSS to get close to your PSD.

Getting the rest of the way could take some real trial and error, though -- people get paid to do things like this because it takes some specialized knowledge.
posted by coolguymichael at 12:20 PM on September 17, 2010


Some good advice above. I''ll try and provide something slightly different.

I would probably just make my own theme rather than trying to manipulate one that's already written, though definitely refer to it and steal lots of code. It's a great way to make sure you're including all the relevant php files. I did have a great checklist, but I'm not at my computer right now. Here's something that looks comprehensive from the Wordpress site.

One useful workflow can be to just make a normal static HTML page of your design. Then you can replace [title]Sample Title 1[/title] with [title][?php wp_title(); ?][/title] etc, and split it up into header.php, footer.php etc.

The Wordpress Codex is usually very good. If you search for a template tag then there'll probably be a decent page with useful examples. There are also great overview pages like this.

If there's something you want to do with your design that seems a bit complicated, don't be afraid to look into plugins. You can do almost anything inside the theme, but it may be time-saving to use some functionality someone else has done.

Have fun! It's really rewarding.
posted by Magnakai at 3:02 PM on September 17, 2010 [2 favorites]


I do this quite often, I usually find an existing free wordpress theme that is closest in general shape and layout to the design I am looking to build. Install that theme, and create your own by editing the CSS file for that theme, which is usually called style.css and found in this directory: /wp-content/themes/[themename]

I would say 90-95% of the work is done in that single CSS file. Editing the PHP files isn't usually necessary if you can find a theme that already similar to what you're going for. Having Firebug or Safari's inspector or some other handy browser function that will tell you EXACTLY what style is affecting what is an absolute must. The css file is often well over a thousand lines and you do not want to do trial and error. Also depending on how well the theme is coded there may be several styles that need to be changed to do something simple (such as adjusting the width of a column).

If you do need to edit PHP files, I try to copy code from another file whenever possible to do what I need. Usually I only end up editing header.php or footer.php which are found in that same directory.

The back end of Wordpress allows you to change somethings as well, although that will vary depending on the theme. Plug Ins are huge time-savers as well.
posted by alhadro at 5:54 PM on September 17, 2010


I ended up doing a mix of what alhadro and Magankai suggested. Using Firebug, I hacked the twentyten theme css which was close enough to the design to be able to use. It's not quite ready, but will be posted to Projects in the not too distant future! Thanks!
posted by jontyjago at 6:27 PM on September 18, 2010


« Older Help my daughter choose a school   |   Clogged Toilet Question Newer »
This thread is closed to new comments.