How To Improve And Refine Your WordPress Theme Development Process

Advertisement

There is so much to learn about WordPress theme development. The Internet is home to hundreds of articles about building WordPress themes, to countless theme frameworks that will help you get started, and to endless WordPress themes, some of which are beautiful and professional but not a few of which are (to be honest) a bit crappy.

Rather than write another article on building a WordPress theme (which would be silly, really, since any theme I build would fall into the “crappy” category), I’ve asked some of the top theme designers and developers to share some tips and techniques to help you improve and refine your theme development and design process.

splash1

Before we get into that, Mark Forrester, cofounder of WooThemes2, has shared some insight into his firm’s development process. Given WooThemes’ success, no doubt we can all learn something from it.

A Peek Into Woo

Whether you work in a large theme shop or are a lone designer, you can learn plenty from another designer or developer’s workflow.

  1. A theme at WooThemes starts life on the ideas board3, through specifications provided by the community or based on a concept that’s emerged from customer research. It is designed either in house or by an industry-leading designer who is hired on contract.
  2. The theme is then meticulously designed in Photoshop. All of the major elements are styled and the pages constructed before any code is touched. Mark recommends Photoshop Etiquette4 for guidelines on structuring your design file. He says, “The better the Photoshop file, the easier the theme build.”
  3. Once the design is approved, it’s assigned to a developer, who works from WooThemes’ base theme. This includes the templates that come with every WooTheme, along with basic styling. The base theme has a responsive layout, and the CSS is managed using LESS565, which Mark strongly recommends.
  4. Theme development is managed with Trello496, and milestones are set with TeamGantt7.
  5. Once the theme is finalized, the developer creates a demo for the website that is populated with dummy content and that tests almost every element of the design.
  6. The team sets about beta testing the theme. A list of bugs, tweaks and solutions is compiled, a hackathon is scheduled, and everything is completed by the developer.

    A hackathon is scheduled.8

  7. For WooThemes’ own redesign (which is awesome — congrats, guys!), the team started to use BugHerd509, which helped them gather user feedback and track it directly in the pages.
  8. All revisions are included in the change log for easy reference. A strict numbering convention distinguishes between bug fixes and new features.

    A strict numbering convention distinguishes between bug fixes and new features.10
    Larger view11.

That’s a lot of process right there. Creating a WooTheme theme is about much more than knocking out a few lines of code. Here’s what Mark has to say:

“When we create and edit our themes it is not simply diving into the code. We have to carefully consider our community of users and how any code might impact their usage, and the template files’ customization ability.”

Apart from workflow, what else can be learned from professional theme designers and developers?

Develop Locally

If you’re not developing locally, then now’s the time to start. Here’s what Chris Coyier12 has to say about it:

“Designers and developers who work mostly on WordPress sites are, in my experience, the worst offenders of the “just do it live” development system. FTP commandos, if you will. I know — I was one for a lot of years. I suspect it’s the case because there are quite a few requirements to run a WordPress site locally: an Apache server running PHP and a MySQL database.

These things aren’t preinstalled on most computers like they are on most servers. Even if you get over those hurdles, setting up a workflow between local and live isn’t trivial.”

Luckily for you, Chris is going to show you a better way. Developing locally is easy to get started with.

Step 1: Set Up MAMP

Step 2: Get Off FTP

Developing locally has so many benefits. In particular, you’ll be able to do the following:

  • Have a record of everything that has ever changed and when it changed.
  • Roll back mistakes.
  • Become more efficient by using text-editor features such as “Find in Project.”
  • Work on major redesigns without worrying about screwing up a live website.

Alternative Tools for a Local Server

Use Live Reload

When you’re developing a theme, switching to the browser and reloading the page gets old pretty fast. That’s why Drew Strojny, founder of The Theme Foundry17 and the guy behind WordPress’ gorgeous new Twenty Twelve18 default theme, uses LiveReload5319:

“LiveReload is a great little application that works through a browser extension. LiveReload automatically reloads your page when a file has been changed in your project.

This is a huge productivity boon when you’re editing and tweaking a WordPress theme. All those small page refreshes add up to a big chunk of time saved at the end of the day. Not to mention, your fingers get a much needed break!”

