Web designers: How to learn making WordPress themes?

One of the things I do for my job is setting up and customizing WordPress blogs for clients, but with little-to-no formal training in that area, I feel like anything I try to customize beyond whatever controls are offered by the given theme is unguided and kludgy. I can do some stuff with CSS and I'm starting to get a bit of a handle on PHP, but terms of workflow I'm flying by the seat of my pants.

My (hopefully not too lofty) goal is to find one or a few different themes that allow for a fair amount of flexibility of formatting/styling, but not be weighed down with too much pre-existing fluff. Up until now whenever I've needed to design (well, customize, I suppose) a blog or Wordpress-based website, I've generally hunted around ThemeForest for something that looks close enough to what I need, bought a copy/license to use/modify, then spent the rest of the time breaking it and taping it back together.

But it feels like that's a really inefficient way of doing things. Every time I use a new, I need to set aside a bunch of extra time to sift through its code to reverse engineer ITS kludges and workarounds so I'll be able to know how to disable them, all before even starting to put any of my own content in. It's like I want to build a new computer, but instead of just buying a good, well designed case to put components into, I'm buying a pre-assembled computer just so I can spend even more time yanking its guts out to make room for my components.

I started trying to go back to basics and work with some kind of bare-bones framework, but a lot of that just led me deeper into the rabbit hole and left me with more questions. I don't know if I should be using Skeleton or Foundation or Options Framework or jQuery or 960 or if some of those are just elements of each other. I don't know if once I have a framework figured out (if I even should be doing that at this point), which of the myriad "easy to use, simple and clean" themes (WP-Skeleton, Reverie, Reactor, Options Framework Theme, Super Skeleton, etc) that offer implementation of those frameworks, or if I should try to develop my own custom theme from scratch, or make some Frankenstein's theme out of elements from a bunch of different themes. I don't know anything about, or even if I need to concern myself with stuff like Sass and Ruby (on or off Rails) or what.

Duders, I'm in over my head and need, if nothing else, some guidance on what stuff I should be researching.

Thanks!

It's worth it to get started on SASS. You can write in the same syntax as css, but use variables and basic functions on top of it (extremely useful for keeping consistent colors and widths). I use Compass to compile it, which offers some add-ins that are useful for the different vendor prefixes. That's just for the style part, but no matter what you do, you'll need to fix up the css to suit your needs.

I've been fortunate enough to have the time to build my sites from scratch style-wise, which I much prefer over starting out with a theme. It takes more time at first (and thus money), but now I'm able to go back to change things around easily, because I know exactly how everything is laid out.

@catsakimbo: Er, for some reason it deleted the content of my reply. Anyways, thanks for the advice, I'll definitely look into SASS/Compass.

I'll second the recommendation to learn something like LESS or SASS. They can make styling far easier. If you're already pretty familiar with CSS, you can jump in and almost immediately start benefitting from them.

As far as WordPress starter themes go, I have a custom one that I use that is pieced together largely from Bones and Roots. Just please, take the time to thoroughly customize your design so that it doesn't look like yet another Twitter Bootstrap site or just yet another WordPress blog. WP is a fairly decent CMS, but it's also easy enough for people to make a lot of terrible sites using it.

Depending on how deep down the WP rabbit hole you go, you'll probably pick up a little PHP and start to notice some shortcomings of WP, and from there you have the option to shift into making your own more customized sites with a web framework like Symfony, CakePHP, Rails, Django, etc.

Bones and Roots both look like they've got some really nice features, I'll check those out. So far, the starter theme I've liked using the most has been Reactor, but as with everything else, it's got some shortcomings and eccentricities. And I plan to try to do whatever I can to customize the sites so that they don't all look alike, although my limited experience with "the WordPress loop" and PHP is somewhat restrictive at this point. I do agree though that WordPress makes certain aspects of a site dangerously simple to modify, and in turn, fuck up.

You might also want to look into Twitter Bootstrap its a combination of LESS and some other things. I've been using it in a large PHP project and quite like it, not sure how well it plays with Wordpress, but I hear people have been using it with good results. Definitely work with Node.js and jQuery, those are the libraries I see out there the most. I personally like Sencha\Ext and how you can use it to build solid interface stuff quickly, but it doesn't offer as much flexibility on the design end. Drupal 8 seems like it'll be worth checking out if they ever release it, I'm curious to see how well it works since they built it on Symfony 2.

Learn how to use GitHub if you haven't already, its the best tool for sharing\storing code.

I second the jQuery, GitHub, and Bootstrap recommendations. Node.js is definitely cool, and I've started to get into it quite a bit recently, but depending on where web development takes you, I wouldn't say it's required (although there is some neat and convenient stuff you can do with it even if you never intend on making a fully Node.js based site).

I can't personally recommend any IDE for web development. I've definitely seen others recommend Sencha. Coda is another one I see occasionally. Personally, I recommend a solid text editor that's geared towards software developers. Sublime Text is pretty great and has a great community for support and useful extensions/packages, but there are some other nice options out there like Notepad++.

Bootstrap may be more than you need. If you prefer something more stripped down, Skeleton has less bloat.

@chaser324 said:

For free IDE's Koding is pretty neat, can take it from code to Git to a VM all in the same place. Might be a little more than you want for just doing design, but its got a little of everything. I prefer Aptana if you want a free local IDE, I use JetBrains IDEs at work, but you have to pay for those.

If you're going the terminal route, I'd recommend getting oh-my-zsh. It's basically a bash shell with some handy features on top, my favorite being searching of previous commands. Really useful if you're new and still learning the commands.

I use Sublime Text 2, which chaser324 mentioned. Be sure to grab package control for Sublime if you decide to use it. You can install a linter through the package control, which will highlight syntax errors in your code. It's most useful for pointing out spots where you forgot to close your parens or brackets, which are all too abundant in javascript.

It's personal preference, but I like these sorts of helpers that still show you the "real code." If I ever get to a point where I'm an expert at javascript, I might look into coffeescript or something of the sort. That and the actual "sass" language (I use "scss") are probably easier to code, but it seems way more useful to get good at the original language those compile into.

I've always worried that bootstrap would just make my site look like every other bootstrap site out there. Is it pretty easy to customize? I just feel like I'd be overwriting practically everything that makes it useful. I'm the only web person at a very tiny company, so I really don't have anyone to talk to about this stuff :-\

@catsakimbo: I think Bootstrap is fairly easy to customize. At times, maybe it comes with a bit more bloat than what I need (although you can customize that by just not compiling some of the LESS files and removing some of the JS). Sometimes I'm really only using the responsive grid and one or two components, but I still find it to be pretty easy to get something quickly up and running that I can build upon and refine.

Update: I think I'm getting more of a handle on what I need to learn and how I should be approaching all this. As much as I like some features in Reactor, I get the feeling that it does things in a really complicated way. So I think what I may try is to take Reverie and transplant the parts of Reactor that I want. It's probably going to be a big, messy hackjob, but hopefully I should learn a thing or two in the process.

One day I'll learn how to code... One day...