Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Intro to WordPress Plugins

3,309 views

Published on

Introduction to plugin development, delivered at Philly WP Meetup event April 25th, 2012. Part of Philly Tech Week.

Published in: Technology, Business
  • Be the first to comment

Intro to WordPress Plugins

  1. 1. Intro to WordPress Doug Stewart Philly Tech Week 2012 Plugins
  2. 2. Intro to WordPress PluginsPhilly Tech Week 2012Philadelphia Inquirer BuildingApril 25th, 2012
  3. 3. Who am I?
  4. 4. Who am I?• Doug Stewart
  5. 5. Who am I?• Doug Stewart• Philly WordPress Meetup co-organizer
  6. 6. Who am I?• Doug Stewart• Philly WordPress Meetup co-organizer• Using WordPress since version 1.0 (February 2004 or so)
  7. 7. Who am I?• Doug Stewart• Philly WordPress Meetup co-organizer• Using WordPress since version 1.0 (February 2004 or so)• @zamoose on Twitter
  8. 8. Why are we here?
  9. 9. Why are we here?•Plugins!
  10. 10. What’s a plugin?
  11. 11. What’s a plugin?• The WordPress Codex* defines a plugin as: “[...]a program, or a set of one or more functions, written in the PHP scripting language, that adds a specific set of features or services to the WordPress weblog, which can be seamlessly integrated with the weblog using access points and methods provided by the WordPress Plugin Application Program Interface (API).”**
  12. 12. What’s a plugin?• The WordPress Codex* defines a plugin as: “[...]a program, or a set of one or more functions, written in the PHP scripting language, that adds a specific set of features or services to the WordPress weblog, which can be seamlessly integrated with the weblog using access points and methods provided by the WordPress Plugin Application Program Interface (API).”*** You do know what the Codex is, right?** http://codex.wordpress.org/Writing_a_Plugin
  13. 13. WHAT?
  14. 14. A plugin...
  15. 15. A plugin...• Is a piece of software
  16. 16. A plugin...• Is a piece of software• Is usually written in a mix of PHP and JavaScript
  17. 17. A plugin...• Is a piece of software• Is usually written in a mix of PHP and JavaScript• Supplements or substantially alters the way WordPress functions
  18. 18. A plugin...• Is a piece of software• Is usually written in a mix of PHP and JavaScript• Supplements or substantially alters the way WordPress functions• Uses the WordPress Plugin API* to accomplish the above in a way that integrates with WordPress
  19. 19. A plugin...• Is a piece of software• Is usually written in a mix of PHP and JavaScript• Supplements or substantially alters the way WordPress functions• Uses the WordPress Plugin API* to accomplish the above in a way that integrates with WordPress * http://codex.wordpress.org/Plugin_API
  20. 20. A few notable plugins
  21. 21. A few notable plugins• Hello Dolly
  22. 22. A few notable plugins• Hello Dolly• Akismet
  23. 23. A few notable plugins• Hello Dolly• Akismet• BuddyPress
  24. 24. A few notable plugins• Hello Dolly• Akismet• BuddyPress• WordPress SEO
  25. 25. A few notable plugins• Hello Dolly• Akismet• BuddyPress• WordPress SEO• bbPress
  26. 26. Creating your own
  27. 27. Step 1: What do you want to do?
  28. 28. Step 1.1: Has anyone ELSE tried to do this?
  29. 29. Step 1.2: Has anyone else done this poorly?
  30. 30. http://wordpress.org/extend/plugins/
  31. 31. http://wordpress.org/extend/plugins/
  32. 32. http://wordpress.org/extend/plugins/
  33. 33. http://wordpress.org/extend/plugins/
  34. 34. At this point, this effectwill likely kick in.
  35. 35. At this point, this effectwill likely kick in.• Fight the instinct to procrastinate.
  36. 36. At this point, this effectwill likely kick in.• Fight the instinct to procrastinate.• Plan.
  37. 37. At this point, this effectwill likely kick in.• Fight the instinct to procrastinate.• Plan.• Wireframe.
  38. 38. At this point, this effectwill likely kick in.• Fight the instinct to procrastinate.• Plan.• Wireframe.• Pen and paper can help.
  39. 39. Step 2: Getting Started
  40. 40. Getting started
  41. 41. Getting started• This sounds simple, but pick a name for your plugin
  42. 42. Getting started• This sounds simple, but pick a name for your plugin• Now pick a “slug” for your plugin
  43. 43. Getting started• This sounds simple, but pick a name for your plugin• Now pick a “slug” for your plugin• Check your slug against existing plugins
  44. 44. Getting started• This sounds simple, but pick a name for your plugin• Now pick a “slug” for your plugin• Check your slug against existing plugins • Slugs are universally used by WordPress to identify plugins
  45. 45. Getting started• This sounds simple, but pick a name for your plugin• Now pick a “slug” for your plugin• Check your slug against existing plugins • Slugs are universally used by WordPress to identify plugins • If you somehow end up with a slug that matches another plugin’s, there will be trouble
  46. 46. Getting started• This sounds simple, but pick a name for your plugin• Now pick a “slug” for your plugin• Check your slug against existing plugins • Slugs are universally used by WordPress to identify plugins • If you somehow end up with a slug that matches another plugin’s, there will be trouble • Easy solution: unique slug prefix
  47. 47. Getting started (cont.) Plugin Name: LB ColorBox Plugin Slug: lb-colorbox
  48. 48. Getting started (cont.)
  49. 49. Getting started (cont.)• Read about the plugin submission process at http://wordpress.org/extend/plugins/about/
  50. 50. Getting started (cont.)• Read about the plugin submission process at http://wordpress.org/extend/plugins/about/• Go to http://wordpress.org/extend/plugins/add/
  51. 51. Getting started (cont.)• Read about the plugin submission process at http://wordpress.org/extend/plugins/about/• Go to http://wordpress.org/extend/plugins/add/• Log in with your WordPress.org account
  52. 52. Getting started (cont.)• Read about the plugin submission process at http://wordpress.org/extend/plugins/about/• Go to http://wordpress.org/extend/plugins/add/• Log in with your WordPress.org account• Register your new plugin
  53. 53. Getting started (cont.)• Read about the plugin submission process at http://wordpress.org/extend/plugins/about/• Go to http://wordpress.org/extend/plugins/add/• Log in with your WordPress.org account• Register your new plugin • Name and description are required
  54. 54. Getting started (cont.)• Read about the plugin submission process at http://wordpress.org/extend/plugins/about/• Go to http://wordpress.org/extend/plugins/add/• Log in with your WordPress.org account• Register your new plugin • Name and description are required• Wait for The Powers That Be to approve your plugin submission
  55. 55. Getting started (cont.)• Read about the plugin submission process at http://wordpress.org/extend/plugins/about/• Go to http://wordpress.org/extend/plugins/add/• Log in with your WordPress.org account• Register your new plugin • Name and description are required• Wait for The Powers That Be to approve your plugin submission• While you wait...
  56. 56. Step 3: Set up your development environment
  57. 57. Set up your development environment
  58. 58. Set up your development environment• You’ll need a development environment
  59. 59. Set up your development environment• You’ll need a development environment • Local?
  60. 60. Set up your development environment• You’ll need a development environment • Local? • Remote?
  61. 61. Set up your development environment• You’ll need a development environment • Local? • Remote?• Local development environment is preferable
  62. 62. Set up your development environment• You’ll need a development environment • Local? • Remote?• Local development environment is preferable • Disconnected development
  63. 63. Set up your development environment• You’ll need a development environment • Local? • Remote?• Local development environment is preferable • Disconnected development • No waiting for uploads
  64. 64. Set up your development environment• You’ll need a development environment • Local? • Remote?• Local development environment is preferable • Disconnected development • No waiting for uploads • Master of your own domain
  65. 65. Set up your development environment (cont.)
  66. 66. Set up your development environment (cont.)• Windows
  67. 67. Set up your development environment (cont.)• Windows • WAMP (http://www.wampserver.com/en/)
  68. 68. Set up your development environment (cont.)• Windows • WAMP (http://www.wampserver.com/en/) • XAMPP (http://www.apachefriends.org/en/xampp-windows.html)
  69. 69. Set up your development environment (cont.)• Windows • WAMP (http://www.wampserver.com/en/) • XAMPP (http://www.apachefriends.org/en/xampp-windows.html)• OS X
  70. 70. Set up your development environment (cont.)• Windows • WAMP (http://www.wampserver.com/en/) • XAMPP (http://www.apachefriends.org/en/xampp-windows.html)• OS X • MAMP (http://www.mamp.info/en/index.html)
  71. 71. Set up your development environment (cont.)• Windows • WAMP (http://www.wampserver.com/en/) • XAMPP (http://www.apachefriends.org/en/xampp-windows.html)• OS X • MAMP (http://www.mamp.info/en/index.html) • XAMPP (http://www.apachefriends.org/en/xampp-macosx.html)
  72. 72. Set up your development environment (cont.)• Windows • WAMP (http://www.wampserver.com/en/) • XAMPP (http://www.apachefriends.org/en/xampp-windows.html)• OS X • MAMP (http://www.mamp.info/en/index.html) • XAMPP (http://www.apachefriends.org/en/xampp-macosx.html) • NMPP (http://getmnpp.org/)
  73. 73. Set up your developmentenvironment (cont.)
  74. 74. Set up your developmentenvironment (cont.)• Install WordPress
  75. 75. Set up your developmentenvironment (cont.)• Install WordPress• Create a new directory under [WordPress install directory]/ wp-content/plugins
  76. 76. Set up your developmentenvironment (cont.)• Install WordPress• Create a new directory under [WordPress install directory]/ wp-content/plugins • Make sure it matches your slug!
  77. 77. Step 4: Skeleton
  78. 78. Skeleton
  79. 79. Skeleton• Let’s put “pen” to “paper”
  80. 80. Skeleton• Let’s put “pen” to “paper”• A plugin must have at least the following two files:
  81. 81. Skeleton• Let’s put “pen” to “paper”• A plugin must have at least the following two files: • readme.txt
  82. 82. Skeleton• Let’s put “pen” to “paper”• A plugin must have at least the following two files: • readme.txt • [plugin-slug].php
  83. 83. Step 4.1: readme.txt
  84. 84. readme.txt
  85. 85. readme.txt• Full example here: http://wordpress.org/extend/plugins/about/readme.txt
  86. 86. readme.txt• Full example here: http://wordpress.org/extend/plugins/about/readme.txt• The important bits are at the top
  87. 87. readme.txt• Full example here: http://wordpress.org/extend/plugins/about/readme.txt• The important bits are at the top• Uses a modified Markdown syntax
  88. 88. readme.txt• Full example here: http://wordpress.org/extend/plugins/about/readme.txt• The important bits are at the top• Uses a modified Markdown syntax• Contains important information about your theme
  89. 89. readme.txt• Full example here: http://wordpress.org/extend/plugins/about/readme.txt• The important bits are at the top• Uses a modified Markdown syntax• Contains important information about your theme• Explicitly controls how your plugin’s WordPress.org directory page looks
  90. 90. readme.txt (cont.) This... Text
  91. 91. readme.txt (cont.) ...results in this
  92. 92. readme.txt (cont.)• WordPress.org has a handy-dandy readme syntax checker: http://wordpress.org/extend/plugins/about/validator/• Other information displayed • Installation instructions • FAQs • Screenshots • Changelog
  93. 93. Step 4.2: [plugin-slug].php
  94. 94. [plugin-slug].php• Create wp-content/plugins/[plugin-slug]/[plugin-slug].php• Add plugin header information so WordPress knows how to talk about your plugin• Plugin header info defines how WordPress displays your plugin’s info in the Plugins administration screen
  95. 95. [plugin-slug].php (cont.) This...
  96. 96. [plugin-slug].php ...defines this
  97. 97. Step 5: Put some meat on those bones
  98. 98. Meat
  99. 99. Meat• Let’s talk APIs
  100. 100. Meat• Let’s talk APIs • WordPress core -- http://codex.wordpress.org/Function_Reference
  101. 101. Meat• Let’s talk APIs • WordPress core -- http://codex.wordpress.org/Function_Reference • the_title(), get_posts(), add_meta_box(), etc.
  102. 102. Meat• Let’s talk APIs • WordPress core -- http://codex.wordpress.org/Function_Reference • the_title(), get_posts(), add_meta_box(), etc. • Plugin API -- http://codex.wordpress.org/Plugin_API
  103. 103. Meat (cont.)• Topics for advanced study • Settings API -- http://codex.wordpress.org/Settings_API • Options API -- http://codex.wordpress.org/Options_API • Transients API -- http://codex.wordpress.org/Transients_API • Widgets API -- http://codex.wordpress.org/Widgets_API
  104. 104. Meathooks• From the Codex: “Hooks are provided by WordPress to allow your plugin to hook into the rest of WordPress; that is, to call functions in your plugin at specific times, and thereby set your plugin in motion.”
  105. 105. Meathooks (cont.)
  106. 106. Meathooks (cont.)• There are two kinds of hooks (again, from the Codex):
  107. 107. Meathooks (cont.)• There are two kinds of hooks (again, from the Codex): • “Actions: Actions are the hooks that the WordPress core launches at specific points during execution, or when specific events occur. Your plugin can specify that one or more of its PHP functions are executed at these points, using the Action API.”
  108. 108. Meathooks (cont.)• There are two kinds of hooks (again, from the Codex): • “Actions: Actions are the hooks that the WordPress core launches at specific points during execution, or when specific events occur. Your plugin can specify that one or more of its PHP functions are executed at these points, using the Action API.” • “Filters: Filters are the hooks that WordPress launches to modify text of various types before adding it to the database or sending it to the browser screen. Your plugin can specify that one or more of its PHP functions is executed to modify specific types of text at these times, using the Filter API.”
  109. 109. Demo Time!
  110. 110. Resources• Codex, Codex, Codex http://codex.wordpress.org• StackExchange http://wordpress.stackexchange.com• WordPress.org forums
  111. 111. Useful kickstarts• WordPress Plugin Kickstarter http://wordpress.org/extend/plugins/wordpress-plugin-kickstarter/• WordPress Plugin Scaffold https://github.com/eteubert/WordPress-Plugin-Scaffold• WordPress Plugin Boilerplate https://github.com/tommcfarlin/WordPress-Plugin-Boilerplate• WordPress Plugin Skeleton https://github.com/lpointet/WordPress-Plugin-Skeleton
  112. 112. Thanks for coming out!

×