CodeKitchenWordCamp Sofia 2013
Building plugins like a proWordCamp Sofia - 2013
CodeKitchenWordCamp Sofia 2013
Who I am?• Marko Heijnen
• Founder of CodeKitchen
• Working at 1&1
• WordPress core contributor
• GlotPress core developer
• Recent rockstar of 3.4
• Co author of WP_Image_Editor
CodeKitchenWordCamp Sofia 2013
You want to build a great plugin
CodeKitchenWordCamp Sofia 2013
Start using define('WP_DEBUG', true);
and you are done ;)
CodeKitchenWordCamp Sofia 2013
First you need to improve yourself
CodeKitchenWordCamp Sofia 2013
Step 1: Improve your workflow
CodeKitchenWordCamp Sofia 2013
Invest time to choose an editor
CodeKitchenWordCamp Sofia 2013
Start using a version control
CodeKitchenWordCamp Sofia 2013
My setup• Using Sublime Text editor
• Using Git as version control
• Open source projects on GitHub
• Private projects on an own VPS with GitLab
• Using Tower as a GUI for Git
• For WordPress.org it’s SVN and I use svnX
CodeKitchenWordCamp Sofia 2013
Step 2: Understand WordPress
CodeKitchenWordCamp Sofia 2013
How the code is structured
CodeKitchenWordCamp Sofia 2013
A lot of awesome APIs
CodeKitchenWordCamp Sofia 2013
APIs• HTTP
• Filesystem
• Metadata
• Image manipulation
• Rewrite
• Shortcode
• Options
• Settings
• Theme modification
• Theme customization
• Transient
• Widgets
• File Header
• Database
CodeKitchenWordCamp Sofia 2013
1556 Hooks
CodeKitchenWordCamp Sofia 2013
Hooks is what makes WordPress run
• Almost everything can be adjusted with a hook
• Even WordPress core uses hooks a lot to do adjustments
• Understanding them is then really important
CodeKitchenWordCamp Sofia 2013
Step 3: Follow the code standards
CodeKitchenWordCamp Sofia 2013
Single vs double quotes
CodeKitchenWordCamp Sofia 2013
Tabs vs spaces
CodeKitchenWordCamp Sofia 2013
Brace style
CodeKitchenWordCamp Sofia 2013
No Shorthand PHP tags
CodeKitchenWordCamp Sofia 2013
White spacingSpaces all the things
CodeKitchenWordCamp Sofia 2013
And there are so many more
http://codex.wordpress.org/WordPress_Coding_Standards
CodeKitchenWordCamp Sofia 2013
Why is this important?• Readability of the code
• Makes your code looks great
• Seeing mistakes more easier
• Using a standard makes collaboration easier
CodeKitchenWordCamp Sofia 2013
Step 4: Know the requirements
CodeKitchenWordCamp Sofia 2013
Step 5: Build that awesome plugin
CodeKitchenWordCamp Sofia 2013
Define the focus
CodeKitchenWordCamp Sofia 2013
Define structure• Main file for initialization
• Use the plugin name as the main file name
• Rest of the files in folders
• OOP based / naming convention
• Folders like: css, images, js, inc, lib, languages
CodeKitchenWordCamp Sofia 2013
How does a main plugin file look like
CodeKitchenWordCamp Sofia 2013
<?php ! /* Plugin Name: Improved image editor Plugin URI: https://github.com/markoheijnen/Improved-image-editor Description: WordPress needs a better image editor UI so let this be it Author: Marko Heijnen Version: 0.1 Author URI: http://markoheijnen.com ! Text Domain: improved-image-editor Domain Path: /languages/ */ ! if ( ! defined( 'ABSPATH' ) ) { header( 'Status: 403 Forbidden’ ); header( 'HTTP/1.1 403 Forbidden’ ); } ! include 'inc/overwrite.php';
CodeKitchenWordCamp Sofia 2013
class Improved_Image_Editor { ! public function __construct() { add_action( 'init', array( $this, 'register_scripts_styles' ) ); add_action( 'current_screen', array( $this, 'current_screen' ) ); add_action( 'wp_enqueue_media', array( $this, 'load_template' ) ); ! add_filter( 'wp_image_editors', array( $this, 'wp_image_editors' ) ); ! add_filter( 'wp_image_editor_before_change', array( $this, 'wp_image_editor_before_change' ), 10, 2 ); } } ! $improved_image_editor = new Improved_Image_Editor;
CodeKitchenWordCamp Sofia 2013
Step 6 Unit test & test
CodeKitchenWordCamp Sofia 2013
Time to talk about some code
CodeKitchenWordCamp Sofia 2013
I released a few plugins on WordPress.org
CodeKitchenWordCamp Sofia 2013
Tabify Edit Screen• Enable tabs in the edit screen and manage
them from the back-end
• Cleans up the interface when you have lots of metaboxes
• Manage it all from the WordPress back-end
CodeKitchenWordCamp Sofia 2013
Biggest issue• Plugins that don’t add meta boxes with
add_meta_boxes
• Only call the hook when on a certain page
• Mostly because of weird lazy loading or combining that code with loading JS.
CodeKitchenWordCamp Sofia 2013
Expect WordPress will change
CodeKitchenWordCamp Sofia 2013
Some of the mistakes I made with this plugin
CodeKitchenWordCamp Sofia 2013
Forgot to update JS
CodeKitchenWordCamp Sofia 2013
Version 0.5, 0.5.1 and 0.5.2 released the same day
CodeKitchenWordCamp Sofia 2013
Playing to much with code
CodeKitchenWordCamp Sofia 2013
Even more stupid
CodeKitchenWordCamp Sofia 2013
What makes this a good plugin
• It’s an unique plugin that cares about UX
• No PHP notices that I know of
• Takes care if plugins fails to add meta boxes correctly
• Some specific designs for color schemes
• It works decent for non JS
CodeKitchenWordCamp Sofia 2013
Questions?@markoheijnen - http://markoheijnen.com