Your SlideShare is downloading. ×
0
Bootstrapping your plugin
Bootstrapping your plugin
Bootstrapping your plugin
Bootstrapping your plugin
Bootstrapping your plugin
Bootstrapping your plugin
Bootstrapping your plugin
Bootstrapping your plugin
Bootstrapping your plugin
Bootstrapping your plugin
Bootstrapping your plugin
Bootstrapping your plugin
Bootstrapping your plugin
Bootstrapping your plugin
Bootstrapping your plugin
Bootstrapping your plugin
Bootstrapping your plugin
Bootstrapping your plugin
Bootstrapping your plugin
Bootstrapping your plugin
Bootstrapping your plugin
Bootstrapping your plugin
Bootstrapping your plugin
Bootstrapping your plugin
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Bootstrapping your plugin

506

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
506
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. BOOTSTRAPPING YOUR PLUGIN Marko Heijnen WordCamp NYC 2014
  • 2. MARKO HEIJNEN •Founder  of  CodeKitchen   •Work  for  1&1   •Lead  developer  of  GlotPress   •Core  contributor  for  WordPress WORDPRESS DEVELOPER The Netherlands
  • 3. TODAY’S
 TOPICS • Features of a plugin • Setting up your plugin • Automation of your tasks
  • 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. 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. SETTING UP YOUR PLUGIN
  • 7. DO IT YOUR SELF Doing the same things again, over and over
  • 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. 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. AND YOU WRITE YOUR PLUGIN But creating your plugin isn’t all about the code. It also mean maintenance of it.
  • 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. 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. AUTOMATION OF YOUR TASKS
  • 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. 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. 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. 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. INSTALLING DEPENDENCIES • npm install • This will install all plugins inside node_modules
  • 19. GRUNTFILE.JS module.exports = function(grunt) { grunt.initConfig({ }); };
  • 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. CREATING POT FILE grunt.initConfig({ makepot: { core: { options: { domainPath: '/languages', type: 'wp-plugin', } } }, }); ! grunt.loadNpmTasks(‘grunt-wp-i18n’); ! grunt.registerTask('default', ['makepot:core']);
  • 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. 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. THANKS
 QUESTIONS?
 @markoheijnen - markoheijnen.com

×