Intro to WordPress    Doug Stewart                      Philly Tech Week 2012            Plugins
Intro to WordPress PluginsPhilly Tech Week 2012Philadelphia Inquirer BuildingApril 25th, 2012
Who am I?
Who am I?• Doug Stewart
Who am I?• Doug Stewart• Philly WordPress Meetup co-organizer
Who am I?• Doug Stewart• Philly WordPress Meetup co-organizer• Using WordPress since version 1.0 (February 2004 or so)
Who am I?• Doug Stewart• Philly WordPress Meetup co-organizer• Using WordPress since version 1.0 (February 2004 or so)• @z...
Why are we here?
Why are we here?•Plugins!
What’s a plugin?
What’s a plugin?• The WordPress Codex* defines  a plugin as: “[...]a program, or a set of one or more functions, written in...
What’s a plugin?• The WordPress Codex* defines  a plugin as:  “[...]a program, or a set of one or more  functions, written ...
WHAT?
A plugin...
A plugin...• Is a piece of software
A plugin...• Is a piece of software• Is usually written in a mix of PHP and JavaScript
A plugin...• Is a piece of software• Is usually written in a mix of PHP and JavaScript• Supplements or substantially alter...
A plugin...• Is a piece of software• Is usually written in a mix of PHP and JavaScript• Supplements or substantially alter...
A plugin...• Is a piece of software• Is usually written in a mix of PHP and JavaScript• Supplements or substantially alter...
A few notable plugins
A few notable plugins• Hello Dolly
A few notable plugins• Hello Dolly• Akismet
A few notable plugins• Hello Dolly• Akismet• BuddyPress
A few notable plugins• Hello Dolly• Akismet• BuddyPress• WordPress SEO
A few notable plugins• Hello Dolly• Akismet• BuddyPress• WordPress SEO• bbPress
Creating your own
Step 1: What do you want to do?
Step 1.1: Has anyone ELSE tried to do this?
Step 1.2: Has anyone else done this poorly?
http://wordpress.org/extend/plugins/
http://wordpress.org/extend/plugins/
http://wordpress.org/extend/plugins/
http://wordpress.org/extend/plugins/
At this point, this effectwill likely kick in.
At this point, this effectwill likely kick in.• Fight the instinct to  procrastinate.
At this point, this effectwill likely kick in.• Fight the instinct to  procrastinate.• Plan.
At this point, this effectwill likely kick in.• Fight the instinct to  procrastinate.• Plan.• Wireframe.
At this point, this effectwill likely kick in.• Fight the instinct to  procrastinate.• Plan.• Wireframe.• Pen and paper ca...
Step 2: Getting Started
Getting started
Getting started• This sounds simple, but pick a name for your plugin
Getting started• This sounds simple, but pick a name for your plugin• Now pick a “slug” for your plugin
Getting started• This sounds simple, but pick a name for your plugin• Now pick a “slug” for your plugin• Check your slug a...
Getting started• This sounds simple, but pick a name for your plugin• Now pick a “slug” for your plugin• Check your slug a...
Getting started• This sounds simple, but pick a name for your plugin• Now pick a “slug” for your plugin• Check your slug a...
Getting started• This sounds simple, but pick a name for your plugin• Now pick a “slug” for your plugin• Check your slug a...
Getting started (cont.)            Plugin Name: LB ColorBox             Plugin Slug: lb-colorbox
Getting started (cont.)
Getting started (cont.)• Read about the plugin submission process at http://wordpress.org/extend/plugins/about/
Getting started (cont.)• Read about the plugin submission process at http://wordpress.org/extend/plugins/about/• Go to htt...
Getting started (cont.)• Read about the plugin submission process at http://wordpress.org/extend/plugins/about/• Go to htt...
Getting started (cont.)• Read about the plugin submission process at http://wordpress.org/extend/plugins/about/• Go to htt...
Getting started (cont.)• Read about the plugin submission process at http://wordpress.org/extend/plugins/about/• Go to htt...
Getting started (cont.)• Read about the plugin submission process at http://wordpress.org/extend/plugins/about/• Go to htt...
Getting started (cont.)• Read about the plugin submission process at http://wordpress.org/extend/plugins/about/• Go to htt...
Step 3: Set up your development environment
Set up your development environment
Set up your development environment• You’ll need a development environment
Set up your development environment• You’ll need a development environment  • Local?
Set up your development environment• You’ll need a development environment  • Local?  • Remote?
Set up your development environment• You’ll need a development environment  • Local?  • Remote?• Local development environ...
Set up your development environment• You’ll need a development environment  • Local?  • Remote?• Local development environ...
Set up your development environment• You’ll need a development environment  • Local?  • Remote?• Local development environ...
Set up your development environment• You’ll need a development environment  • Local?  • Remote?• Local development environ...
Set up your development environment (cont.)
Set up your development environment (cont.)• Windows
Set up your development environment (cont.)• Windows  • WAMP (http://www.wampserver.com/en/)
Set up your development environment (cont.)• Windows  • WAMP (http://www.wampserver.com/en/)  • XAMPP (http://www.apachefr...
Set up your development environment (cont.)• Windows  • WAMP (http://www.wampserver.com/en/)  • XAMPP (http://www.apachefr...
Set up your development environment (cont.)• Windows  • WAMP (http://www.wampserver.com/en/)  • XAMPP (http://www.apachefr...
Set up your development environment (cont.)• Windows  • WAMP (http://www.wampserver.com/en/)  • XAMPP (http://www.apachefr...
Set up your development environment (cont.)• Windows  • WAMP (http://www.wampserver.com/en/)  • XAMPP (http://www.apachefr...
Set up your developmentenvironment (cont.)
Set up your developmentenvironment (cont.)• Install WordPress
Set up your developmentenvironment (cont.)• Install WordPress• Create a new directory under  [WordPress install directory]...
Set up your developmentenvironment (cont.)• Install WordPress• Create a new directory under  [WordPress install directory]...
Step 4: Skeleton
Skeleton
Skeleton• Let’s put “pen” to “paper”
Skeleton• Let’s put “pen” to “paper”• A plugin must have at least the following two files:
Skeleton• Let’s put “pen” to “paper”• A plugin must have at least the following two files:   • readme.txt
Skeleton• Let’s put “pen” to “paper”• A plugin must have at least the following two files:   • readme.txt   • [plugin-slug]...
Step 4.1: readme.txt
readme.txt
readme.txt• Full example here: http://wordpress.org/extend/plugins/about/readme.txt
readme.txt• Full example here: http://wordpress.org/extend/plugins/about/readme.txt• The important bits are at the top
readme.txt• Full example here: http://wordpress.org/extend/plugins/about/readme.txt• The important bits are at the top• Us...
readme.txt• Full example here: http://wordpress.org/extend/plugins/about/readme.txt• The important bits are at the top• Us...
readme.txt• Full example here: http://wordpress.org/extend/plugins/about/readme.txt• The important bits are at the top• Us...
readme.txt (cont.)                     This...                      Text
readme.txt (cont.)                     ...results in this
readme.txt (cont.)• WordPress.org has a handy-dandy readme syntax checker: http://wordpress.org/extend/plugins/about/valid...
Step 4.2: [plugin-slug].php
[plugin-slug].php• Create wp-content/plugins/[plugin-slug]/[plugin-slug].php• Add plugin header information so WordPress k...
[plugin-slug].php (cont.)                        This...
[plugin-slug].php                    ...defines this
Step 5: Put some meat on those bones
Meat
Meat• Let’s talk APIs
Meat• Let’s talk APIs   • WordPress core -- http://codex.wordpress.org/Function_Reference
Meat• Let’s talk APIs   • WordPress core -- http://codex.wordpress.org/Function_Reference      • the_title(), get_posts(),...
Meat• Let’s talk APIs   • WordPress core -- http://codex.wordpress.org/Function_Reference      • the_title(), get_posts(),...
Meat (cont.)• Topics for advanced study  • Settings API -- http://codex.wordpress.org/Settings_API  • Options API -- http:...
Meathooks• From the Codex:  “Hooks are provided by WordPress to allow your plugin to hook into the rest  of WordPress; tha...
Meathooks (cont.)
Meathooks (cont.)• There are two kinds of hooks (again, from the Codex):
Meathooks (cont.)• There are two kinds of hooks (again, from the Codex):  • “Actions: Actions are the hooks that the WordP...
Meathooks (cont.)• There are two kinds of hooks (again, from the Codex):  • “Actions: Actions are the hooks that the WordP...
Demo Time!
Resources• Codex, Codex, Codex  http://codex.wordpress.org• StackExchange  http://wordpress.stackexchange.com• WordPress.o...
Useful kickstarts• WordPress Plugin Kickstarter  http://wordpress.org/extend/plugins/wordpress-plugin-kickstarter/• WordPr...
Thanks for coming out!
Intro to WordPress Plugins
Intro to WordPress Plugins
Upcoming SlideShare
Loading in...5
×

Intro to WordPress Plugins

2,637

Published on

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

Published in: Technology, Business
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,637
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
20
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • 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!
    1. A particular slide catching your eye?

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

    ×