The Theme Foundry loves LiveReload so much that it’s built support for it into Forge5420, its free command-line toolkit for bootstrapping and developing WordPress themes.

Use Git

Git is a distributed version-control system that is popular among developers all over the world. The great thing about Git is that you can quickly create a branch, make changes within that branch and then test those changes without affecting the master version. It’s what The Theme Foundry uses for every project:

“Quite honestly, we’d be lost without it. Git makes branching cheap and easy. You can experiment quickly with different ideas without worrying about getting lost. Think of it like the trail of pebbles left by Hansel and Gretel to help them find their way back home.

Git gives you the power to leave nicely annotated pebbles along your development path. If you see something interesting and wander off the trail, but then later change your mind, you can always get back to where you started.”

Learning Git

Clean Up Your Source Code

Messy source code is a developer’s nightmare. It makes finding things difficult, and it makes it extremely difficult for anyone else to work with it. That’s why Jeff Starr24, WordPress editor here at Smashing Magazine, recommends keeping your template files and code clean.

“When designing WordPress themes, I like to keep template files and code well organized and tidy. For publicly released themes, keeping things squeaky clean lets ’em know you really care. Here are some tips for dazzling source code and markup:”

  • Indent nested lines.
    At the very least, source code should be readable by anyone who wants to work on the theme. If nothing else, take a few moments to properly indent your code.
  • Indent tabs always.
    Instead of tediously single-spacing your code, keep things consistent with tab spacing, which is faster and easier for everyone to work with.
  • Be consistent with formatting.
    When jumping in to edit a theme, almost nothing is worse than finding poorly formatted code. If you’re going to release your theme to the public, take the time to format consistently. For example, don’t mix tabs and single spaces; use the same number of tabs for similarly indented lines; and basically clean up your mess before rolling it out.
  • Be consistent with details.
    Sure, you could write either something() or something(); (note the terminating ;), but by being consistent with such details, you further improve the readability, accuracy and general appeal of your code.
  • Include concise, descriptive comments.
    Use // (for single-line comments) and /**/ (for multiple-line comments) to add concise and meaningful comments to your code. But don’t overdo it — getting carried away and adding too many comments is easy, which is arguably worse than having too few comments. A general rule of thumb is to be concise and let the code speak for itself.
  • Mind your line breaks.
    Don’t break lines of code unless you have good reason to do so. For example, don’t put every inline HTML tag on its own line; don’t break apart SQL queries; and so forth. When you do need to break a line, do it where it makes the most sense, such as after opening brackets, between block-level HTML elements and after array items.
  • Take advantage of the hierarchy.
    Keep code simple and manageable by moving repeated sections of code to their own template files. For example, instead of including an entire loop in five different theme files, simply place it in a file named loop.php and include it as needed. Doing so will improve the usability of your source code and reduce the amount of work required to make sweeping changes.
  • Keep it simple.
    Keep your theme files as clean as possible by using default template tags and functionality wherever feasible. If and when you do need to include some majorly awesome piece of custom-scripting genius, do it via the theme’s functions.php file, rather than dumping it into, say, sidebar.php.
  • Meta-organize it.
    When scanning the source code of your theme files, a person should be able to recognize the various sections easily. Use tab indents and line breaks consistently to distinguish between template features, conditional functionality and other logically associated segments.
  • Strive for clean markup.
    Perhaps the best way to make a good impression with your publicly released theme is to ensure that the HTML output is clean and well organized. After installing a theme, a user can easily gauge the level of attention to detail by taking a quick look at the source code. You want your users to see nothing but beautiful HTML markup25.
  • Check your sanity.
    Step back and look at the source code. Is it clean, well organized and complete? Does white space follow the closing /> tag? Do comments outweigh the actual code? Doing a quick check for formatting can help you catch things that you may have missed while throwing down in the thick of it.

Jeff adds:

“In addition to clean, well-organized code, I also like to include a proper readme.txt file. Descriptive and helpful readme files are a win-win: developers decrease the number of support requests, while users are able to make it work the first time.”

Tweak Your CSS In The Browser

Many of today’s Web browsers have built-in tools for improving and tweaking a design, debugging and development. Rafal Tomal26, lead designer at Copyblogger Media27, chooses Chrome Developer Tools28 to quickly edit a theme’s CSS. In his own words, Rafal explains how to do it:

