Bootstrapping your plugin
0 likes1,133 views
This document summarizes Marko Heijnen's talk on bootstrapping a WordPress plugin using automation. It discusses setting up the basic files and structure for a plugin, including internationalization, version control and compiling assets. It also covers automating common tasks like minification, validation and testing through Grunt plugins. Grunt is presented as a JavaScript task runner that can be used to define and run repetitive tasks like compressing files, validating code and deployments. Examples are provided for configuring Grunt to create POT files for internationalization, download translations from GlotPress and perform other automated tasks.
![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.](https://image.slidesharecdn.com/bootstrappingyourplugin-noanimation-140802101344-phpapp02/85/Bootstrapping-your-plugin-9-320.jpg)
![CREATING POT FILE
grunt.initConfig({
makepot: {
core: {
options: {
domainPath: '/languages',
type: 'wp-plugin',
}
}
},
});
!
grunt.loadNpmTasks(‘grunt-wp-i18n’);
!
grunt.registerTask('default', ['makepot:core']);](https://image.slidesharecdn.com/bootstrappingyourplugin-noanimation-140802101344-phpapp02/85/Bootstrapping-your-plugin-21-320.jpg)
![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']);](https://image.slidesharecdn.com/bootstrappingyourplugin-noanimation-140802101344-phpapp02/85/Bootstrapping-your-plugin-22-320.jpg)
Bootstrapping your plugin
- 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.
- 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
- 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