A Smarter WordPress Theme Design & Development Workflow with node.js, ruby, sass, bower and grunt

I was lucky to be one of the speakers at the WordCamp Mumbai, Mar 15-16, 2014. When I stumbled upon their Call for Speakers, I was excited with the speaking opportunity and an uncanny chance to visit Bombay after so many years. Thankfully, the organizing team accepted my proposal and thus, presented and spoke on, “A Smarter WordPress Theme Design & Development Workflow with node.js, ruby, sass, bower and grunt.”

Special thanks goes to Saneef Ansari, my business partner at Theme6 for helping me out iron the kinks and pushing codes so I could release our initial draft framework of WP-Portkey.

The idea behind the presentation was to introduce existing WordPress Designers and Developers to a more automated workflow so they can focus on what they do best - design and develop WordPress themes.

Browse, Download Files;

Here are the breakdown of the slides;

  1. Introducing myself - I’m Brajeshwar and I tweet @brajeshwar.
  2. In early days and even to these day, the most typical workflow of WordPress Theme Design and Development is to work on the PHP, CSS and JavaScripts on their own. Sometimes, we pick up from existing theme frameworks or a starter frame and goes on with the workflow and repeat it till we are happy with the outcome.
  3. We also have to refresh our browsers, on various permutations and combinations of Platforms, devices and browsers.
  4. Once we become good with this workflow, we even graduated to minifying the CSS, concatenate and uglify the JavaScripts to optimize our themes.
  5. We also needed to upload the files to our server - demo servers, client’s servers, etc.
  6. We also needed to clean the folders, files and create archives that can be uploaded for users to download or to merchant’s servers to sell the commercially paid ones.
  7. Well, there are better and smarter ways to work and improve the workflow so all the mundane and grunt of the task can be done effortlessly and seamlessly.
  8. This will help developers or a designers to focus on what they do best - design and development of the WordPress Theme.
  9. This will eventually saving time which can lead to a better Return on Investment, thus earning you more money.
  10. Tools such as Node.js and Ruby have lots of modules, gems that can help automate, simplify our design and development process. No, we’re not going to learn to write any codes neither in Node.js nor Ruby.
  11. “Bower is a package manager for the web. It offers a generic, un-opinionated solution to the problem of front-end package management, while exposing the package dependency model via an API that can be consumed by a more opinionated build stack. There are no system wide dependencies, no dependencies are shared between different apps, and the dependency tree is flat.” We can use Bower to manage the libraries and frameworks that will be used for WordPress Theme Development.
  12. Sass, Less or Stylus are powerful professional grade CSS extension languages to help and aid in CSS Development. The ability to use variables, mixins, placeholders, extend and inheritance are some of the powers of these extensions that makes life of a CSS developer easier, way easier.
  13. Grunt is the JavaScript Task Runner that will do all the grunt work, from running a development server to processing the pre-processors, livereload the changes to the browsers, to cleaning up the files, syncing with the servers to creating a clean archive of the WordPress Theme files.
  14. Well, with all these new tools, should you be scared? You were happy in the comfort of PHP, CSS and Javascript!
  15. This changes the whole thing.
  16. Why not try it, make mistakes and take small steps to master how to use these tools. The community is huge and people are eager to help. Just get started - Now.
  17. Then, everything will be just running grunt serve, grunt test, grunt build, grunt deploy, etc.
  18. Grunt will concatenate, minify and uglify your CSS, Javascript.
  19. Grunt can even burst the cache so your users or clients won’t complain about not working on their computer while you swear, “it works on my computer, have you cleared your cache.”
  20. Grunt can also help you release a clean archive which you can upload for your users or even to your merchant for distribution to paid users and new potential buyers.
  21. Deploy with Grunt, sit back and relax.
  22. Thanks to everyone for being part of my presentation.