“Editing CSS code in big and complex themes can be difficult and annoying, especially if you are working on someone else’s theme and you don’t know the code structure at all.

Every modern popular browser has a built-in “developer tools” panel, which will help you quickly find the CSS code of a particular element. Also, many plugins are available (like FireBug29) that offer more advanced functionality.

I prefer Google’s Chrome Developer Tools because it’s fast and very simple to use. All CSS changes you make are automatically visible on your website. Of course, none of these changes are saved in the file. Once you refresh it, you’ll lose them.

It’s very helpful if you need to quickly test some CSS changes or find a particular element in the code. Then, you can edit the CSS file in your editor and apply the changes.

To use it, first open the Developer Tools window by right-clicking your mouse on any element on the website that you want to edit, and then choose “Inspect element” (or press Control + Shift + I on Windows or Command + Option + I on Mac at any time):”

Screenshot Chrome Inspect Element30

Screenshot Chrome Developer Tools31
Inspecting elements and making your CSS changes visible through Google’s Chrome Developer Tools.

Here is a guideline on how the Developer Tools can help you edit a WordPress theme:

  1. Click on any tag in the code view to see its CSS code on the right side. Click the small black arrow to expand the nested elements (you can also use the arrows on your keyboard). You can add attributes to the tags, remove entire nodes, copy them, etc.
  2. Use this tool to click on any element on your current website and see its CSS code in the Developer Tools.
  3. Click to open Developer Tools in a new window.
  4. Uncheck boxes to disable particular CSS declarations.
  5. Click on any CSS value or property to edit it. Click after the { or before the } to add a CSS declaration.
  6. Right-click on an image’s URL to quickly copy the path or open the background image in a new tab.
  7. Click to preview the entire CSS file and the particular element’s code. This is very helpful if multiple CSS files are loaded in one theme (for example, because of external plugins).
  8. Click to add a new style rule.
  9. The currently selected element in Developer Tools highlights the area on your live website and shows its dimensions.

Editing the theme’s CSS is much easier when you can quickly find the place you need to modify.

These tips on what you can do with Developer Tools are, of course, very simple. Learn more about it on Google’s Chrome Developer Tools32 website.

Other In-Browser Editing Resources

Use A Preprocessor

A CSS preprocessor turns code written in the preprocessed language into standard old CSS. This optimizes your workflow and can shave hours off development time. It also provides you with more functionality, such as variables and nested rules. At The Theme Foundry, Drew uses Sass5535 in all of his theme development:

“They help keep your style sheets DRY36, extensible and easy to manage. Once you start using these languages, you’ll realize how repetitive and tedious it is to write plain old CSS.”

The Theme Foundry uses preprocessors such as Sass and LESS during development. Then it compiles them to normal CSS, which can be minified in a production environment. Drew includes the Sass files in themes sold through the Theme Foundry so that the files can be customized with a tool such as Compass5737.

Preprocessor Resources

Use A Starter Theme

A few years ago, everyone was using a theme framework as the starting point of their theme development. The framework would come with loads of functionality for the designer or developer to use. More recently, there has been a move towards starter themes.

A starter theme kicks off your development with the bare bones of what you need to make a powerful theme. Hugo Baeta41, a designer at Automattic, uses Underscores42 (_s for short) for all of his theme development. I asked Hugo why he uses a starter theme:

“It cuts down my development time greatly. I’m not a native developer, and with the way WordPress is growing, some things are not so simple to achieve anymore. Especially with the use of functions and actions, it starts to go beyond my skill set with PHP. _S provides all that — or at least the most commonly used features — so the designer doesn’t have to think about it, or spend time researching.

It’s an amazing time-saver. If I’m doing a simple blog theme, I can code it up in a couple of days easily. Some people might say that using a starter theme forces you to learn the way it is marked up first, which is true. But if you’ve ever had to deal with Twenty Eleven or Twenty Twelve, the markup is quite similar.”

