advertisement

Building plugins like a pro

53 %
47 %
advertisement
Information about Building plugins like a pro
Technology

Published on October 27, 2013

Author: markoheijnen

Source: slideshare.net

Description

Building a plugin like a pro it’s not only about code, it’s also about how you do that. I talked about the workflow, how WordPress works and how I build plugins. I also discussed some mistakes I made along the way. Doing something in a hurry is never a good thing.
advertisement

Building plugins like a pro WordCamp Sofia - 2013 WordCamp Sofia 2013 CodeKitchen

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 WordCamp Sofia 2013 CodeKitchen

You want to build a great plugin WordCamp Sofia 2013 CodeKitchen

Start using define('WP_DEBUG', true); and you are done ;) WordCamp Sofia 2013 CodeKitchen

First you need to improve yourself WordCamp Sofia 2013 CodeKitchen

Step 1: Improve your workflow WordCamp Sofia 2013 CodeKitchen

Invest time to choose an editor WordCamp Sofia 2013 CodeKitchen

Start using a version control WordCamp Sofia 2013 CodeKitchen

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 WordCamp Sofia 2013 CodeKitchen

Step 2: Understand WordPress WordCamp Sofia 2013 CodeKitchen

How the
 code is structured WordCamp Sofia 2013 CodeKitchen

A lot of awesome APIs WordCamp Sofia 2013 CodeKitchen

APIs • • • • • • • HTTP Filesystem Metadata Image manipulation Rewrite Shortcode Options WordCamp Sofia 2013 • • • • • • • Settings Theme modification Theme customization Transient Widgets File Header Database CodeKitchen

1556 Hooks WordCamp Sofia 2013 CodeKitchen

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 WordCamp Sofia 2013 CodeKitchen

Step 3: Follow the code standards WordCamp Sofia 2013 CodeKitchen

Single vs double quotes WordCamp Sofia 2013 CodeKitchen

Tabs vs spaces WordCamp Sofia 2013 CodeKitchen

Brace style WordCamp Sofia 2013 CodeKitchen

No Shorthand PHP tags WordCamp Sofia 2013 CodeKitchen

White spacing Spaces all the things WordCamp Sofia 2013 CodeKitchen

And there are so many more http://codex.wordpress.org/WordPress_Coding_Standards WordCamp Sofia 2013 CodeKitchen

Why is this important? • Readability of the code • Makes your code looks great • Seeing mistakes more easier • Using a standard makes collaboration easier WordCamp Sofia 2013 CodeKitchen

Step 4: Know the requirements WordCamp Sofia 2013 CodeKitchen

Step 5: Build that awesome plugin WordCamp Sofia 2013 CodeKitchen

Define the focus WordCamp Sofia 2013 CodeKitchen

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 WordCamp Sofia 2013 CodeKitchen

How does a main plugin file look like WordCamp Sofia 2013 CodeKitchen

! ! ! ! <?php /* Plugin Name: Plugin URI: Description: Author: Version: Author URI: Text Domain: Domain Path: */ Improved image editor https://github.com/markoheijnen/Improved-image-editor WordPress needs a better image editor UI so let this be it Marko Heijnen 0.1 http://markoheijnen.com improved-image-editor /languages/ if ( ! defined( 'ABSPATH' ) ) { header( 'Status: 403 Forbidden’ ); header( 'HTTP/1.1 403 Forbidden’ ); } include 'inc/overwrite.php'; WordCamp Sofia 2013 CodeKitchen

! ! 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; WordCamp Sofia 2013 CodeKitchen

Step 6 Unit test & test WordCamp Sofia 2013 CodeKitchen

Time to talk about some code WordCamp Sofia 2013 CodeKitchen

I released a few plugins on WordPress.org WordCamp Sofia 2013 CodeKitchen

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 WordCamp Sofia 2013 CodeKitchen

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. WordCamp Sofia 2013 CodeKitchen

Expect WordPress will change WordCamp Sofia 2013 CodeKitchen

Some of the mistakes I made with this plugin WordCamp Sofia 2013 CodeKitchen

Forgot to update JS WordCamp Sofia 2013 CodeKitchen

Version 0.5, 0.5.1 and 0.5.2 released the same day WordCamp Sofia 2013 CodeKitchen

Playing to much with code WordCamp Sofia 2013 CodeKitchen

Even more stupid WordCamp Sofia 2013 CodeKitchen

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 WordCamp Sofia 2013 CodeKitchen

Questions? @markoheijnen - http://markoheijnen.com WordCamp Sofia 2013 CodeKitchen

Add a comment

Related presentations

Presentación que realice en el Evento Nacional de Gobierno Abierto, realizado los ...

In this presentation we will describe our experience developing with a highly dyna...

Presentation to the LITA Forum 7th November 2014 Albuquerque, NM

Un recorrido por los cambios que nos generará el wearabletech en el futuro

Um paralelo entre as novidades & mercado em Wearable Computing e Tecnologias Assis...

Microsoft finally joins the smartwatch and fitness tracker game by introducing the...

Related pages

How To Build WordPress Widgets Like A Pro - WPMU DEV

Building sophisticated custom WordPress widgets is well ... your custom widget class in a standard plugin file along with ... like this: Say “Hello ...
Read more

Like my buildings - Bukkit

... (by Bukkit) naming. Like my buildings, LikeMyBuilding, like this. Better decide for one only. ... My Plugins: Like My Building. ... LoL Pro Dominate ...
Read more

BuildEdge Architectural Design Plugin for Sketchup

BuildEdge Pro architectural design is a plugin that expands upon the basic functionality of SketchUp software by ... Buildedge Pro Extension ...
Read more

Facebook Like Box - Social Plugins - Documentation ...

The Like Box is a special version of the Like Button designed for Facebook Pages. ... With the release of Graph API v2.3, the Like Box plugin is deprecated.
Read more

WordPress Membership 2 Pro Plugin - WPMU DEV

... online course network like lynda.com. Plus, Membership 2 Pro includes ... building your site ... Membership 2 Pro AND 100+ Premium Plugins, ...
Read more

Build my thing - Bukkit

http://dev.bukkit.org/bukkit-plugins/build-my-thing/pages/changelog/ ... Why can u have like /bmt save so it saves all ... LoL Pro Dominate with Pro LoL ...
Read more

Like Button - Social Plugins - Documentation - Facebook ...

Pick the URL of a website or Facebook Page you want to use with the like button. 2. ... The width of the plugin (standard layout only), ...
Read more

The Plugin Site - Adobe Photoshop plugins and plug-ins ...

Plugin Essentials Copyright (c) 2002 ... Lightroom does not support real plugins like ... The Browser dialog of Plugin Commander Pro displaying plugin ...
Read more

After Effects Tutorials > 10 Tips for Rendering Like a Pro ...

10 Tips for Rendering Like a Pro in After Effects. See Details
Read more