building plugins like a pro

CodeKitchenWordCamp Sofia 2013

Building plugins like a proWordCamp 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

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

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

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

building plugins like a pro

Technology

search like a pro

teaching like a pro

provisioning profiles like a pro

look like a pro, stadium graphics play like...

fsbo like a pro

solder like a pro

alex 4d - new free final cut pro x plugins - alex4d

box like pro

deploy like a pro!

shoot like a pro

barcamp film like a pro

market like a pro

building plugins for ida pro hex-rays ilfak guilfanov

troubleshooting email like a pro

sonnox fraunhofer pro-codec quick start...

synchro pro / open viewer / scheduler 2019.2 (v.6.2.1.3...

study like a pro!

dress like an architect, think like an anarchist | pro-walk...

how to use plugins like a rockstar

speak like a pro