Underscores comes with the following features to streamline your development:

  • Lean, well-commented, modern HTML5 templates;
  • A 404 template;
  • A sample custom header implementation in inc/custom-header.php, which can be activated by uncommenting one line in functions.php and adding the code snippet found in the comments of inc/custom-header.php to your header.php template;
  • Custom template tags in inc/template-tags, which keep your templates clean and neat and prevent code duplication;
  • Sample theme options in /inc/theme-options/, which can can be activated by uncommenting one line in functions.php;
  • Some small tweaks in /inc/tweaks.php, which can improve your theming experience and which can be activated by uncommenting one line in functions.php;
  • Keyboard navigation for image attachment templates (the script can be found in js/keyboard-navigation.js and is enqueued from the image attachment template, image.php);
  • A script at js/small-menu.js that makes your menu a toggled drop-down for small screens (such as phones) and ready for CSS artistry (it’s enqueued in functions.php);
  • Five sample CSS layouts in /layouts (two sidebars on the left, two sidebars on the right, a sidebar on either side of your content, and two-column layouts with sidebars on either side);
  • Organized starter CSS in style.css, which will help you get your design off the ground quickly;
  • The GPL license in license.txt.

Other Starter Themes

Break Rank

Some final advice from happytables46 founder Noel Tock47:

“WordPress themes have long been stuck in their ways when it comes to layout. We’ve come to always expect a header, traditional navigation, content, sidebar(s) and a footer. Starter themes, frameworks and various tutorials also encourage us to use this outdated structure.

By continually trying to fill containers like marking items off a checklist, we neglect the most important parts of the website.”

Break the layout rank.48

My advice and challenge is straightforward. Tackle the following goals the next time you start a theme:

  • Design for real content. Lorem Ipsum, placeholders and other fluff will only pollute your concepts.
  • Bring your content to life through relevant and appropriate typography. Figuring this out early on will help you set the mood for the rest of the process.
  • Finally, give your theme room to breath by enabling it to coexist with all devices from the start.

The Web of tomorrow will not be about your widgetized areas or complicated navigation, but about the consumption of real and valuable content. Build for it instead of burying it.

Conclusion

Designing and developing a theme can take a lot of time, and it is based on a lot of learning. Hopefully, these techniques will help you refine your workflow, saving you time and making you more efficient. Got any more design or development techniques? We’d love to hear about them in the comments! And be sure to check out the resources and helpful tools below.

Resources

(al)

Footnotes

  1. 1 http://www.smashingmagazine.com/wp-content/uploads/2013/01/splash.jpg
  2. 2 http://woothemes.com
  3. 3 http://ideas.woothemes.com
  4. 4 http://photoshopetiquette.com/
  5. 5 http://lesscss.org/
  6. 6 https://trello.com/
  7. 7 http://teamgantt.com/
  8. 8 http://www.smashingmagazine.com/wp-content/uploads/2013/01/woo_athena.png
  9. 9 http://www.bugherd.com/
  10. 10 http://www.smashingmagazine.com/wp-content/uploads/2013/01/woo_canvas.png
  11. 11 http://media.smashingmagazine.com/wp-content/uploads/2013/01/woo_canvas.png
  12. 12 http://chriscoyier.net/
  13. 13 http://www.apachefriends.org/en/xampp.html
  14. 14 http://wpmu.org/install-wordpress-locally-on-windows-with-xampp/
  15. 15 http://rzen.net/development/local-develoment-in-osx/
  16. 16 http://www.wampserver.com/en/
  17. 17 http://thethemefoundry.com/
  18. 18 http://wordpress.org/extend/themes/twentytwelve
  19. 19 http://livereload.com/
  20. 20 http://forge.thethemefoundry.com
  21. 21 http://gitimmersion.com/
  22. 22 http://think-like-a-git.net/
  23. 23 http://try.github.com/levels/1/challenges/1
  24. 24 http://perishablepress.com/
  25. 25 http://css-tricks.com/what-beautiful-html-code-looks-like/
  26. 26 http://rafaltomal.com/
  27. 27 http://www.copyblogger.com/
  28. 28 https://developers.google.com/chrome-developer-tools/docs/overview
  29. 29 http://getfirebug.com/
  30. 30 http://www.smashingmagazine.com/wp-content/uploads/2013/01/sp1.jpg
  31. 31 http://www.smashingmagazine.com/wp-content/uploads/2013/01/chrome.jpg
  32. 32 https://developers.google.com/chrome-developer-tools/
  33. 33 http://getfirebug.com/
  34. 34 http://www.studiopress.com/tips/using-firebug.htm
  35. 35 http://sass-lang.com/
  36. 36 http://en.wikipedia.org/wiki/Don't_repeat_yourself
  37. 37 http://compass-style.org/
  38. 38 http://www.vanseodesign.com/css/css-preprocessors/
  39. 39 http://css-tricks.com/musings-on-preprocessing/
  40. 40 http://www.noeltock.com/web-design/wordpress/using-less-with-wordpress/
  41. 41 http://hugobaeta.com/
  42. 42 http://underscores.me/
  43. 43 http://bootstrapwp.rachelbaker.me/
  44. 44 http://themble.com/bones/
  45. 45 http://wordpress.org/extend/themes/boilerplate
  46. 46 http://happytables.com
  47. 47 http://noeltock.com
  48. 48 http://www.smashingmagazine.com/wp-content/uploads/2013/01/layouts.jpg
  49. 49 https://trello.com/
  50. 50 http://www.bugherd.com/
  51. 51 http://www.mamp.info/en/index.html
  52. 52 http://www.apachefriends.org/en/xampp.html
  53. 53 http://livereload.com/
  54. 54 http://forge.thethemefoundry.com
  55. 55 http://sass-lang.com/
  56. 56 http://lesscss.org/
  57. 57 http://compass-style.org/
  58. 58 http://photoshopetiquette.com/

