Your SlideShare is downloading. ×
  • Like
Building plugins like a pro
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Building plugins like a pro

  • 1,168 views
Published

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 …

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
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,168
On SlideShare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
4
Comments
0
Likes
4

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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