[…] Circle Six Blog has a great post up that outlines Brett’s workflow for designing WordPress themes locally on his Mac. He lists a number of useful apps that we have covered on TUAW and includes some good general web design tips. […]
Wordpress Theme Development Workflow for OSX
Note: This post is over 2 years old. You may want to check later in this blog to see if there is new information.
The following links are auto-generated but may help you locate newer content:
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.
Well, I hope that all that information is useful to somebody ;-). 
-
12.26.06 / 9am
-
12.26.06 / 9am
Interesting post… if I could read it. Your design doesn’t work in Safari on 12” powerbook ;)
-
12.26.06 / 9am
I’d be interested to know what version, I’m reading it in Safari right now and I can size it down below 800px and nothing breaks…
-
12.26.06 / 10am
Doesn’t work here either, safari on 13.3 MacBook, latest system and safari. Works in Firefox though…
-
12.26.06 / 11am
Looks fine in Safari for me, even at the browser window 800x600. :)
This is a great article. Though I’m not a fan of wordpress, it’s still very useful!
-
12.26.06 / 11am
this page doesn’t work on Safari 2.04 on my G4 450. works well on firefox 2.0
-
12.26.06 / 11am
I am a little confused by the actual MAMP/Headress reasoning.
Headress is a great application if you are to use Apache 1.3 and/or Need Bonjour-ness which is at this time really only for Apache 1.3.
You also could get away with webmin or webmin-lite to do the same thing.
If however you are to use MAMP (or XAMPP - I use both) with Apache 2.0, all of that goodness is a waist (and without Bonjour to boot). So here is what I use as my setup… and which IMHO I feel is a very easy to use setup.
In your httpd.conf file, add the lines (are virtuals turned on?):
UseCanonicalName Off
VirtualDocumentRoot /Users/Shared/web/%2+/web.%1
This will forever allow Apache to look into the “web” directory under /Users/Shared for sites.
Typically I use the subdomain name of “local” as my local copy. So when I want to access my local copy of a site I would use the path of “local.thisdomain.com” instead of “www.thisdomain.com”. The Path to the files would then look like “/Users/Shared/web/thisdomain.com/web.local”.
This also allows me to keep local copies as well as versioning of new sites by adding the file structure (for example) of “dev.thisdomain.com” under the path “/Users/Shared/web/thisdomain.com/web.dev”.
Now, the only catch is that there is one file that needs to be touched… as would be the case under Headdress as well. This is the HOSTS file in the “/etc/” directory. For each root of the “domain” I need to add a line so my machine knows that these subdomains are local. To do this for the “local.thisdomain.com” site you would simply add the following line:
127.0.0.1 local.thisdomain.com
To do the same for the “dev.thisdomain.com” site it would be:
127.0.0.1 devl.thisdomain.com
The extra bonus of all this is when it comes time to do updates… in which case there are only two configuration files to remember… the HOSTS file… and of course the simple editing of the httpd.conf file on the new version of MAMP/XAMPP.
I hope this sparks a little intrigue in others as I have been through the gambit myself on the matter. Most of this article really shows what I think any hard-core mac developers has discovered and been refined to over the years. Thanks for sharing.
-
12.26.06 / 9pm
Nice article. Works for me on Safari 2.0.4 on both my iBook G3 and G4 Dual 500 Tower.
-
12.27.06 / 4am
1 issue tho: a page we are currently on, is not W3C compatible: validate
So it leaves us with a question whether this technique is entirely usable with all those fancy tools for XHTML/CSS.
-
12.27.06 / 6am
[…] Wordpress Theme Development Workflow for OSX - a very nice guide. « Philip Rosedale Long Now talk | […]
- 12.27.06 / 6am
-
12.27.06 / 7am
Actually, the code is W3C valid, and the tools listed are far more likely to create valid code than tools like Dreamweaver. The tools discussed here do not create any code on their own, but leave it up to the user to make their own mistakes. I can’t currently validate this page because of server issues, and any errors generated are due to blog plugins, not the theme itself. The code for the page that the theme is based on validates, CSS and XHTML strict.
-
12.27.06 / 11pm
[…] Circle Six Blog » Blog Archive » Wordpress Theme Development Workflow for OSX (tags: apple webdesign howto) […]
-
12.27.06 / 11pm
I apologize for the downtime lately, we’re in the middle of switching hosts and I wasn’t expecting so many visitors ;-). Of course, I’m switching hosts mostly due to the number of visitors, so it’s a double-edged sword.
Anyway, to ammend my previous comment, the XHTML errors on this page are generated by this comment box, which I will fix when I get FTP access back, and the CSS errors are in the lightbox.css file, not in my style.css file for the theme. I’m fine with the lightbox file not validating.
Validation is a tool, not a merit badge.
-
12.28.06 / 12am
[…] Brett from the Circle Six Blog documented this Wordpress Theme Development Workflow for OSX. It is a good read and describes how he (and know doubt many others) design great looking themes for Wordpress and other opensource CMS solutions. As you will see from that site, those who design nice sites most likely have the nicest looking computer operating system — Mac OS X from Apple Computers. (Also my choice of OS’s) […]
-
12.28.06 / 1am
In addition I’d like to recommend the alternative choices for few software titles that got mentioned above.
While going thru Yummy FTP I noticed that it’s priced almost as high as Transmit that I’m currently using and that has a huge functionality list to confront. A very good experience with these guys, I’d definitely recommend that.
Another tool that I use for any type of coding is TextWrangler. A FREE tool which has a huge preferences list, has highlighting and is in fact superb.
-
12.28.06 / 5am
I was a Transmit user for about a year before I found Yummy FTP. I find Yummy and Transmit to be extremely similar and believe it to be a matter of personal preference. I prefer Yummy’s approach to what Transmit calls Docksend, and I like their interface better. Plus, I happened to get it for free, which was a huge selling point, but after trying it I would have bought it for sure.
TextWrangler is a great free tool, no doubt, but I wouldn’t want to live without TextMate. Again, it’s a personal preference and people will argue to the death, especially over Text Editors.
-
12.28.06 / 5am
Yes, TextMate looks good indeed. That Project tab thing looks like a nice tool
-
12.28.06 / 6am
[…] themes para Wordpress desde OSX. Muy útiles para los que como yo, están iniciandose en OSX. # « SmoothGallery, galerÃa de imagenes conMooTools […]
-
12.28.06 / 7am
[…] Los chicos de Circle Six Design nos muestran unas ideas para desarrollar themes para Wordpress desde OSX. Muy útiles para los que como yo, están iniciandose en OSX. […]
-
12.28.06 / 10am
One thing that deserves to be added to the list is the Firebug plugin for coding/testing/debugging in Firefox:
http://getfirebug.com/As you quite rightly praise it in the “Unadulterated Praise for Firebug” post it’s probably just an oversight, but well worth mentioning again as I’m sure anyone reading this’ll find it useful.
-
12.28.06 / 1pm
[…] Los chicos de Circle Six Design nos muestran unas ideas para desarrollar themes para Wordpress desde OSX. Muy útiles para los que como yo, están iniciandose en OSX. […]
-
12.29.06 / 4am
[…] Circle Six Blog » Blog Archive » Wordpress Theme Development Workflow for OSX (tags: howto mac templates tool WordPress OSX) […]
-
12.30.06 / 3pm
Way to Go Mate!!!
Good Article!
-
01.06.07 / 11am
[…] Wordpress Theme Development Workflow for OSX All apps deemed necessary to develop comfortably and efficient (tags: wordpress design osx) […]
-
01.07.07 / 12pm
[…] Wordpress Theme Development Workflow for OSX. […]
-
01.08.07 / 7pm
[…] Wordpress Theme Development Workflow for OSX MagnÃfico tutorial del proceso de desarrollo de un Theme para wordpress en entorno Mac OSX. (Wordpress Workflow Circle Six Blog) (tags: webdesign wordpress development tutorial blog osx inspiration) […]
-
01.08.07 / 8pm
why would you want to convert colours to their nearest websafe equivalent? The websafe palette is dead.
-
01.08.07 / 8pm
Sorry, that should have read “websmart”. Either way, Color Schemer Studio is my palette generator of choice, whether I convert or not. kuler is also pretty cool…
-
01.09.07 / 10am
[…] Circle Six Blog » Wordpress Theme Development Workflow for OSX: […]
-
01.11.07 / 1pm
very good post from our team… …
-
01.14.07 / 8am
Im trying out this method over the next few days to redesign my ugly Wordpress theme for pintmaster.com. Thanks for the step by step process. It makes it easier to get your head around a lengthy process!
-
01.17.07 / 7am
[…] Wordpress Theme Development Workflow for OSX Tools and tips on developing a WordPress weblog theme for Macintosh users. (tags: wordpress design CSS OSX Mac tutorial blog development guide howto resources reference) Share and Enjoy:These icons link to social bookmarking sites where readers can share and discover new web pages. […]
-
02.13.07 / 2am
Very good articles!
-
02.15.07 / 12am
Very interesting article, thank you so much.
-
02.16.07 / 1am
[…] Wordpress Theme Development Workflow for OSX Risorse: […]
-
02.22.07 / 6pm
Great site! Good luck to it’s owner!
-
02.24.07 / 3pm
pagine piuttosto informative, piacevoli =)
-
02.24.07 / 9pm
http://nicemac.com
A forum for Nice Mac Users with Nice Macs!Goodtime
SysOp from the 80’s
Admin of the 90’s
Nice Mac User of the new millennium. -
03.02.07 / 7pm
Hi, what a great website and a very nice design. i am a designer also - and now i want to create templates for wordpress - but i dont know how yet. hehe - i use photoshop and illustrator in all my work…
my blog is www.computerarts.dk/blog/
i also have my danish www.barner.dk thanks -
03.07.07 / 11am
verry helpfull. thanks, heiko
-
03.11.07 / 4pm
Hey guys, very interesting. Thanks says Martin.
-
03.14.07 / 3pm
Awesome theme. Is there any way to only publish blurbs (summary) with links on the main page rather than entire articles? Regards…
-
03.14.07 / 5pm
There are several ways to do this. You probably want to use the_excerpt().
-
03.26.07 / 6am
[…] Wordpress Theme Development Workflow for OSX A nicely laid out way of developing wordpress themes (tags: blogging) […]
-
04.06.07 / 2am
[…] Lorelle VanFossen wrote an interesting post today onHere’s a quick excerptThis 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 … […]
-
04.06.07 / 5pm
[…] Wordpress Theme Development Workflow for OSX […]
-
04.08.07 / 1pm
It’s really works for me.Thanks dude.
-
04.23.07 / 2pm
It’s really works for me.Thanks dude.
-
04.23.07 / 2pm
Yes, TextMate looks good indeed. That Project tab thing looks like a nice tool. Thx.
-
04.24.07 / 3pm
l think very nice article
-
04.24.07 / 3pm
l think very nice article
-
04.26.07 / 10am
Doesn’t work here either, safari on 13.3 MacBook, latest system and safari. Works in Firefox though…
-
04.27.07 / 8pm
Very interesting article, thank you so much.
-
04.29.07 / 9am
thanks
-
04.30.07 / 12pm
Thanks all.
-
05.09.07 / 5am
Interesting post. I do a lot of this myself, but I skipped the virtual hosting bits and opted to install Wordpress Mu (multi-blog version of Wordpress) on my default install of Apache on OS X (I did however change the DocumentRoot in the Apache config). This way, I get the benefits having several sites (48 at last count) hosted on my development machine, but without the hassle of multiple copies of Wordpress or a client seeing someone else’s data and design instead of his own.
-
05.15.07 / 8pm
[…] Circle Six Blog » Blog Archive » Wordpress Theme Development Workflow for OSX (tags: wordpress design css osx mac tutorial) […]
-
05.24.07 / 10pm
Thanks for the tip. I’m planning to build my own theme and this would help me a lot.
Thanks again!
-
06.10.07 / 3pm
very nice article
-
06.13.07 / 10am
I have web sites with wordpress. This information will be very useful for me . Thank you.
-
06.25.07 / 10pm
[…] Six Blog published a great post (that is quiet old) that outlines Brett’s workflow for designing WordPress themes locally on […]
-
06.26.07 / 7am
Thans a lot.
Comments are closed
Comments are currently closed on this entry.