Having spit out several Wordpress custom sites in the last few days, I thought I’d detail my current workflow on my Macintosh OSX platform for posterity. It’s changed a little since the last time I wrote about it, and I feel like it’s at a point where, with some minor tweaking and a few more TextMate commands, it could be an ideal production environment for individuals and small groups.

A brief summary to begin with. I’m not going to detail the work that I do to turn Wordpress into a CMS, or why I choose to go that direction. This post will confine itself to the tools required to create a custom theme for Wordpress without hacking the core code. However, all of the tools that are mentioned are powerful enough to handle such tasks and I don’t use any additional tools to do my core hacking. So the overview goes like this:

• set up a local install of the Wordpress site (mirroring any current installation)
• create a local workflow to edit XHTML and CSS
• tweak and test on local platform
• deploy
• test on multiple platforms/browsers
• tweak to perfection

Now for the details.

Preparation:

I usually start out the process with a color palette, using Color Schemer Studio. The beauty of this program for me is that it allows me to generate a color palette from a photo, screen grabs, or color picker using a simple color wheel with harmony presets. I can build a favorites palette and automatically convert colors to their nearest websafe equivalent. The palettes can be exported for Photoshop, Illustrator, HTML, CSS and I can even drag colors right into some programs, including TextMate.

A general layout is also a good idea, and the Grey Boxes technique laid out in Transcending CSS is a great method for getting a general feel and giving yourself some flexibility down the line. You can use different outlining programs to create a layout, but I generally just end up making a sketch on paper and then doing a guide layer in Photoshop.

Graphics

Graphics are essential to any decent CSS layout. My tool of choice is, of course, Photoshop. I create an entire layout, using many layers and smart objects, and then export my files using Save for Web. For smaller graphics needs I use the tools available from Yellow Mug Software. They’re small, lightweight and extremely useful.

Local Install

Once I’m ready to begin development I create a local Wordpress installation using the latest version. If I’m updating a website that already has a working theme, I download all of the necessary files from the existing site and export the database. I then import the database into my mySQL installation locally and point the Wordpress install to that. This way I can work around all of the plugins and other potential pitfalls that will need to be accounted for in the theme.

For the purposes of running Apache and MySQL on my Mac, I use MAMP. It’s easy to set up and, despite having a relatively large memory footprint, it doesn’t interfere much with my workflow.

Headdress for OSX works wonderfully in combination with MAMP. It allows easy editing of the necessary files to create local addresses for accessing your local sites. Shaun Inman wrote a great article about integrating MAMP, Quicksilver and Headdress, which speeds things up a lot if you’re working on a lot of sites.

Development

A solid theme will always start with good XHTML. The very first thing I do is create the homepage with no dynamic data, just a plain XHTML page with dummy text and all of my layout and graphics. This gives me a chance to define the styles I’ll use for headlines, paragraphs, branding, etc., prior to worrying about any kind of PHP code. I use TextMate to create all of the XHTML that goes into the site. Be sure to create a CSS file and add a link to it.

Once I’ve got the semantic XHTML code in place (and it’s not a bad idea to validate as you go, it will help solve problems later), it’s time to start styling it. I love TextMate, but the live preview and milestone options in CSSEdit make it my tool of choice for CSS editing. Load up the local address to your dummy file in the preview window and start styling the page!

When I first start the project, I’ll copy a theme that I want to work off of, either one of my own or the default theme from Wordpress to use as a base. I’ll give it a new name, and edit the information found in the style.css file to change the way it shows up in Wordpress and help distinguish it from the others until I get a screenshot made. Then I’ll select the directory and open it as a project in TextMate. I’ll save the project with the name of my theme and use that as a base for editing the local theme. Right clicking a CSS file in the project allows me to open it in CSSEdit.

I tend to use the default theme as a starting point and copy out the Wordpress template tags that I need to create my basic layout. K2 from Binary Bonsai does some interesting things with the Loop, and can provide a more streamlined way of creating a site if you know what you’re looking at. I also use Hemingway from Warpspire as a reference for below-the-fold layouts. For most purposes, I prefer manually creating the necessary files, and often need to create my own page templates anyway. As I develop, I constantly consult the extensive Wordpress Codex for assistance with template tags and parameters.

Testing

Testing takes place the entire time, and most heavily as the local site nears completion. I always build first for Firefox and do my best to maintain valid code as I go. Internet Explorer 6 for Windows is the last browser on my list and, while the biggest pain, is not as important to me in the long run. It will eventually die and I’d rather have my code right than working in IE6. That being said, once I get to deployment, I take every measure to make sure that the poor bastards using IE6 can still get a usable website out of anything I develop, and be none the wiser.

Once a local site is looking good in Firefox, I test it in Safari, Omniweb, Opera, Camino and Firefox 1.5. I don’t run parallels, so testing on other platforms has to wait until I’ve deployed the new site.

Deploy

Yummy FTP has become my tool of choice for all remote work. In combination with CSSEdit and TextMate, it provides remote editing, synchronization, FTP Folder Watching and all of the other goodies that you need, plus a stable and very fast interface. And it’s cheap compared to some of the others. Not as cheap as Cyberduck, but far more powerful.

I will, on occasion, put a site in a subdirectory and deal with the hassles of changing it’s location in the database so that I can test it before it goes live. Generally my sites are finished enough at the deployment stage that I can make minor tweaks quickly enough that it won’t affect site traffic by going live with a few quirks.

Generally, however, I only need to upload the new theme to the themes folder of the site I’m working on and change the site’s presentation options to point to it. If anything goes wrong, I can always revert to the previous theme.

Tweak

If I bookmark the theme directory in Yummy FTP, I’m a couple of clicks away from editing any relevant file. Double clicking a CSS file will load it up in my CSS editor (you need to edit the extension definitions to make this happen), and php files will load up in TextMate. Saving the file will automatically upload and overwrite the previous version. The downside to this is that you don’t have a version control system and doing so takes a little extra effort. I can detail some of my solutions in another post.

Finishing

And then it’s time for all of the cross-platform, cross-browser testing that needs to be done. Have fun with that, especially when you’re smoking along and then get to Internet Explorer 6 (or worse yet, 5.5). I highly recommend using Conditional Comments and avoiding CSS hacks, especially now that version 7 is out. Make sure to back up your theme when you’re done. Take snapshots of your previous theme for posterity, and crop one and add it to your new theme as screenshot.png so that it looks nice in the Wordpress back end.