18 Ways to Speed up Your WordPress Theme Development

28 Comments

I develop lots of WordPress themes. In fact, I bet nearly every website I build is on WordPress. And I also end up talking to a lot of people who develop WordPress themes, as well as those who hire people to build WordPress themes for them. There is one constant between those who build WordPress themes and those who pay for themes to be developed: everyone wants it to happen faster.

I’m not claiming to be the fastest or most experienced theme developer out there, but I do know that these tips have contributed to speeding up my own development time significantly. Take a look at the list, and be sure to leave your own in the comments, since I’m sure I missed a few.

  1. Design with WordPress in mind to begin with

    If you can, ideally, know that you are going to use WordPress when you begin designing your site, then you may be able to take some precautionary steps to make creating your WordPress themes a bit faster when it comes to developing.

    I ran across a PSD released some time ago, specifically to assist you in designing sites for WordPress. While I wouldn’t suggest, necessarily, pulling back the reins on your site design as the PSD may suggest, it’s definitely a good idea to keep different element styles consistent.

    Spend some time looking around the WordPress Dashboard and, especially, the different Widgets that come standard and what sort of Plugins you might want to add. Knowing what to expect will give you an upper hand in the end.

    The takeaway: if you design with WordPress in mind, you will have a headstart once you begin developing your theme.

  2. Don’t bother with the WordPress theme editor

    The WordPress default install includes a theme editor, with the idea being that users can make modifications to the themes they are using and customize their blog. Updates are supposed to be on the way to the theme editor in WordPress 2.8, but for now things like syntax highlighting or advanced formatting features aren’t there.

    This is what it looks like to edit files through the theme editor. But forget about it, don't use it!

    While the theme editor will come across as convenient, remember that it is intended for users, and not developers. You are a developer, and you need to create a different environment for your own work. Users may need to spend five or ten minutes in the theme editor. You are going to be spending hours creating your theme.

    The takeaway: invest the time and money to get the right text editor and applications you will need to create and edit themes on your own system.

  3. Use the right text editor

    It’s no question that the one thing you’ll be using more than anything else when creating your themes will be your text editor. Take the time to find the text editor which fits your particular style. Pay particular attention to those text editors which allow for syntax highlighting, since the highlighting of different pieces of code will make it that much easier to cruise through and create what you need to create.

    Textmate website header

    Textmate is what I use. One of my favorite parts is the ability to drop in “bundles” of code, like Doctypes, which I can never remember (who can?). Textmate is Mac only.

    Coda logo and website header

    Coda is a very popular editor (and, really, web development environment) by Panic. I’ve tried it myself, but could never really get into it.

    Espresso website header

    Espresso is worth a mention as well. It’s still young as far as development goes, but based on my time with, it’s going the right direction.

    I would also suggest an editor which allows you to have a project view, where you can see all of the files you are currently working on in a sidebar of some sort. This allows you to not only relate each file you are using to the others in your project, but quickly see at a glance what you have to work with.

    TextMate is my go-to editor for creating code of all shapes and kinds (PHP, HTML, CSS, Ruby, etc.), and it happens to work well with Cyberduck, the open source FTP manager I use as well.

    The takeaway: as long as your editor has syntax highlighting and works for you, it really doesn’t matter what you use. Find what you like and get it going.

  4. Use the right software

    Your text editor is an important part of your theme development workflow, but it’s not the only application you’ll want to have around. Your web browser and FTP program are both important as well.

    Having an FTP program is critical for developing on the web, especially if you want to work quickly with WordPress. Nothing will slow down your development more than sticking to the default theme editor, in your browser. My personal favorite is Cyberduck (open source) but there are tons of options out there. Not all of your options, however, will give you a duck as a dock icon.

    Cyberduck logo

    For web browser, you really can’t get much better than Firefox and/or Safari. While I find myself more at home within Safari’s clean interface, I always keep Firefox close by when it comes to testing my themes. Both browsers are great for web development, as they have developer tools (either built in or as plugins) which can help you analyze a page once it’s in your browser. I use these things, most likely, to find out what CSS styles are being applied to the element I’m working on.

    The takeaway: find an FTP program, couple it with Safari/Firefox, and never look back.

  5. Devise your plan of attack before jumping in

    There’s a common saying when it comes to discussing the virtues of well laid plans: measure twice, cut once. The cut itself, the work, is important enough that it’s worth spending twice as much time making sure it’s going to be correct.

    When it comes to developing WordPress themes, there are so many ways to do it wrong, and relatively fewer ways, in each case, to get it right. While analyzing your design and determining just how to break your design apart for the HTML/CSS development, also take the time to consider just how your theme will operate. Some questions to consider:

    • Is this content best served as post/page content, or through a widget?
    • Is this functionality something I should build directly into the theme, or is it better suited for a WordPress Plugin?
    • How best can I leverage the functions of WordPress to make as much of this dynamic as possible?

    The takeaway: take the time, on pen and paper if you have to, to plan out how your WordPress theme will operate before you start building it.

  6. Begin at HTML/CSS, then move to WordPress

    There are two paths when developing sites for content management systems (WordPress and others) that you can choose to go down. On the one hand, there are those who develop their website markup and styles directly into their theme, essentially building the front end code at the same time as adding the back end functionality.

    On the other hand, there are those who swear by first creating a plain (read: static) HTML/CSS/JS site first, and then working the WordPress functionality into it afterward. I used to be the former of the two kinds, but anymore I’m the latter. This may change in the future, but for now it works really well for me.

    By creating the static HTML version first, you can stay on your hard drive and not have to mess with uploading to the web quite yet. I’ve also found that developing soon-to-be-themes as HTML/CSS first allows me to create the code as they should be, and then take the time to make WordPress fit the mold of the site, instead of the other way around.

    The takeaway: beginning with static HTML/CSS pages before moving to WordPress integration may speed up your process.

  7. Have a framework to start from

    I say framework very carefully. The word framework can mean a number of different things. A CSS framework (like Blueprint, 960gs, etc.) is used to lay out your HTML content into a CSS layout quickly: I’m not a fan of this. A WordPress theme framework, though, is intended to speed up your theme development.

    I’m not crazy about the idea of using theme frameworks, especially in regards to speeding up your development time. Your best bet is to create your own framework and use it on all of your themes. If you are interested in checking out other frameworks, though, I’ll toss a couple of available ones out here:

    The takeaway: build up your own base theme (or just HTML/CSS files) to start each of your projects with, and use someone else’s if you have to.

  8. Keep snippets of code close at hand

    Odds are that as you develop your themes, using at least HTML, CSS, and PHP, you’re going to run across snippets of code that you will want to use over and over again. Rather than typing these bits out over and over again, why not save these snippets somewhere so they are always close at hand?

    There are programs out there that are designed to spit out text when you hit a hotkey of some sort. I don’t have experience using that, though, and instead use different notebook-type techniques for saving code snippets. Keep in mind that if you use Textmate (see above) a bunch of snippets are saved in Textmate and are called “bundles”.

    Quicksilver for Mac

    I use Quicksilver (for lots of things) but also to save bits of pieces of code for use with WordPress on Quicksilver’s shelf, which I can paste from at any point with my hotkey.

    Evernote logo

    I also use Evernote, which is helpful for saving all sort of things, not only text. I could see this as being helpful for saving lots of snippets of code. Evernote is Windows and Mac compatible.

    Backpack app logo and description

    I use Backpack for keeping notes and organizing thoughts with others, but it could also be used for saving code of all sorts. Browser based app.

    The takeaway: find a way to save snippets of code and be able to pull them into your editor in a snap.

  9. Limit the number of theme files you use

    One of the easiest way to slow you up now, and end up complicating things down the road, is to create too many theme files for yourself to manage. In my case, I find the following theme files to be just the right amount I need to make the kind of theme I want:

    • 404.php — you definitely want to keep your 404 page helpful
    • archive.php — you can control all of your archive pages (posts by month, categories, etc.)
    • comments.php
    • footer.php
    • functions.php
    • header.php
    • index.php
    • page.php
    • search.php
    • sidebar.php
    • single.php
    • style.css

    You can also use WordPress conditionals in your themes to increase the amount of control you have within your templates without having to create new ones. I’ll write a post soon about how I use conditionals to keep my number of theme files down.

    The takeaway: think of every way you can keep your number of theme files trimmed down. Fewer things to work on will only speed up your work now and later.

  10. Bookmark useful WordPress theme related web pages

    This one works in a similar way as the tip about saving code snippets listed above. There are always — always — going to be little things about WordPress that you are going to forget and need to look up. Rather than running a Google search for something over and over again (we’ve all done it) just keep a list of bookmarks handy.

    If you use a decent web browser you can stick lists of bookmarks up into your toolbar. I do that, and have a folder specifically labeled “WordPress links”. Mine consists of the following:

    Those are the things I find helpful. What are your favorite WordPress resources?

    The takeaway: watch for the resources you visit often and create a list of bookmarks to speed up the process a bit.

  11. Test your themes on a dedicated WordPress testing install

    At some point you’re going to need to get your theme online and test it live, or at least live for yourself.

    There are a couple of ways to do this. One way is to create single test locations for WordPress themes, which I actually did back in 2007 when I first began creating and testing WordPress themes. Another idea, suggested in this post Tips for Running Lots of WordPress Installs Effectively I did a few weeks ago, is to run a WPMU setup and create blogs on a whim to test for each project you run, to save yourself having to install WordPress over and over again.

    The takeaway:: you need a place to keep your WordPress testing, so you can optimize that space for what you need done.

  12. Have content ready to test with

    In order to make sure you are being thorough on any site you develop, you should fill it with content of all kinds, ideally using real content but alternatively using Lorem ipsum text. You have to be sure to use headings, blockquotes, lists, tables and every HTML element that seems appropriate, just to be sure you’ve got it all together.

    When working with WordPress sites, though, it can be a pain to have to put in all of that content to test your templates out. One of the only places I’ve seen blog about this in the past was WPCandy, who have put an effort into maintaining an export of content for testing WordPress themes. Just take their file, import it into your WordPress test install, and test away. Thanks guys!

    The takeaway: keep a set of content around for importing into WordPress to make sure your stuff is thoroughly put together the first time around.

  13. Keep a list of your go-to Plugins

    Much like the tip regarding test content above, having a list of Plugins that you always end up using hanging around can speed up your live testing.

    I wouldn’t suggest keeping the actual downloaded files for Plugins in a folder somewhere, since they may be out of date unless you keep re-downloading them. You’re really better off just keeping a list of links (wherever you save things like links) to each Plugin so you can jump to them quickly when you’re installing them on your blog.

    Since this seems appropriate, a few of my must-have WordPress Plugins are:

    I think I’m due for a few speciality Plugin must-have guides pretty soon.

    The takeaway; keep links to download updated versions of Plugins so you don’t have to go searching every time.

  14. Test in all browsers

    This one may seem a bit counter intuitive. After all, adding a checkbox to your list will only increase the amount of time you spend developing your theme, right? Not quite.

    The best time to complete your theme project is when you still have all of your theme files open while working on your project. This is the best time to be doing any testing, because once you close up shop it will appear to your brain that stepping back into working with your theme will require more effort than it would in reality. So if you take a few minutes (or, admittedly at times, longer) it will save you time in the long run.

    Litmus app for browser tests

    I use Litmus for testing in different browsers. It’s a nice little app that, for the most part, shows you a faithful rendition of your work in different browser situations.

    Before I used Litmus I just kept a Windows laptop around for testing in IE6 and IE7/8. Anymore I’m comfortable using Litmus for 99% of what I do.

    The takeaway: taking the time to test in browsers now will save you time later. Find a method for doing so that works for you.

  15. Get a bigger screen

    This one tends to be a tad controversial, but I’m of the mind that the more screen space you have, the faster your work will get done.

    My big monitor

    I’m fortunate to be working on a 24” monitor at my desk (though I would love a second screen) but even so I find it useful to take advantage of OSX’s Spaces.

    Spaces settings on OSX

    Add a couple of extra Spaces and then use each new screen to use space that you wouldn’t otherwise have.

    Ideally, though, you need to get the biggest screen surface you can find. Within reason.

    The takeaway: the more screen space you have, the faster your work will get done. And the faster, then, your WordPress work will get done.

  16. Avoid distractions and focus

    There are times when tunnel vision is a good thing. One of those times is when you are working on something like WordPress themes.

    I do lots of things while I work. I work from home, and I’m always interested in something else happening in the background while I work. I’ve tried movies and TV shows before (I’m looking at your LOST and 24) but in the end these end up being too distracting, I think because they are visual. Instead, now I restrict myself to music, podcasts (say, like the Theme Playground WordPress Podcast?), and audiobooks.

    Coffee and Mac

    I would also suggest turning off all notifications while working on important things. Leave your audio stimulation going, whatever it is, but make sure that email, Twitter, and RSS feeds are going to “ding” and snap your attention away. You don’t want that, you need to focus.

    The takeaway: limit yourself to audio stuff in the background, and only let things bug you if they are directly related to what you are doing.

  17. Develop a pattern for development

    Most of this post has been all about developing your pattern for development, but I’d like to mention a few other things as well.

    Maintain a space for doing your development work. If you have a desk, do your best to make your desk your place for working, and nothing else. If you work well in coffee shops (there are a few of you out there) then figure out how to duplicate that, or at least save some money on coffee.

    Most of all, just keep an eye on how you develop, and under what conditions you happen to work better. I find that during certain times of day it’s easier to focus, whereas other times I can’t focus on work at all. Pinpoint what patterns help you develop your sites, and then duplicate them when you need to get work done.

    The takeaway: analyze your development environment, find the patterns, and recreate them.

  18. Time yourself!

    I need to give credit where credit is due. The whole idea for this post is owed to Michael Castilla of WPCandy, who tweeted this last week:

    Mike's tweet, inspiration for the post

    While he was making a joke, it’s true that one way to speed up our WordPress theme development time is to time ourselves. It doesn’t matter what you use: something as basic as a wall clock or as detailed as a stopwatch, the idea is the same. Try and find the places where you are wasting time and see how you can eliminate them and trim your overall time down.

    The takeaway: get competitive and time yourself, no matter how dorky it seems.

