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 Plugin Development


Published on

Presentation slides from WordCamp Toronto 2012 talk.

A quick introduction to creating plugins for WordPress. As we construct a simple plugin to add an awesome widget to your sidebars, we’ll summarize the resources needed to help you create plugins. While you will definately will need to learn PHP, HTML and CSS to create your own plugins, no coding ability is required for this workshop. You just need to be able cut and paste text into a file you create on your web site.

Published in: Technology

Intro to WordPress Plugin Development

  1. 1. “Intro to WordPress Plugin Development”Before we begin please:  Connect to the internet  Grab the slides from:  Radko WordCamp September 30th, 2012
  2. 2. A little bit about meRick Radko – R-Cubed Design Forge  Software, web and app designer/developer.  Creating custom web sites since 1996.  Artistic and creative engineer.  Co-organizer of: The Ottawa WordPress Group.  If you have questions or need help, contact me at: are posted at: © 2012 Rick Radko, 1
  3. 3. About this talkThis is a hands on workshop.If you don’t have access to a WordPress site, you can alsofollow along now and do the workshop later.To work along hands on:  You will need access to your hosting account and a WordPress website. (sites on will not work) Or  A local server, with a WordPress site, on your laptop.No coding experience is required to do this workshop.© 2012 Rick Radko, 2
  4. 4. GoalsIn this workshop I will walk run through a reconstructionof a plugin I published on  With only 45 minutes, the intent is exposure to concepts and ideas, not deep understanding.  There is tons of material on the net to gain deeper understanding at a more leisurely pace.At the end of this presentation you should have:  Some understanding of how my example plugin works.  Some experience to start you down the road of plugin development.  Links and pointers to reference material to take you further down the road.© 2012 Rick Radko, 3
  5. 5. What is a plugin?Plugins are blocks of code added to WordPress toextend, or change the functionality of:  WordPress  Other plugins  Themes© 2012 Rick Radko, 4
  6. 6. More about pluginsPlugins:  Are written in PHP.  Can be a couple lines of code.  Or 10,000 lines of code.  Make use of WordPress API’s.  Will likely have some HTML and CSS.  May access MySQL.  May use some JavaScript.© 2012 Rick Radko, 5
  7. 7. Lets create a pluginWe could create a “Hello World” widget for oursidebar: But that’s not very useful, or interesting.© 2012 Rick Radko, 6
  8. 8. Meetup WidgetWith a few more lines of code we can have:© 2012 Rick Radko, 7
  9. 9. Tools to use for programmingProgramming editors:  Code completion  Syntax highlighting  Bracket matching  “Light” and fast  Windows: Notepad++, Sublime Text $$  Mac: TextWrangler, Coda $$, Sublime Text $$© 2012 Rick Radko, 8
  10. 10. More toolsIDE – Integrated Development Environment  NetBeans, Eclipse, Aptana, PhpStorm $, Komodo $, + more  Cross platform - Java  Do a lot more than a programming editor  Integrated debugging  Profiling  “Heavier”Jeremy Clarke: Code Faster and Smarter PHP withIDE’s Like NetBeans© 2012 Rick Radko, 9
  11. 11. A place to workDevelopment “Dev” site:  Safe place to work that won’t disturb a live site.  Does not matter if you WSOD the site.  2 Common options:  Sub-domain on your hosted site.  “Local” web server on your pc/laptop.  Requires some set-up – lots of tutorials on net.  No internet connection needed.  Fast, no internet lag, no FTP.  BitNami, XAMPP, Wamp, Mamp.© 2012 Rick Radko, 10
  12. 12. Not at WordCamp Toronto?If you are doing this workshop on your own, it isrecommended that you set-up:  A local server.OR  A site on a sub-domain on your hosting.Lots of resources online, here are a couple forlocal servers from the codex:   ally_on_Your_Mac_With_MAMP© 2012 Rick Radko, 11
  13. 13. For the live workshop – we’re taking a shortcutI’m going to demonstrate using the cPanel FileManager and Editor on my hosting account.  If you want to work along:  Please login to your hosting account if you have not already.  Please login to your WordPress admin.  Use any non-critical hosted site you have.  We may cause it to be messed up briefly.  The site cannot be on, you cannot add plugins there.© 2012 Rick Radko, 12
  14. 14. Available toolsThis is certainly not the best way to build a plugin,but it is:  The easiest way for us to get going without installing or setting up anything.  Feel free to use a WordPress site on a local server if you have one set-up on your laptop.We also won’t need a programming editor or IDEfor the workshop.For the workshop to work, please enter all the textexactly as illustrated.© 2012 Rick Radko, 13
  15. 15. Log into your hosting account© 2012 Rick Radko, 14
  16. 16. Open File Manager© 2012 Rick Radko, 15
  17. 17. File Manager PopupIf you see this popup, make sure you have “WebRoot” selected and then hit go.© 2012 Rick Radko, 16
  18. 18. Path to pluginsNavigate to the plugin folder.© 2012 Rick Radko, 17
  19. 19. Create a folder for the plugin© 2012 Rick Radko, 18
  20. 20. New folder name Folder Name: r3df-meetup-widget© 2012 Rick Radko, 19
  21. 21. The new folder© 2012 Rick Radko, 20
  22. 22. Empty plugin folder© 2012 Rick Radko, 21
  23. 23. Create the main plugin file© 2012 Rick Radko, 22
  24. 24. The new file form File Name: r3df-meetup-widget.php© 2012 Rick Radko, 23
  25. 25. The main plugin file© 2012 Rick Radko, 24
  26. 26. Open the file in the editor© 2012 Rick Radko, 25
  27. 27. The new and empty file© 2012 Rick Radko, 26
  28. 28. The file header – the only required part of a plugin <?php /* Plugin Name: R3DF Meetup Widget Description: Displays Meetup group link in a widget Plugin URI: Version: 1.0 WC Demo Author: R3DF Author URI: Author email: */ /* Plugin content here */ Creates this plugin information on the Plugins page in the Dashboard© 2012 Rick Radko, 27
  29. 29. The plugin with headerPaste the header code from above, into the file.Plugin header information: © 2012 Rick Radko, 28
  30. 30. Check out the plugin listing in your Dashboard  Ignore the update message if you see one.  Don’t activate it yet!© 2012 Rick Radko, 29
  31. 31. Empty plugin templateWe now have an empty plugin that could be usedas a template to:  Make your own plugin. (a blank template)  Change the file name, folder name and the header info: name, description, author, etc.  Make a “Site Plugin” to add code to run on your site that is often put into functions.php. See: Don’t: “Just paste this code in your functions.php” or  snippets-plugin/© 2012 Rick Radko, 30
  32. 32. Now lets make it do somethingCopy and paste this code into your pluginreplacing /* Plugin content here */: class widget_r3dfmeetup extends WP_Widget { /* constructor */ } add_action(widgets_init, create_function(, return register_widget("widget_r3dfmeetup");));A lot of the code you need to do things inWordPress will start with:  “boilerplate code” – code blocks that are needed and repeatedly reused with slight edits.© 2012 Rick Radko, 31
  33. 33. The class declarationThe line: class widget_r3dfmeetup extends WP_Widget {  Creates a new object that lets us “extend” the WordPress class WP_Widget which does all the heavy lifting in creating a widget.Codex: – Application Programming Interface  Remote control for WordPress.  Using the API your PHP tells WordPress to do stuff.© 2012 Rick Radko, 32
  34. 34. Getting into the “action”The line: add_action(widgets_init, create_function(, return register_widget( "widget_r3dfmeetup");‘ ));  Tells WordPress to register our widget at the time it is setting up widgets - widgets_init.  You’ll see a line very similar to this for every widget declaration.  To reuse the block of code we just pasted in you only need to change the name and the description.Actions are very important to WordPress plugins.© 2012 Rick Radko, 33
  35. 35. WordPress actionsActions are one of 2 types of WordPress “Hooks”.  Specific events (100’s) trigger them, for example:  Publishing a post or page  Displaying a post, page or admin page.  Displaying a menu.  Displaying the page content.   Your plugin defines a function for WordPress to execute at the time the event occurs.  Generally actions “do” things.  Filters, which we will see later “change” things© 2012 Rick Radko, 34
  36. 36. Getting hooked on actions WP Native Dashboard Fix  Moving the menu item was accomplished by hooking into the action ‘admin_bar_menu’.  10 lines of code and you have a maintainable fix instead of hacked plugin.© 2012 Rick Radko, 35
  37. 37. The widget “constructor function”Paste the constructor function into your pluginbelow the /* constructor */ line: function __construct() { $widget_options = array( description => Displays Meetup group link in a widget., ); $this->WP_Widget(false, $name = R3DF: Meetup Group Widget, $widget_options); } /* widget function */  This code is required for a widget.  Sets up the widget with a name and description.  Just change the description and the name to reuse this block of code.© 2012 Rick Radko, 36
  38. 38. An older style of constructorSome tutorials and/or widgets may have: function <function name that matches class name>() {  This is a older, PHP 4 style for constructors.  The function name needs to match the class defined above.© 2012 Rick Radko, 37
  39. 39. The widget functionAdd this code after /* widget function */ line:: function widget($args, $instance) { extract($args); echo $before_widget; $title = apply_filters(widget_title, $instance[title], $instance, $this->id_base); if ( !empty($title) ) { echo $before_title . $title . $after_title; } ?> <a href="">The Toronto WordPress Group</a> <?php echo $after_widget; } /* form function */  Everything but the red part is required for a widget, to add stuff around your widget content.  The red part you can replace with your content.© 2012 Rick Radko, 38
  40. 40. Filters“Filters” are the other “hook” type in WordPress.Like actions:  Specific events (100’s) trigger them.   Your plugin defines a function for WordPress to execute at the time of the trigger.Unlike actions:  Filters change things, content passes through a filter function and must be returned, either updated/altered or unchanged.© 2012 Rick Radko, 39
  41. 41. Filtering the titleThe apply_filters in our code block: $title = apply_filters(widget_title, $instance[title], $instance, $this->id_base);  The filter lets other plugins or code, add functions to change the title content.  It’s important to have this code in the widget.  If a theme were to rely on this filter to affect the way widget titles are shown, the site wouldn’t render correctly without it.© 2012 Rick Radko, 40
  42. 42. The form functionAdd this code after /* form function */ line:: $title = esc_attr($instance[title]); ?> function form($instance) { <p><label for="<?php echo $this->get_field_id(title); ?>"><?php echo Title:; ?> <input class="widefat" id="<?php echo $this->get_field_id(title); ?>" name="<?php echo $this->get_field_name(title); ?>" type="text" value="<?php echo $title; ?>" /> </label></p> <?php } /* update function */  This function creates the widget box you see in your dashboard in admin.  The red part defines the HTML for your entry fields in the form. These can be copied from examples.© 2012 Rick Radko, 41
  43. 43. The update functionAdd this code after /* update function */ line: function update($new_instance, $old_instance) { $instance = array(); $new_instance = wp_parse_args( (array) $new_instance, array( title => ) ); $instance[title] = strip_tags($new_instance[title]); return $instance; }  This function saves the option data from the widget box you see in admin.  It also is used to “clean” input that is provided.  strip_tags removes HTML and PHP from the title.© 2012 Rick Radko, 42
  44. 44. The plugin code© 2012 Rick Radko, 43
  45. 45. Activate the plugin© 2012 Rick Radko, 44
  46. 46. Plugin activated© 2012 Rick Radko, 45
  47. 47. Plugin not activated - error  Debugging can be tricky, the line indicated for the error may be misleading, the error could be one or more lines above.  If you can’t fix this, it’s ok, we’ll update the plugin in a few slides.© 2012 Rick Radko, 46
  48. 48. Add the widget to the sidebarIf your widget loaded, go to Appearance, and thenWidgets in your dashboard.© 2012 Rick Radko, 47
  49. 49. Add a title if you want© 2012 Rick Radko, 48
  50. 50. The widget on the siteYou now have a Meetup widget on your site.© 2012 Rick Radko, 49
  51. 51. We have a widget that works, but…At this point we have a basic widget.  It has all the required elements for a widget.  You could build new widgets by revising the key parts.But, it’s not a great plugin:  You need to edit the code to change the URL or the displayed text.  It’s not very nice looking.  We need to add an image and CSS.  It would not be very good to give to other users.© 2012 Rick Radko, 50
  52. 52. Pull the baked cake out of the ovenProperly adding things like:  options for the URL and text to display.  a Meetup logo.  css loaded in the page header.  internationalization.starts to make things a bit more complicated.So to save time, I’m going to do a cooking showmove here, and pull the baked “cake” out of theoven.© 2012 Rick Radko, 51
  53. 53. Get the final version from wordpress.orgGo to your dashboard, Plugins page:© 2012 Rick Radko, 52
  54. 54. Update successfulOnce you see “Plugin updated successfully”:  Go to the click on Appearance and then go to the Widgets page.© 2012 Rick Radko, 53
  55. 55. Update the widgetAdd the group name and URL in the new optionboxes & save. Text: The Toronto WordPress Group URL:© 2012 Rick Radko, 54
  56. 56. The new widgetOnce you’ve hit save, take a look at your site:  That’s more like it!© 2012 Rick Radko, 55
  57. 57. Lets look at some of the new codeThere are a lot more files and more code.  Some of the files are needed only to put the plugin on  Sub-folders are added to keep things tidy.© 2012 Rick Radko, 56
  58. 58. r3df-meetup-widget.php: Header and copyrightThis is pretty much the same as we started with.  Added the GPL copyright notice© 2012 Rick Radko, 57
  59. 59. r3df-meetup-widget.php: Class and ConstructorWe still have the same class statement.  There two new sections in the constructor to load css and set a text domain.© 2012 Rick Radko, 58
  60. 60. r3df-meetup-widget.php: Widget functionThe widget function has had the content areachanged to allow for CSS styling, to add the image,and the option ‘middle’ for single line display.© 2012 Rick Radko, 59
  61. 61. r3df-meetup-widget.php: Form functionThe form function has had blocks added for all ofthe options. It’s also been internationalized.© 2012 Rick Radko, 60
  62. 62. r3df-meetup-widget.php: Update functionThe update function now handles all of the addedoptions.  The wp_parse_args sets defaults and strips out unknown parameters.© 2012 Rick Radko, 61
  63. 63. r3df-meetup-widget.php: added functionsTwo new functions have been added  One take care of loading the text domain – needed to use other languages.  The other to put the CSS style sheet in the header.We close with the same add_action we had© 2012 Rick Radko, 62
  64. 64. uninstall.phpThis added file runs if the plugin is uninstalled.  It removes the settings that were saved in the database for the widget.  Plugins should clean up after themselves.© 2012 Rick Radko, 63
  65. 65. The added style sheetLoaded into the page header.© 2012 Rick Radko, 64
  66. 66. Other possible plugin functionsPlugins can have:  activation/deactivation routines  menu items  options pages© 2012 Rick Radko, 65
  67. 67. What next?  Read some books – next couple of slides.  Watch some WordCamp talks – next couple of slides.  Read the codex:   © 2012 Rick Radko, 66
  68. 68. Books - 1Professional WordPress PluginDevelopmentby: Brad Williams, Ozh Richard, JustinTadlockRelated WordCamp Presentations:  ba/create-your-first-wordpress- plugin© 2012 Rick Radko, 67
  69. 69. Books - 2WordPress Plugin DevelopmentCookbookby: Yannick LefebvreRelated WordCamp videos:  /yannick-lefebvre-plugin- development-demystified/  /yannick-lefebvre-wordpress- plugin-development-201/© 2012 Rick Radko, 68
  70. 70. Books - 3WordPress 3 Plugin DevelopmentEssentialsby: Brian Bondari, Everett Griffiths© 2012 Rick Radko, 69
  71. 71. ContactRick Radko  email:  twitter: @r3designforgeSlides at: © 2012 Rick Radko, 70