Building plugins like a pro

  • 1,136 views
Uploaded 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 …

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.

  • 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,136
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