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

1. Intro to WordPress Doug Stewart
Philly Tech Week 2012
Plugins

2. Intro to WordPress Plugins
Philly Tech Week 2012
Philadelphia Inquirer Building
April 25th, 2012

3. Who am I?

4. Who am I?
• Doug Stewart

5. Who am I?
• Doug Stewart
• Philly WordPress Meetup co-organizer

6. Who am I?
• Doug Stewart
• Philly WordPress Meetup co-organizer
• Using WordPress since version 1.0 (February 2004 or so)

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. Why are we here?

9. Why are we here?
•Plugins!

10. What’s a plugin?

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. 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. WHAT?

14. A plugin...

15. A plugin...
• Is a piece of software

16. A plugin...
• Is a piece of software
• Is usually written in a mix of PHP and JavaScript

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. 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. 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. A few notable plugins

21. A few notable plugins
• Hello Dolly

22. A few notable plugins
• Hello Dolly
• Akismet

23. A few notable plugins
• Hello Dolly
• Akismet
• BuddyPress

24. A few notable plugins
• Hello Dolly
• Akismet
• BuddyPress
• WordPress SEO

25. A few notable plugins
• Hello Dolly
• Akismet
• BuddyPress
• WordPress SEO
• bbPress

26. Creating your own

27. Step 1: What do you want to do?

28. Step 1.1: Has anyone ELSE tried to do this?

29. Step 1.2: Has anyone else done this poorly?

30. http://wordpress.org/extend/plugins/

31. http://wordpress.org/extend/plugins/

32. http://wordpress.org/extend/plugins/

33. http://wordpress.org/extend/plugins/

34. At this point, this effect
will likely kick in.

35. At this point, this effect
will likely kick in.
• Fight the instinct to
procrastinate.

36. At this point, this effect
will likely kick in.
• Fight the instinct to
procrastinate.
• Plan.

37. At this point, this effect
will likely kick in.
• Fight the instinct to
procrastinate.
• Plan.
• Wireframe.

38. At this point, this effect
will likely kick in.
• Fight the instinct to
procrastinate.
• Plan.
• Wireframe.
• Pen and paper can help.

39. Step 2: Getting Started

40. Getting started

41. Getting started
• This sounds simple, but pick a name for your plugin

42. Getting started
• This sounds simple, but pick a name for your plugin
• Now pick a “slug” for your plugin

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. 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. 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. 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. Getting started (cont.)
Plugin Name: LB ColorBox
Plugin Slug: lb-colorbox

48. Getting started (cont.)

49. Getting started (cont.)
• Read about the plugin submission process at http://wordpress.org/extend/plugins/about/

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. 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. 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. 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. 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. 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. Step 3: Set up your development environment

57. Set up your development environment

58. Set up your development environment
• You’ll need a development environment

59. Set up your development environment
• You’ll need a development environment
• Local?

60. Set up your development environment
• You’ll need a development environment
• Local?
• Remote?

61. Set up your development environment
• You’ll need a development environment
• Local?
• Remote?
• Local development environment is preferable

62. Set up your development environment
• You’ll need a development environment
• Local?
• Remote?
• Local development environment is preferable
• Disconnected development

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. 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. Set up your development environment (cont.)

66. Set up your development environment (cont.)
• Windows

67. Set up your development environment (cont.)
• Windows
• WAMP (http://www.wampserver.com/en/)

68. Set up your development environment (cont.)
• Windows
• WAMP (http://www.wampserver.com/en/)
• XAMPP (http://www.apachefriends.org/en/xampp-windows.html)

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. 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. 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. 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. Set up your development
environment (cont.)

74. Set up your development
environment (cont.)
• Install WordPress

75. Set up your development
environment (cont.)
• Install WordPress
• Create a new directory under
[WordPress install directory]/
wp-content/plugins

76. Set up your development
environment (cont.)
• Install WordPress
• Create a new directory under
[WordPress install directory]/
wp-content/plugins
• Make sure it matches your
slug!

77. Step 4: Skeleton

79. Skeleton

80. Skeleton
• Let’s put “pen” to “paper”

81. Skeleton
• Let’s put “pen” to “paper”
• A plugin must have at least the following two files:

82. Skeleton
• Let’s put “pen” to “paper”
• A plugin must have at least the following two files:
• readme.txt

83. Skeleton
• Let’s put “pen” to “paper”
• A plugin must have at least the following two files:
• readme.txt
• [plugin-slug].php

84. Step 4.1: readme.txt

85. readme.txt

86. readme.txt
• Full example here: http://wordpress.org/extend/plugins/about/readme.txt

87. readme.txt
• Full example here: http://wordpress.org/extend/plugins/about/readme.txt
• The important bits are at the top

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

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

90. 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

91. readme.txt (cont.)
This...
Text

92. readme.txt (cont.)
...results in this

93. 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

94. Step 4.2: [plugin-slug].php

95. [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

96. [plugin-slug].php (cont.)
This...

97. [plugin-slug].php
...defines this

98. Step 5: Put some meat on those bones

100. Meat

101. Meat
• Let’s talk APIs

102. Meat
• Let’s talk APIs
• WordPress core -- http://codex.wordpress.org/Function_Reference

103. Meat
• Let’s talk APIs
• WordPress core -- http://codex.wordpress.org/Function_Reference
• the_title(), get_posts(), add_meta_box(), etc.

104. 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

105. 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

106. 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.”

107. Meathooks (cont.)

108. Meathooks (cont.)
• There are two kinds of hooks (again, from the Codex):

109. 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.”

110. 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.”

111. Demo Time!

112. Resources
• Codex, Codex, Codex
http://codex.wordpress.org
• StackExchange
http://wordpress.stackexchange.com
• WordPress.org forums

113. 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

114. Thanks for coming out!