Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Automating WordPress Theme Development

1,639 views

Published on

Hardeep will talk about how you can automate tasks in your theme/plugin development process for testing and releasing to remove the hassle of manual testing and focus more on writing good code.

He will talk about how NPM, Grunt, Gulp, Sass and Travis CI with Github can help us automate some of our tasks and improve our development process. Attendees will leave understanding when and why they’d want to use these tools in a WordPress theme-specific context, and how they play together in a real-life workflow.

Published in: Internet
  • Be the first to comment

Automating WordPress Theme Development

  1. 1. Automating Theme Development Process @HardeepAsrani
  2. 2. I’m Hardeep Asrani ➤ Pirate at ThemeIsle.com ➤ WordPress Plugin/Theme Developer ➤ Part of WordPress Theme Review & Support Team ➤ Part of Kanpur FOSS Community And I’m Wapuu Saa!
  3. 3. Are you a developer?
  4. 4. Do you Automate your tasks?
  5. 5. Why Automate? What can it do for me?
  6. 6. ➤ Faster and error-free development ➤ More time to focus on development and logic ➤ More time == More money ➤ Cool lagta hai
  7. 7. What can you Automate?
  8. 8. All the Repetitive Tasks: ➤ Compile SASS, LESS, Stylus, etc. ➤ JSHint/ESLint ➤ Concatenate and Minify Assets (CSS & JS) ➤ Compress Images ➤ Code Sniffing ➤ Visual Regression ➤ Generate Pro/Lite versions from the same theme ➤ And more…
  9. 9. What do you need?
  10. 10. Environment + Package Manager
  11. 11. # Update Advanced Package Tool $ apt-get update # Install cURL, if not installed $ apt-get install curl # Download nodejs Package $ curl -sL https://deb.nodesource.com/setup_6.x | bash - # Install nodejs $ apt-get install -y nodejs # Initialize Project $ npm init
  12. 12. Let’s start with…
  13. 13. That SASS!
  14. 14. Why SASS?
  15. 15. Nesting .footer {     text-align: center;     background: #343434; } .footer .icons {     color: #000000;     float: left; } .footer {     text-align: center;     background: #343434;     &.icons {         color: #000000;         float: left;     } }
  16. 16. Mixins .btn-blue {     color: #3FA2F7;     width: 100px;     height: 50px;     text-align: center;     text-transform: uppercase;     font-weight: bold; } .btn-black {     color: #000;     width: 100px;     height: 50px;     text-align: center;     text-transform: uppercase;     font-weight: bold; } @mixin button {     width: 100px;     height: 50px;     text-align: center;     text-transform: uppercase;     font-weight: bold; } .btn-blue {     color: #3FA2F7;     @include button; } .btn-black {     color: #000;     @include button; }
  17. 17. And more, like functions and extend.
  18. 18. Installing SASS # Install Ruby $ apt-get install ruby-full # Install SASS $ gem install sass # Check SASS Version $ sass -v # Compile SASS $ sass --watch input.scss output.css
  19. 19. Tired of compiling SASS?
  20. 20. Introducing…
  21. 21. Task Runners
  22. 22. # Install Grunt $ npm install grunt # Install Grunt CLI $ npm install -g grunt-cli # Install SASS Grunt Task $ npm install grunt-contrib-sass --save-dev
  23. 23. module.exports = function(grunt) {          grunt.initConfig({         sass: {             dist: {                 files: {                     'main.css': 'main.scss',                 }             },         }     });          grunt.loadNpmTasks('grunt-contrib-sass');     grunt.registerTask('default', [’sass’]);      }; Gruntfile.js
  24. 24. JSHint/ESLint # Install JSHint $ npm install grunt-contrib-jshint --save-dev Write error free JavaScript.
  25. 25. module.exports = function(grunt) {          grunt.initConfig({         jshint: {             files: ['Gruntfile.js', 'assets/js/*.js'],             options: {                 globals: {                     jQuery: true                 },                 ignores: ['assets/library/*.min.js']             },         }     });          grunt.loadNpmTasks('grunt-contrib-jshint');     grunt.registerTask('default', [‘jshint’]);      }; Gruntfile.js
  26. 26. # Install Babel & Babel Grunt Task $ npm install --save-dev grunt-babel babel-core babel-preset-env Use next generation JavaScript, today.
  27. 27. module.exports = function(grunt) {          grunt.initConfig({         babel: {             options: {                 sourceMap: true,                 presets: ['env']             },             dist: {                 files: {                     'dist/script.js': 'src/script.js'                 }             }         }     });     grunt.loadNpmTasks('grunt-babel');     grunt.registerTask('default', 'babel');      }; Gruntfile.js
  28. 28. Write Better PHP
  29. 29. ➤ PHP Code Sniffer: https://github.com/squizlabs/PHP_CodeSniffer ➤ PHP Code Sniffer Grunt Task: https://github.com/SaschaGalley/grunt-phpcs ➤ WordPress PHPCS Standards: https://github.com/WordPress-Coding-Standards/ WordPress-Coding-Standards ➤ PHPUnit: https://github.com/SaschaGalley/grunt-phpunit ➤ PHP Code Beautifier and Fixer: https://github.com/mducharme/grunt-phpcbf ➤ PHP Lint: https://github.com/jgable/grunt-phplint
  30. 30. Make Your CSS Work on all Browsers # Install PostCSS $ npm install grunt-postcss --save-dev # Install WP-CSS $ npm install grunt-wp-css —save-dev ➤ Add vendor prefixes to CSS rules using values from Can I Use. ➤ Enforce consistent conventions and avoid errors in your stylesheets with stylelint. ➤ Write stylesheet according to WordPress CSS coding standards.
  31. 31. Compress Images + Minify CSS/JS Speed-up your WordPress Theme # Minify images using imagemin $ npm install --save-dev grunt-contrib-imagemin # Minify JS with Uglify $ npm install grunt-contrib-uglify —save-dev # Minify CSS $ npm install grunt-contrib-cssmin —save-dev
  32. 32. And the most boring important task…
  33. 33. Generate Translation (POT) File Make your theme translatable. # Check your code for missing or incorrect text-domain in gettext functions $ npm install grunt-checktextdomain --save-dev # Geenrate POT File $ npm install grunt-wp-i18n --save-dev
  34. 34. All these tasks with one command.
  35. 35. The Workflow is Reusable
  36. 36. Our Grunt Workflow https://github.com/Codeinwp/grunt-theme-fleet/
  37. 37. Tired of making different Lite/Pro versions?
  38. 38. PHP 5.6 HHVM PHP 7.1 PHP 5.3 PHP 7.0 PHP 5.2
  39. 39. Visual Regression
  40. 40. Overview ➤ Find tasks that can be automated. ➤ Setup a grunt/gulp task to automate it. ➤ Build your workflow. ➤ Reuse it.
  41. 41. Resources ➤ nodejs: https://nodejs.org/en/ ➤ npm: https://www.npmjs.com/ ➤ Grunt: https://gruntjs.com/ ➤ Sass: http://sass-lang.com/ ➤ Babel: http://babeljs.io/ ➤ Grunt Tasks: https://gruntjs.com/plugins ➤ Travis CI: http://travis-ci.com/
  42. 42. Thank you ➤ Twitter: @HardeepAsrani ➤ Github: https://github.com/HardeepAsrani/ ➤ Website: http://www.hardeepasrani.com/ You’re welcome.

×