Download - Bootstrapping your plugin
BOOTSTRAPPING YOUR PLUGINMarko HeijnenWordCamp NYC 2014
MARKO HEIJNEN
•Founder of CodeKitchen
•Work for 1&1
•Lead developer of GlotPress
•Core contributor for WordPress
WORDPRESS DEVELOPER
The Netherlands
TODAY’STOPICS
• Features of a plugin• Setting up your plugin• Automation of your tasks
THE START
You have a great idea and want to build it. You first start by writing what it should do and plan ahead.
INTERNAT
IONALIZ
ATIO
N
CSS / JAVA
SCRIPT
VERSION CONTR
OL
COMPILING LE
SS/SASSCONCAT
ENATE
JSHINT PHPUNIT
/ QUNIT
COMPRESS
PLUGIN HEADERS & README
BUILD PROCESS
MINIFICAT
ION
GUI DESIG
N
USER EXPERIENCE
INTERFA
CE DESIGN
LOCALIZ
ATIO
N
KEEP UP TO DAT
E
LOGOTY
PES
REQUIREMENTS OF A PLUGIN
USER WORKFL
OWS
SETTING UP YOUR PLUGIN
DO IT YOUR SELF
Doing the same things again, over and over
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 */
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.
AND YOU WRITE YOUR PLUGINBut creating your plugin isn’t all about the code. It also mean maintenance of it.
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 tests11
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
AUTOMATION OF YOUR TASKS
YOUR NORMALLYTASKS
• Minify CSS/JS• Compress CSS/JS/Images• Concatenate CSS/JS• Validate JS• Create new pot file• Download translations• Unit test• Deploy
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
THE BASIC SETUP
A typical setup will involve adding two files to your project: package.json and the Gruntfile
• package.jsonThis 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.
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" }
}
INSTALLING DEPENDENCIES
• npm install• This will install all plugins inside
node_modules
GRUNTFILE.JS
module.exports = function(grunt) { grunt.initConfig({ });};
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
CREATING POT FILE
grunt.initConfig({ makepot: { core: { options: { domainPath: '/languages', type: 'wp-plugin', } } },});!grunt.loadNpmTasks(‘grunt-wp-i18n’);!grunt.registerTask('default', ['makepot:core']);
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']);
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
THANKSQUESTIONS? @markoheijnen - markoheijnen.com