Share your tips in the comments

There’s no way I’ve covered all of the ways to speed up theme development. What tips do you live by? And, to make things interesting, how fast can you code up a WordPress theme?

28 thoughts on “18 Ways to Speed up Your WordPress Theme Development

  1. Nice list of points! I would also add some of the WP starter themes in additions to the frameworks (i’ve never used one), as they have all the basic loops/template files needed to get your started. (Elliot Jay Stocks and WPCandy have starter themes)

    I usually skip the html/css part and start coding straight in the template files.

  2. Good list you made here. I agree on every point. The only tip I’m missing is to install WordPress on your local machine to quickly create, test and finetune your theme design.

    For me – because I’ve an own default theme I start with – that replaces point 6 (Begin at HTML/CSS, …)

    Thanks for sharing.

  3. Thanks for a very good tips!

    Got a very big screen is very important. Some designers neglect it and they only design for eg: 1280×800 or 1024×768 only.

    Even their design is awesome, it looks sucks for bog screenies

  4. I usually start with one of my own blank themes I have (gotta clean & release) OR I look at the PSD and can “see” the divs & markup overlaid in my head. Then I pick a theme I know is close and use that.

    How fast? Never timed it before, but it can get really fast if there’s just a few stylesheets changes (And c’mon, let’s face it – there’s tons of themes out there that just have a few things changed in the stylesheet and they are considered a new theme.)

    The tweaking of cs issues can that forever, but a rough guess is in an hour or two I can have most of a new theme done, depending.

    As for audio while working, can’t do it. It throws me off and I can’t think. I can tweet & work though. :D

  5. Just a tip for any Coda users…
    Coda has an excellent tool for code snippets…called “Clips”… that saves me hours of time. Also, a great resource for this feature can be found at http://coda-clips.com/ . You can instantly install Coda Clips at the click of a button.

    Hope that helps! Otherwise, a solid post.

    • Thanks Pat. I’ve been collecting clips for Coda whenever I come across them, but hadn’t realized I could get some at the Panic site.

      Great post Ryan. I already do a few of these, but now have a few more ideas for speeding up development

  6. I think these are great, but honestly, the best themes are never the ones that were developed the fastest. Any client that wants it done faster to the point where quality suffers is not a client I want to work with.

    Also, I definitely agree with Big Jep that you should skip the HTML/CSS and go straight to theme files. Easier to preview what the theme will actually look like plus you can quickly preview it in the theme admin section.

    • I would definitely agree with you Chris, speed that sacrifices quality is no good at all. At the same time, I’d like to think there is a happy medium, where a site should be able to be developed within a certain amount of time without sacrificing the quality.

      I’ve tried going straight to theme files for a while, but have since slid back to creating HTML/CSS first. Either way works, I suppose.

  7. huhu. i’m doing 80% of what you’re listing. Guess, i’m not bad huh. :D

    Anyway, a nice compilation of tips. The most important for me is the HTML + CSS, then JS, and later, after everything is done, then starts with the WP codes.

  8. Pingback: 18 Ways To Speed Up Your WordPress Theme Development : Design Newz

  9. I love this post. I already do about 90% of what you do here. (the other 10% I have in the works.)

    I wanted to add some of my faves: I’m a nerdy hand-coder. So far, my favorite editor is PSPad – but it’s only available for Windows. I’m a recent mac convert, so sadly, I had to let PSPad go – but I went to BBEdit (which I hated) then moved to Smultron. Smultron isn’t PSPad, but it’s pretty close.

    I’ve also done the WPMU thing – however I wanted to add to that. I installed WPMU because I was tried of doing multiple installations for different clients – it was nice to assign clients their own “blog” to see their theme. The issue: 1) WPMU is not always on the same WP installation version (they’re always a step or two behind); and 2) many plugins I love to use are not compatible with WPMU. Instead, I try to do a “theme switcher” – one WP installation and the client just clicks a link to see his version I’m working on – and I can use the same content for *all* themes I’m developing (I use the dummy text from the themes repository that provides all possible headings, blockquotes, etc.)

    And finally, one of the best tips I ever got was to have your *own* custom functions written in a file, and saved as something like “my-functions.php”. Then in the functions.php file of whatever base theme you’re using, you just add an include to it to call in your pre-written functions file. (One of my most favorite functions I simply have made a “must have” in my file is this recent one – it’s so awesome I don’t know how I ever did anything without it before: http://wefunction.com/2008/10/tutorial-creating-custom-write-panels-in-wordpress/ )

    Hope that’s a helpful addition for you all :)

  10. Pingback: Daily Links | AndySowards.com :: Professional Web Design, Development, Programming, Hacks, Downloads, Math and being a Web 2.0 Hipster?

  11. Pingback: Inspiring Design Links for Creatives for 2009-03-17 | This Inspires Me

  12. Ryan, you absolutely nailed this. I found myself nodding in agreement, esp @ bigger screen, dev a pattern, and limit the # of theme files.

    My 2 cents: skEdit as an editor (slept on), and use consistent naming conventions.

    Diggin’ this blog.

  13. Pingback: sacredfisher » Blog Archive » Weekly (weekly)

  14. Pingback: Theme Playground | Consolidate WordPress Plugins to Speed up Your Site

  15. What a great list Ryan. I’m in the process of setting up some dev blogs on WPMU for the first time right now! I’ve been thinking about it for a while but always shied away because I thought it would be a pain. Your post got me thinking though, about how much time I’ve wasted on individual installation/setup for every theme I have in development. After tinkering with MU this morning I wish I would’ve done this a long time ago.

    The most helpful tip I got from this article, however, is the bit on developing a pattern. I’m all over the map when I work. Not really because of distractions (I limit my listening to movie scores or music with non-disruptive lyrics) but because my thought patterns are sporadic. I jump from project to project when I think of something that needs done, instead of noting it in and continuing on with what I was doing. It’s no small wonder I never get anything done! ;) I need to get back into the habit of using Things again. Love that app.

  16. Pingback: links for 2009-04-06 « Mandarine

  17. Awesome post! First time at your site – lots of goodies here – thank you! :-)

    One of the best things I did recently was to start using MAMP for WordPress development. MAMP let you set up your databases & everything on your hard drive – no more waiting for file uploads and worrying about ISP-related caching issues when troubleshooting!

    It also means not having to rely on internet access to get stuff done – which helps with #16 on your list!

    For multiple projects at once, MAMP Pro lets you set up multiple sites/installs.

  18. Pingback: 250 Wordpress Tutorials

  19. Pingback: 20+ Cool Wordpress Tips and Tricks | iDegenerate.com

  20. Pingback: Some Necessary Wordpress Tips | All about Technology

  21. Pingback: Wordpress Tutorial Collection | Nanzad - Wordpress Developer

  22. This was a great help you included everything that I needed to know! I am actually combining Lubith which is a very flexible online editor with HTML and CSS and I get everything that I wanted in the easiest and fastest way possible.

Leave a Reply

Please note that WPCandy is a moderated community.

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>