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 ...
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 proje...
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 20...
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 l...
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...
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 folder...
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:
*/

Impro...
!

!

class Improved_Image_Editor {
public function __construct() {
add_action( 'init', array( $this, 'register_scripts_st...
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 yo...
Biggest issue
• Plugins that don’t add meta boxes with
add_meta_boxes	


• Only call the hook when on a certain page	

• M...
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 car...
Questions?
@markoheijnen - http://markoheijnen.com

WordCamp Sofia 2013

CodeKitchen
Upcoming SlideShare
Loading in...5
×

Building plugins like a pro

1,309

Published on

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.

Published in: Technology, Art & Photos
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,309
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
5
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Building plugins like a pro

  1. 1. Building plugins like a pro WordCamp Sofia - 2013 WordCamp Sofia 2013 CodeKitchen
  2. 2. 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
  3. 3. You want to build a great plugin WordCamp Sofia 2013 CodeKitchen
  4. 4. Start using define('WP_DEBUG', true); and you are done ;) WordCamp Sofia 2013 CodeKitchen
  5. 5. First you need to improve yourself WordCamp Sofia 2013 CodeKitchen
  6. 6. Step 1: Improve your workflow WordCamp Sofia 2013 CodeKitchen
  7. 7. Invest time to choose an editor WordCamp Sofia 2013 CodeKitchen
  8. 8. Start using a version control WordCamp Sofia 2013 CodeKitchen
  9. 9. 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
  10. 10. Step 2: Understand WordPress WordCamp Sofia 2013 CodeKitchen
  11. 11. How the
 code is structured WordCamp Sofia 2013 CodeKitchen
  12. 12. A lot of awesome APIs WordCamp Sofia 2013 CodeKitchen
  13. 13. APIs • • • • • • • HTTP Filesystem Metadata Image manipulation Rewrite Shortcode Options WordCamp Sofia 2013 • • • • • • • Settings Theme modification Theme customization Transient Widgets File Header Database CodeKitchen
  14. 14. 1556 Hooks WordCamp Sofia 2013 CodeKitchen
  15. 15. 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
  16. 16. Step 3: Follow the code standards WordCamp Sofia 2013 CodeKitchen
  17. 17. Single vs double quotes WordCamp Sofia 2013 CodeKitchen
  18. 18. Tabs vs spaces WordCamp Sofia 2013 CodeKitchen
  19. 19. Brace style WordCamp Sofia 2013 CodeKitchen
  20. 20. No Shorthand PHP tags WordCamp Sofia 2013 CodeKitchen
  21. 21. White spacing Spaces all the things WordCamp Sofia 2013 CodeKitchen
  22. 22. And there are so many more http://codex.wordpress.org/WordPress_Coding_Standards WordCamp Sofia 2013 CodeKitchen
  23. 23. 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
  24. 24. Step 4: Know the requirements WordCamp Sofia 2013 CodeKitchen
  25. 25. Step 5: Build that awesome plugin WordCamp Sofia 2013 CodeKitchen
  26. 26. Define the focus WordCamp Sofia 2013 CodeKitchen
  27. 27. 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
  28. 28. How does a main plugin file look like WordCamp Sofia 2013 CodeKitchen
  29. 29. ! ! ! ! <?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
  30. 30. ! ! 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
  31. 31. Step 6 Unit test & test WordCamp Sofia 2013 CodeKitchen
  32. 32. Time to talk about some code WordCamp Sofia 2013 CodeKitchen
  33. 33. I released a few plugins on WordPress.org WordCamp Sofia 2013 CodeKitchen
  34. 34. 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
  35. 35. 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
  36. 36. Expect WordPress will change WordCamp Sofia 2013 CodeKitchen
  37. 37. Some of the mistakes I made with this plugin WordCamp Sofia 2013 CodeKitchen
  38. 38. Forgot to update JS WordCamp Sofia 2013 CodeKitchen
  39. 39. Version 0.5, 0.5.1 and 0.5.2 released the same day WordCamp Sofia 2013 CodeKitchen
  40. 40. Playing to much with code WordCamp Sofia 2013 CodeKitchen
  41. 41. Even more stupid WordCamp Sofia 2013 CodeKitchen
  42. 42. 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
  43. 43. Questions? @markoheijnen - http://markoheijnen.com WordCamp Sofia 2013 CodeKitchen
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×