↑ Back to topShare on Twitter

Siobhan McKeown is a big fan of words, and of WordPress, which works out pretty well since she runs Words for WP, the only copywriting service dedicated to WordPress service providers. You can find her on her personal blog, twitter and occasionally hanging out on G+.

Advertising

Note: Our rating-system has caused errors, so it's disabled at the moment. It will be back the moment the problem has been resolved. We're very sorry. Happy Holidays!

  1. 1

    Very informative article. Lots of useful links that I bookmarked from this article.

    • 2

      I am confused about how and why people develop locally when working in a team? Everyone has their own copy of files on their computer, and the main repo is still separate.

      One way I guess, git helps here. But How?

  2. 3

    Nice to know I’ve been doing it right for quite a while now. I already do pretty much all of this :) (especially the process WooThemes takes – they could be sitting in *my* office)

    I would like to add a couple of resources you didn’t mention: I find CSS Edit (with Mac Rabbit Espresso) and ServerPress to be EXCELLENT. I used to use XAMPP (when I was on Windows) and MAMP (when I switched to Mac) to be nice, but ServerPress has been even easier than both of them.

    • 4

      It’s always awesome to know your intuition has since become best practice, right? ;)

      Does your office happen to be in a exotic location, preferably warm? That’d be a nice change of scenery from the ice here.

      I’ve been using DesktopServer as well for the last 3 months, rid myself of many MAMP issues I had around permissions.

    • 5

      A lot of people have been recommending ServerPress to me recently. I tried it out for the first time and it seems pretty good. The only reason I’ve not switched is that MAMP is working out for me and it takes 30 seconds to set up a new local install. If it’s not broken, don’t fix it, right :)

      I would have included it in the article if I’d know about it before I wrote it. It’s definitely worth people checking out.

    • 6

      How have you been able to get CSSedit to recognize the server when using Serverpress? I have been trying a little while now and haven’t been able to get it working.

      • 7

        Christopher Anderton

        August 12, 2013 8:26 pm

        I still use the Combo CSS Edit 2.6.x and Espresso. While CSSEdit 2.6-x does not have autocomplete for new tags (i got a somewhat updated preferences file on Github with lot’s of updates to CSSEdit 2.6 autocomplete), the UI is so much better than Espressos CSS editor (why they call it CSSEdit 3 i don’t know) and have a couple of features not avaible in Espresso.

        Else, my tools of the trade is:

        Espresso (with some nice sugars)
        CSSEdit 2.6.x
        MAMP (have a script setting up a new WP enviroment with starter themes with a double click)
        LiveReload
        Couple of small apps created with Fluid.app (mostly CSS, PHP and Color)
        Photoshop (grids, layer comps, versioning, layershapes)
        GitHub For Mac (testing out ForkLift also)
        ImageAlpha/ImageOptimize combo

        My favorites are my custom Automator scripts that make common tasks really quick and easy. Like setting up a project folder with a nice structure with assets (grids, palettes, documentation templates and so on). It’s worth the time to sit down and learn Automator.

        SM: Your spambot kicked in on my comment when i used my shorthand email adress i created a couple of days ago?

  3. 8

    That’s a valuable resource, however regarding the code quality I’d definitely recommend at first place the Theme Review guidelines from the WordPress.org Theme Reviewers Team. This resource together with the test data is used by the official WordPress.org theme repository, as well as from several other major theme markets to ensure that the top code quality with least compatibility issue reports has been reached.

    • 9

      Yeah, that’s absolutely true. The Theme Review guidelines are very useful for ensuring that people have good quality code.

      An even better thing to do is to actively get involved with the Theme Review team. This way you get to know the guidelines, and you spend time looking at other people’s code. You learn what works and what doesn’t, and pick up tricks when someone does something particularly well.

  4. 10

    Rohit @ The Money Mail

    February 21, 2013 5:32 am

    I would always love to go for a person who is local and I can beet to solve any issues I am facing with the site design and layout. But the personal finance blogger in me says, go for a template, don’t splurge

  5. 11

    Read it full and will be diving into SASS and Starter Theme concepts soon.

    Though as I do stuff with Genesis Framework, I feel that once you get to know actions, hooks and filters, things go much smoothly (though I too am getting around many concepts yet! :) ). But as rightly said, worth of starter themes can’t be ignored too, as everyone around is praising them.

    Nice writeup as always. Cheers.

    • 12

      Developer-focused frameworks such as Genesis are definitely the tool of choice for lots of people – some of whom develop websites only with Genesis. It’s a fantastic tool, but like any tool it’ll work for some situations and not all. Sometimes, you just don’t need all of that functionality, and in those situations a slimmed down starter theme can be a good place to start.

  6. 13

    Hey,

    thanks for the great tips. Exactly what i needed right now ;-)
    What i was missing is more advices on the workflow. It seems like Mark Forrester is developing directly in their starter-theme? Isn’t ist faster to start with plain HTML, CSS, JS and then put it into a WP starter theme?
    Thanks and cheers

    • 14

      Hey Christoph, having designed over 100 premium themes we’ve perfected our starter theme and WooFramework engine powering all our themes. We need consistency in our code to help deal with the sheer number of themes and users.

      The starter theme contains all the possible layout divs and classes we might require, and very lean CSS styling.

      • 15

        Thanks Mark for your answer. This means your are developing right in your WP starter-theme in a local server environment? Additionally you are dealing with WP php functions and WP backend content next to developing html, css and js?
        Isn’t it a distraction when you work on functionality next to basic layout? Or am i getting you wrong?
        Thanks and cheers

  7. 16

    nice roundup!
    one more nice thing would be if we could edit sass files directly in chrome developer tools and also save them from dev tools.

  8. 18

    I’m echoing everyone else’s comments on your piece. Great job! Does anyone here know how to install a multisite network using MAMP? Seems like the installation works best for single sites only.

  9. 21

    I have great fun with the H5 template offered by Chris Coyier and Jeff Starr. It’s a whittled-down, minimal HTML5/CSS2.1 template with no divs, spans, classes, or ids. It’s simple enough even for my pea brain, and gives great insight into all the things involved. With that plus the very good online WordPress.org docs you might have all you need. I rewrote a version for my own template.

  10. 22

    One of my complaints about WordPress is that a lot of the tools you mention and which I rely on (git, for instance) are hard to use effectively with WordPress. WordPress was made to be built in a live environment (which is why it’s such a pain to move the db). There are no built-in tools to specify a local and production db, assets (uploaded) are a mess, deployment can be frustrating, etc.

    Let’s take git as an example. All the benefits you mention are spot on. However, in the typical WP flow, you’re not going to be tracking uploaded assets, upgraded plugins, or the core. WordPress is fine right up until you put it online.

    There are fixes which bring professional development methods to WordPress (like WP-Stack), but that isn’t very accessible to most front end developers.

    If someone knows of something like WP-Stack which is a little easier to learn (or even a good tutorial), I’ll go back to WordPress happily (even at the loss of Haml). Until then I’m going to continue to advocate for hand-crafted, custom solutions that start with something like Middleman.

  11. 24

    Excellent, informative article. I have been toying around with the idea of releasing a commercial WordPress theme for a while, so this was super interesting!

  12. 25

    Great article. More on developing locally – for those who are developing on Windows, hosting your local copy works quite well in IIS. When I’m developing on Windows, this is my go to basic configuration (web.config) for the WordPress rewrite rules in IIS: https://gist.github.com/dylanjmcdonald/5005790

  13. 26

    Awesome awesome article. With the whole project management, it seems bit much though, going from one app to manage the project, then another app to manage milestones. I guess whatever works.

    Also, another starter theme, genesissandbox.com, for the Genesis Framework.

  14. 27

    Live Reload! Never heard of it before! Going to check it out. Thanks.

  15. 28

    WebMatrix is really useful for WordPress development on Windows
    http://www.microsoft.com/web/webmatrix/

  16. 29

    One alternative could be – sandpress.org – password protected WordPress sandboxes, which help you to spin up a new development in seconds

  17. 30

    ServerPress Desktop Server is another solution that deserves mention. The premium version has some amazing features that both Mamp and XAMPP lack.

  18. 31

    For anyone wanting to get the most out of Chrome Developers Tools, this is a great video that goes over the “secrets” and lesser-known features: https://vimeo.com/53073654

  19. 32

    First of all: thanks for article, Siobhan! It’s nice to have almost all the helpful links in one place.

    If you guys like Livereload — you should definitely check out CodeKit, it has more awesome features than you can imagine.

    And please, don’t forget about responsiveness of your design, it’s pretty cool to have one website for all the devices!

  20. 33

    Siobhan – Just letting you know you can save your css changes made in chrome developer tools. http://www.youtube.com/watch?v=N8SS-rUEZPg&t=8m10s such a life saver.

  21. 34

    This was a very extensive and informative article on some of the most profound coding rules that have been around for centuries. That and a few quick tips and links to tools that can make life as a wordpress theme developer/designer much easier/fun whilst leaving some breathing room for experimenting.

    Thank you Smashing Magazine!

  22. 35

    Love Trello :) and, unfortunately, I’ve learned that I’m an FTP commando…lol
    thanks for the links.

  23. 36

    Wow, great informative article. I know that I’m guilty for not using Git (or any svn) and I really need to get on it soon because I’m starting to do more complex projects. I’m loving the resources you posted though. Huge thanks. :)

  24. 37

    Thanks Siobehan! The “Peek into Woo” section was awesome. I always felt like a newbie designing in Photoshop. I thought all the pros used Fireworks. That was interesting.

  25. 38

    Nice article, it’s totally the way i work. Trello + MAMP + Sass really make the theme dev easier & faster.

    I also use a Foundation WP template to start quickly with a responsive blank theme. Usually Foundation-master : https://github.com/drewsymo/Foundation

  26. 39

    How about deploying database? How can we reach to an fully automatic deployment process? (git+database+ftp)

  27. 40

    Great post… as a theme vendor I can say that unfortunately there are many theme developers who do not follow some or many of these practices;)

  28. 41

    Under “Use A Preprocessor” heading , I think there’s a spelling error in first paragraph 2nd line i.e ‘and can shave hours off development time’ … you meant to say ‘save’?

  29. 43

    Really neat to see how a successful theme shop manages their development. Thank you for the behind the scenes peek.

  30. 44

    Thanks for this useful resource. I spend a lot of time on my WordPress development workflow. I use twitter bootstrap for quick in-browser prototyping. works great for me.

  31. 45

    Sebastian Starke

    July 3, 2013 12:37 am

    I find the MAMP tutorial video a bit confusing. Also I’m working with XAMPP. Does anyone know a good WordPress / XAMPP / Github Tutorial? I googled for a while now, but could not find anything useful.

  32. 46

    Nice article, we used Git to develop our website builder at DishGo. Not being familiar with terminal, I began using Source Tree which was extremely simply to use. You can check out our work at https://dishgo.io

  33. 47

    Hemant Infotech

    August 7, 2014 5:36 pm

    Nice article

Leave a Comment

Yay! You've decided to leave a comment. That's fantastic! Please keep in mind that comments are moderated and rel="nofollow" is in use. So, please do not use a spammy keyword or a domain as your name, or else it will be deleted. Let's have a personal and meaningful conversation instead. Thanks for dropping by!

↑ Back to top