Member Avatar for nufftalon

I want to learn how to create my own wordpress themes from client's psd files. Is there an online course someone can recommend where I can learn the proper way of doing this. I mean creating a wordpress theme from scratch. I know there different frameworks need to know the best way in going about this. I had to turn down some jobs recently because I work with pre-exisiting themeforest templates only.

  • 6 Contributors
  • 20 Replies
  • 491 Views
  • 7 Months Discussion Span
  • Latest Post Latest Post by jenniferjudy2
Member Avatar for <M/>

Making a wp theme from a psd is fairly easy, maybe a bit easier than you would expect.

Here are some:
http://themetation.com/2008/07/14/how-to-create-wordpress-themes-from-scratch-part-1/

http://code.tutsplus.com/series/adaptive-blog-theme-from-photoshop-to-wordpress--wp-28964

http://psdtohtmltuts.com/category/html-to-wordpress-tutorials/

http://code.tutsplus.com/tutorials/from-psd-to-html-building-a-set-of-website-designs-step-by-step--net-37

This one is premium but the reviews for it is very positive and has a lot to offer:
http://css-tricks.com/lodge/

There are many other awesome ones. I know lynda.com has something available but they are premium as well.

Here is the lynda.com one, like css-tricks, it is worth the money:
http://www.lynda.com/WordPress-3-tutorials/creating-and-editing-custom-themes/67160-2.html

Also, converting a psd to wp is easy... simply look at it this way: psd to html(5) website to wordpress... maybe that would make finding resources/solutions easier :)

If these links didn't help, feel free to Google for some more.

Hope that helped!

Member Avatar for nufftalon

awesome! really appreciate you taking the time to put this together for me. Gonna check them all out.

Member Avatar for <M/>

Alright, have fun! Do you have any more questions?

Member Avatar for nufftalon

not as of yet no I may have some after watching these if anything is unclear. One thing I would say is what framework do you use personally? Genesis framework, ultimatum framework? Or does one just use a default wordpress 2014 theme or something similar? I hope that makes sense.

Member Avatar for <M/>

I don't use frameworks to often but one that I recently trie out was the Pagelines framework. that was pretty good and had several features to it but was premium.

Member Avatar for nufftalon

Recently I got this email from a client

We currently have a job for a psd to wordpress theme site responsive with a parallax homepage and blog. There will be interior pages but we will not need a custom design.

I attached an example of what the client showed me.
http://i.imgur.com/kmfGmkP.jpg

Edited by nufftalon
Member Avatar for <M/>

Okay... so you need a framework that offers responsive yet a parallax feature (blog is an obvious plus)? Btw, that is a nice layout/design.

Member Avatar for <M/>
Edited by <M/>
Member Avatar for nufftalon

Thanks gonna be a busy weekend looking over everything haha. I will be prepared next time I hate turning down jobs:) I was wondering as it pertains to that layout I showed at the bottom. How would I go about doing the part where you select different people and the people become the shaded roll over state?

Edited by nufftalon
Member Avatar for iamthwee

That would be somewhat difficult... it has not got much to do with wordpress, more html and css skills.

PSD to wordpress can be a bit of a ballache... Somehow I've got work by ripping off a vanilla theme on themeforest to create the website. Most clients don't want fancy things, just a block site with their logo.

Your criteria is somewhat different, especially if they want those crazy hover overs that turn the people orange - add is responsive. That's a lot of work there.

If the client is adamant they want that effect, I would start off with a wordpress theme called 'starkers.' It's your bare minimum no nonsense theme.

Stay away from all those other themes like genesis, it's pure crapola. And not worth the money.

There's a little plugin called 'options tree' for wordpress. It's pretty much all you need for making your own backend.

Use a responsive css framework like 'skeleton' or twitter bootstrap. Perhaps skeleton is better because it won't be so bloated.

In my opinion building a theme like this will take you at least 4-5 months, that's getting to grips with wordpress and how you pull the info from the database.

Like I said, your absolute best/cost effective solution, would be to grab a vanilla theme of themeforest for around $50.00, which is well worth the money as most of these themes come with built in portfolios, fancy sliders and page builders.

Then it is just a case of convincing your client the fancy stuff isn't needed. Doing this, you can reuse the theme perhaps several times over, just adding a different logo and colour themes for different clients, although this is breaking the licensing terms but most authors don't care to police that, they are more concerned at people selling pirated copies of their theme.

^^But I guess you already know this about themeforest.

Edited by iamthwee
commented: you got a point +10
Member Avatar for <M/>

See if this helps:
HTML:

<div id="main">Main
<div id="a">a</div>
<div id="b">b</div>
<div id="c">c</div>
</div>

CSS:

#main:hover > #a {
    background-color: green;
}
#main:hover > #b {
    background-color: green;
}
#main:hover > #c {
    background-color: green;
}
Member Avatar for nufftalon

Thanks "<M/>"I will do some tests on that code snippet.

"iamthwee" Awesome I will check out the vanilla theme. My background is basically I can code a site from scratch with html and css I am familair with mobile query to make a page responsive. Before wordpress I made flash websites, and I made html/css from photoshop layouts I created.

Normally nowadays what I do is use a theme such as enfold or avada. Majority is enfold and just change the css and tweak things here and there.

Here are some examples of sites I tweaked

Enfold Theme
http://kaysvilleclinic.com/

Avada Theme
http://www.myprotronix.com/

Avada Theme
http://www.mabridalplus.com/

Ok so basically a quick and dirty way would be to find a theme that has the features as it pertains to the psd the client gives me and what they want? Then hide any traces I used a theme from the client?

Database wise I am familiar with getting around in phpmyadmin wptables I can understand why you say it owuld take 4-5 months because I would need to learn the pre exisiting wordpress code as it pertains to php to pull queries from the database itsself such as taxonmony and all that stuff?

Well this gives me alot to think about haha. Trying to develop a strong workflow for when a project such as this one presents itself again.

Edited by nufftalon
Member Avatar for iamthwee

If you build the theme from scratch you will have ultimate control, but it might not be cost effective.

Looking at your current template the best theme available that more or less does what you need it to do is probably:

http://themeforest.net/item/hazel-multiconcept-creative-wordpress-theme/8146099

But it could take a month to fully disect. You would need to create your own wordpress template, that may be a reason to build your own theme from scratch with 'options tree.'

I guess my advice would be to try and build a theme from scratch and understand the mechanics of how to use the 'wordpress loop' to get posts.

That ultimately will afford the best results in the long run. I've never had to do it... luckily all the themes I've used themeforest themes, but looking over I reckon it would take at least half a year to fully get to grips with it. Like I said, the plugin 'options tree' is a godsend for customizing your backend EASILY.

'Starkers' is a great base theme, others recommend _s (underscore s).

Member Avatar for nufftalon

That hazel theme has alot of options nice. Takes for letting me know about the options tree I don't understand it yet but I will research that.

Member Avatar for iamthwee

Options tree was actually developed/sponspored by themeforest to be your one stop / standard for theme developers.

It's so simple to use. Creating a slider controlled in the backend is a piece of cake.

Yeah just download and install it and play with it. It is fairly straight forward to use and well documented.

Member Avatar for <M/>

^^No that's not going to work <M>, best way to proceed is to use <map> and <area> tags, effectively you are looking to only hover over the non transparent part of a .png...

Ah, i see. I misinterpreted the desired hover effect. I saw the link you provided before I posted but I thought that was the wrong effect... thanks for correcting me!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.