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?
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?
Best answer: 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
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
posted by DarlingBri at 8:39 AM on September 17, 2010
Response by poster: 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
posted by jontyjago at 8:46 AM on September 17, 2010
Depends how important these things are:
posted by Civil_Disobedient at 9:13 AM on September 17, 2010
- pixel-perfection
- cross-browser compatibility
- your free time
posted by Civil_Disobedient at 9:13 AM on September 17, 2010
Best answer: 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
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
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
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
Best answer: 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 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]
Best answer: 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 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
Response by poster: 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
posted by jontyjago at 6:27 PM on September 18, 2010
This thread is closed to new comments.
posted by jontyjago at 8:03 AM on September 17, 2010