Note: This post is over a year and a half 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:
I just finished developing a full Wordpress theme using TextMate and other OS X specific tools, and thought I would document the process. I know it’s not news to everybody, but there are a few people that have expressed interest in this project… My goal has been to replace Dreamweaver without giving up any of the functionality that I enjoyed from Dreamweaver, while letting go of some of the cost and bloat. This particular exercise was a great case study for my new setup.
This is not a Wordpress template tutorial, nor a TextMate tutorial. It’s a workflow description. I hope it leads people to discover the tools that work best for them and to create efficient and productive workflows for web design.
The tools used in this process were: Textmate, CSSEdit, Xylescope, Transmit, Firefox (with the Web Developer Extension), MAMP, and some Applescripting. I’ll detail a little bit of the workflow in the rest of the post.
The first thing I did when I began developing this theme was to set up Wordpress on the remote server and mirror the installation locally. Using Transmit’s mirror function it’s a simple task to download and recreate the directory structure. Working with a mirrored structure makes it much simpler to deploy and test the theme as the things procede.
To start any theme development it’s always easiest to begin with a plain html file and piece together your markup and use dummy text where necessary. This allows you to create your markup and CSS with a live preview and then apply the template tags to the markup when you’re ready to deploy to a testing server. My workflow for this particular project looked like this:
HTML with local preview -> Local Wordpress Site on MAMP -> Deploy and tweak
I set up my basic file structure for the theme by copying the default theme from Wordpress into a new directory and erasing the core files. I created a style.css file and my necessary directories (images, js, etc.). I then used my “Edit in Textmate” button in the Finder to create a project from the directory. As I edit, I add files to the project. For now, I just load up Firefox on my second screen and start editing in TextMate. This is not going to be a tutorial on HTML or CSS editing in TextMate. There are some great screencasts on the Macromates site about this. There is a command built into TextMate’s default bundles that lets you refresh your running browsers, including Xylescope, by pressing ⌘-R. To do this in Firefox, it helps tremendously to have enabled Assistive Devices in your System Preferences under Universal Access.
The built in web preview in TextMate is nice, but doesn’t do much good if you’re jumping between markup and CSS files as it closes every time you change files. I find just making an edit and hitting ⌘-R does the trick nicely.
As I build the preview I pay careful attention to text styling, using dummy headlines and Lipsum text. You can insert a paragraph of Lipsum by typing lipsum⇥ in TextMate.
MAMP is a quick and easy way to run MySQL, Apache and PHP on a Mac. I create a blank database on my local installation and create a local config file for Wordpress to point to it. If I’m working on a site that’s already been deployed, I do an SQL export on the remote server and import the database locally and run off of that. MAMP can switch between PHP4 and PHP5 with the click of a button, so it’s easy to see how your site is going to look and act on the remote server. With a little editing of httpd.conf and the hosts file, I can create an easy-to-remember local address for the site I’m working on and load it in Firefox.
The process becomes much the same at this point. As I replace my dummy text with Wordpress loops and template tags, I can use ⌘-R to see the changes to the local Wordpress site as they happen. I can even explore the site links to make sure everything is working properly.
Once I’ve got the theme in working order and looking good, I mirror it in the other direction, uploading the new directory to the remote site. Then I switch the remote site’s configuration to use the new theme, make whatever adjustments are necessary to the content and page templates, and take a look at where I’m at. Things always need changing at this point, and I find it easiest to do them on the remote server now.
TextMate has built in Transmit integration. If you set up your Transmit favorite with the local directory of the mirrored site and enable docksend, you can hit ⌘-⇧-U to upload the file or directory to the site via docksend. That means with the live site loaded in Firefox, I can make my changes in TextMate to the local mirrored files, hit ⌘-S to save, ⌘-⇧-U (I changed the upload file to ⌘-U and left the upload directory on ⌘-⇧-U) to upload, and then hit ⌘-R to see the effect. I set up a command to auto-upload on save, the way good old Dreamweaver could, just by compiling a few commands and checking for a system variable in the project. If that variable exists, when you hit ⌘-S it will automatically send the file to docksend. If the file doesn’t exist within the site’s directory structure, it won’t go anywhere, but if it does then it’s automatically uploaded. So it’s just save and refresh. You can also use the Reload Every extension for Firefox to reload your page automatically every 5 or 10 seconds, but I find that tedious in most cases. It’s faster to manually refresh with a two-finger salute.
For quick edits after the fact, I load up Transmit and navigate the remote site. When I find the file that needs editing, I just right click or ⌃-click it and choose TextMate or CSSEdit. When the file is saved in either program, it’s automatically returned to the server. Effectively, this is the same as remote editing, at least in my opinion.
And then it’s over. I created a new site from scratch in a few hours, and I enjoyed every minute of it. The site features a static front page that incorporates posts as informational pieces using sliding panes, prototype style. It also has a stylesheet switcher that lets you turn a lamp on and off, kind of an easter egg in the design. The markup is extremely minimal and very semantic. If you view the site without javascript or CSS you get a perfectly ordered, sensible layout, with easily navigatable menus. Working with TextMate allows me to (or forces me to) pay more attention to the details that are important to me when I build a site. And that’s a beautiful thing. 
Thanks for this informative post. I just happened across it while looking for info about Textmate’s blogging support.
Reading about your workflow and checking out Xylescope helped to re-inspire me to stretch beyond my web developer background and again try to develop some meager design abilities.
Sweet. I love being inspiring ;-). You should check out the community page at macromates.com and jump on the list or the chat there if you have any questions. You’ve got the ruby skills and probably some php, right? You’ll be able to make the xmlrpc interface bend to your will…
Comments are closed
Comments are currently closed on this entry.