I’m always looking for ways to speed up my development time when creating WordPress themes – whether it’s theme templates, Coda clips, or using both computers to make things go faster. Here are a few things I do to automate my WordPress workflow, from the initial PSD slicing to uploading the final product.
HTML/CSS Template
I have a copy-and-paste folder that is always used when beginning any website. It has two files – index.html and style.css – and two folders – ‘images’ and ‘js’. The index.html file has a basic, empty template with links to a stylesheet and a JavaScript file and a basic page structure that I use most often. The CSS file has common selectors and attributes, and the ‘js’ folder has a copy of the latest release of the jQuery library.
Basic Theme Template
You may have already seen my WordPress Starter Theme. This isn’t a framework, and it doesn’t work right out of the box. Instead, it gives me a blank theme to start from with all the necessary files and functions I almost always use.
Using Two Computers, or Mac OS X’s Spaces
I have two Macs on my desk – a 20″ iMac and a white 13″ MacBook. I find it easiest to open the HTML file in Firefox on the MacBook – whether it’s on a server, or on my iMac – and use the other for the PSD and coding. I utilize two spaces on the iMac (and three when I don’t use the MacBook) – the first for the PSD, and the second for Coda, or whichever program I’m using to write the code.
Coda Clips
I use Panic’s Coda, which is an all-in-one text editor and FTP editor available for Macs. It has a feature called “Cips” that lets you store code snippets that can be called just by typing a few user-defined letters and hitting the Tab key. With the latest Coda update, clips can now be stored as groups as well as imported and exported. Thanks to this addition we’ve created the WordPress Coda Clips collection, which includes a ton of WordPress tags that can be pulled up with a few keystrokes.
Download WPCandy’s WordPress Coda Clips Collection
A “Proper” WordPress Development Installation
It’s easy to set up your own WordPress installation to test your themes on, but an out-of-the-box installation won’t do much by itself. You need pages and subpages, categories and child categories, lots of posts, and various HTML tags in those posts to create a great theme. We released the Sample WordPress Content XML import last week that includes plenty of pages, categories, and posts so you can make sure things like images, blockquotes, and various headers are formatted before you release a theme.
Download our Sample WordPress Content
What else do you do to speed up your development workflow? Let us know in the comments.
Post Revisions:
- 5 August, 2010 @ 4:51 [Current Revision] by dan philibin
- 22 September, 2008 @ 6:58 by Ryan Imel
Posted September 22, 2008
Keith said:
Excellent insight into others work flow and thanks for the sample wordpress content!
on September 22, 2008 at 7:32 am
Michael Cromarty said:
Thats some nice information, Thanks for sharing.
on September 22, 2008 at 3:02 pm
Jordan said:
You know I’ve honestly never though of importing fake data to fill up for content and various classes and whatnot. I’m definitely going to use that right now for any other WordPress projects I do that need filler content.
on September 22, 2008 at 3:50 pm
Dainis Graveris said:
That’s great! Just what I needed..!
on September 22, 2008 at 4:54 pm
Tommy Day said:
WPCandy is quickly becomming the site I check the most every day! Keep it Up!
Ps – LOVE WPCoder’s design.
on September 22, 2008 at 9:39 pm
Joel said:
Very nice! Great job guys.
on September 23, 2008 at 7:55 am
codebounce.com said:
Might be, this is a silly question…
Is there a way to automate adding a common set of plugins to a theme?
http://www.codebounce.com/Wordpress
on September 23, 2008 at 2:31 pm
Kimbo said:
Hi Dan,
Awesome article you’ve written. It sums up about every obstacle a designer needs to tackle when creating a new wordpress theme.
Also very nice of you to provide all your resources described in your article! I’ll be using your test-content XML file A LOT as I make a couple of themes for our clients per week…
Again, Thanks a lot, and keep on doing great community work!
Greets
on September 24, 2008 at 11:37 am
Jason said:
I’ve seen you talk about Coda alot – and I’m pretty sure that Transmit is the FTP client embedded in Coda, have you had problems with Transmit not honoring your Line Endings? IE using UNIX (LF) and Transmit converts it to a WIN (CRLF) on upload?
It’s not a big deal for most of my PHP files but the file that I’m using as executable CLI scripts fail miserably with the extra (CR)
Just looking for your thoughts
on September 25, 2008 at 12:52 am
Dan Philibin said:
@Jason Coda gives me an option to convert the line endings, so I don’t really have any problems there.
on September 25, 2008 at 6:58 am
JamieO said:
Building on the concept of a dev environment and fake data – what about a solution for staging / production environments and managing migrations between them? There are 3 scenarios which must be factored:
1) Pure data – Create a new post / page which updates the database.
2) Pure file – Theme file change – no database update.
3) Mixed data / files – Upload a new plugin, activate it, then add the function calls from your theme.
How can you promote these changes without having to re-do the set of actions you did in your dev (or staging) environment in production?
Using staging for all your content changes and then a complete database extract, modify, import while in some form of ‘outage mode’ only works if you don’t have any production data (users) that don’t exist in both.
on September 26, 2008 at 3:47 pm
зизи said:
Сперто с лица Земли.
on October 1, 2008 at 3:20 pm
Fausto Pacheco said:
I can easy say, I LOVE YOU, ;P
on October 15, 2008 at 3:50 pm
Amir S. said:
may i suggest that:
1) try to use a source control (git or svn or cvs or something)
2) use WP_HOME and WP_SITEURL while on dev (i.e. define these variables only if strpos($_SERVER["HTTP_HOST"],”localhost”) !== false)
see:
- http://wordpress.org/extend/ideas/topic.php?id=70
- http://trac.wordpress.org/changeset/5093
to deploy:
- create a batch script or bash script (depending on your OS) that does a svn deployment (i.e. svn up)
- use mysqldump to deploy blog postings
on October 16, 2008 at 9:11 pm
Armand said:
Thanks for sharing. I think it’s now time returning back to wp theme design…
on February 13, 2009 at 12:50 pm
Phil said:
I really enjoyed the empty wp theme. I got my own copy-paste folder.
Looks something like:
www\images\
www\styles\include.css
www\styles\reset.css
www\styles\font.css
www\styles\layout.css
www\js\pngfix.js
www\index.html
on November 17, 2009 at 5:35 am
Simrandeep Singh said:
Thanks for sharing the wonderful post with us. This is the much required post
on July 25, 2010 at 12:55 pm