Bootstrapping your plugin

932 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
932
On SlideShare
0
From Embeds
0
Number of Embeds
57
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Bootstrapping your plugin

  1. 1. BOOTSTRAPPING YOUR PLUGIN Marko Heijnen WordCamp NYC 2014
  2. 2. MARKO HEIJNEN •Founder  of  CodeKitchen   •Work  for  1&1   •Lead  developer  of  GlotPress   •Core  contributor  for  WordPress WORDPRESS DEVELOPER The Netherlands
  3. 3. TODAY’S
 TOPICS • Features of a plugin • Setting up your plugin • Automation of your tasks
  4. 4. THE START You have a great idea and want to build it. You first start by writing what it should do and plan ahead.
  5. 5. IN TERN ATIO N ALIZATIO N C SS /JAVASC RIPT VERSIO N C O N TRO L C O M PILIN G LESS/SASS C O N C ATEN ATE JSH IN T PH PU N IT /Q U N IT C O M PRESS PLU G IN H EADERS & READM E BU ILD PRO C ESS M IN IFIC ATIO N EAC E DESIG N LO C ALIZATIO N KEEP U P TO DATE LO G O TY REQUIREMENTS OF A PLUGIN
  6. 6. SETTING UP YOUR PLUGIN
  7. 7. DO IT YOUR SELF Doing the same things again, over and over
  8. 8. MAIN FILE <?php /* Plugin Name: Tabify edit screen Plugin URI: http://rocksta.rs/plugin/tabify-edit- screen Description: Enables tabs in the edit screen and manage them from the back-end Author: Marko Heijnen Text Domain: tabify-edit-screen Version: 0.8.3 Author URI: http://markoheijnen.com */
  9. 9. USE A SCAFFOLD wp  scaffold  plugin  my-­‐cool-­‐plugin   ! [--plugin_name=<title>] What to put in the ‘Plugin Name:’ header [--skip-tests] Don’t generate files for unit testing. [--activate] Activate the newly generated plugin.
  10. 10. AND YOU WRITE YOUR PLUGIN But creating your plugin isn’t all about the code. It also mean maintenance of it.
  11. 11. SETTING UP YOUR UNIT TESTS wp  scaffold  plugin-­‐tests   • phpunit.xml is the configuration file for PHPUnit • .travis.yml is the configuration file for Travis CI • tests/bootstrap.php is the file that makes the current plugin active when running the test suite • tests/test-sample.php is a sample file containing the actual tests 11
  12. 12. SETTING UP YOUR UNIT TESTS My  basic  tests  are:   • test_tested_up_to • test_stable_tag • test_package_json 12 h>ps://github.com/markoheijnen/tabify-­‐edit-­‐screen/blob/master/tests/test-­‐plugin.php
  13. 13. AUTOMATION OF YOUR TASKS
  14. 14. YOUR NORMALLY
 TASKS • Minify CSS/JS • Compress CSS/JS/Images • Concatenate CSS/JS • Validate JS • Create new pot file • Download translations • Unit test • Deploy
  15. 15. GRUNT •Running  tasks  by  using  CLI   •Easy  to  use,  harder  to  configure   •Extendable  with  your  own  plugins   •Uses  npm  for  plugin  management   THE JAVASCRIPT TASK RUNNER http://gruntjs.com
  16. 16. THE BASIC SETUP A typical setup will involve adding two files to your project: package.json and the Gruntfile
 • package.json
 This file is used by npm to store metadata for projects published as npm modules. You will list grunt and the Grunt plugins your project needs as devDependencies in this file. • Gruntfile
 Is used to configure or define tasks and load Grunt plugins.
  17. 17. PACKAGE.JSON { "name": "tabify-edit-screen", "version": "0.8.3", "description": "Enables tabs in the edit screen and manage them from the back-end", "repository": { "type": “git", "url": “https://github.com/markoheijnen/tabify-edit-screen.git" }, "author": "Marko Heijnen", "license": "GPLv2 or later", "devDependencies": { "grunt": "~0.4.5", "grunt-contrib-clean": "~0.5.0", "grunt-contrib-copy": "~0.5.0", "grunt-contrib-cssmin": "~0.10.0", "grunt-contrib-uglify": "~0.5.0", "grunt-glotpress": "~0.1.0", "grunt-wp-i18n": "~0.4.6" } }
  18. 18. INSTALLING DEPENDENCIES • npm install • This will install all plugins inside node_modules
  19. 19. GRUNTFILE.JS module.exports = function(grunt) { grunt.initConfig({ }); };
  20. 20. WHICH I’M USING Copy  files  and  folders. Compress  CSS  files. InternaPonalize   WordPress  themes  and   plugins Gets  translaPons  from  a   GlotPress  installaPon Clean  files  and  folders. Minify  javascript  files   with  UglifyJS. GRUNT-CONTRIB-CLEAN GRUNT-CONTRIB-COPY GRUNT-CONTRIB-CSSMIN GRUNT-CONTRIB-UGLIFY GRUNT-WP-I18N GRUNT-GLOTPRESS
  21. 21. CREATING POT FILE grunt.initConfig({ makepot: { core: { options: { domainPath: '/languages', type: 'wp-plugin', } } }, }); ! grunt.loadNpmTasks(‘grunt-wp-i18n’); ! grunt.registerTask('default', ['makepot:core']);
  22. 22. DOWNLOADING TRANSLATIONS grunt.initConfig({ glotpress_download: { core: { options: { domainPath: 'languages', url: 'http://wp-translate.org', slug: 'tabify-edit-screen', textdomain: 'tabify-edit-screen' } } }, }); ! grunt.registerTask('default', [‘glotpress_download:core']);
  23. 23. OTHER COOL PLUGINS Minify  GIF,  JPEG,  PNG   and  SVG  images Run  QUnit  unit  tests  in  a   headless  PhantomJS   instance. Compile  Sass  to  CSS Deploys  a  git  Repo  to   the  WordPress  SVN  repo Validate  files  with   JSHint. Run  predefined  tasks   whenever  watched  file   pa>erns  are  added,   changed  or  deleted. GRUNT-CONTRIB-JSHINT GRUNT-CONTRIB-IMAGEMIN GRUNT-CONTRIB-QUNIT GRUNT-CONTRIB-WATCH GRUNT-SASS GRUNT-WP-DEPLOY
  24. 24. THANKS
 QUESTIONS?
 @markoheijnen - markoheijnen.com

×