building plugins like a pro

CodeKitchenWordCamp Sofia 2013

Building plugins like a proWordCamp Sofia - 2013

http://2013.sofia.wordcamp.org/session/building-plugins-like-a-pro/


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


You want to build a great plugin


Start using define('WP_DEBUG', true);

and you are done ;)


First you need to improve yourself


Step 1: Improve your workflow


Invest time to choose an editor


Start using a version control


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

http://WordPress.org


Step 2: Understand WordPress


How the code is structured


A lot of awesome APIs


APIs• HTTP

• Filesystem

• Metadata

• Image manipulation

• Rewrite

• Shortcode

• Options

• Settings

• Theme modification

• Theme customization

• Transient

• Widgets

• File Header

• Database


1556 Hooks


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


Step 3: Follow the code standards


Single vs double quotes


Tabs vs spaces


Brace style


No Shorthand PHP tags


White spacingSpaces all the things


And there are so many more

http://codex.wordpress.org/WordPress_Coding_Standards

http://codex.wordpress.org/WordPress_Coding_Standards


Why is this important?• Readability of the code

• Makes your code looks great

• Seeing mistakes more easier

• Using a standard makes collaboration easier


Step 4: Know the requirements


Step 5: Build that awesome plugin


Define the focus


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


How does a main plugin file look like


<?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';


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;


Step 6 Unit test & test


Time to talk about some code


I released a few plugins on WordPress.org


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


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.


Expect WordPress will change


Some of the mistakes I made with this plugin


Forgot to update JS


Version 0.5, 0.5.1 and 0.5.2 released the same day


Playing to much with code


Even more stupid


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


Questions?@markoheijnen - http://markoheijnen.com

http://markoheijnen.com

building plugins like a pro

Technology