• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Intro to WordPress Plugin Development

Intro to WordPress Plugin Development



Presentation slides from WordCamp Toronto 2012 talk. ...

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.



Total Views
Views on SlideShare
Embed Views



2 Embeds 11

https://twitter.com 9
http://www.twylah.com 2



Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

    Intro to WordPress Plugin Development Intro to WordPress Plugin Development Presentation Transcript

    • “Intro to WordPress Plugin Development”Before we begin please:  Connect to the internet  Grab the slides from:  http://www.slideshare.net/r3dfRick Radko WordCamp Torontor3df.com September 30th, 2012
    • 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: wpinfo@r3df.com.Slides are posted at:  http://www.slideshare.net/r3df© 2012 Rick Radko, r3df.com 1
    • 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 wordpress.com 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, r3df.com 2
    • GoalsIn this workshop I will walk run through a reconstructionof a plugin I published on wordpress.org.  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, r3df.com 3
    • 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, r3df.com 4
    • 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, r3df.com 5
    • Lets create a pluginWe could create a “Hello World” widget for oursidebar: But that’s not very useful, or interesting.© 2012 Rick Radko, r3df.com 6
    • Meetup WidgetWith a few more lines of code we can have:© 2012 Rick Radko, r3df.com 7
    • 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, r3df.com 8
    • 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, r3df.com 9
    • 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, r3df.com 10
    • 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:  http://codex.wordpress.org/User:Beltranrubo/BitNami  http://codex.wordpress.org/Installing_WordPress_Loc ally_on_Your_Mac_With_MAMP© 2012 Rick Radko, r3df.com 11
    • 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 wordpress.com, you cannot add plugins there.© 2012 Rick Radko, r3df.com 12
    • 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, r3df.com 13
    • Log into your hosting account© 2012 Rick Radko, r3df.com 14
    • Open File Manager© 2012 Rick Radko, r3df.com 15
    • File Manager PopupIf you see this popup, make sure you have “WebRoot” selected and then hit go.© 2012 Rick Radko, r3df.com 16
    • Path to pluginsNavigate to the plugin folder.© 2012 Rick Radko, r3df.com 17
    • Create a folder for the plugin© 2012 Rick Radko, r3df.com 18
    • New folder name Folder Name: r3df-meetup-widget© 2012 Rick Radko, r3df.com 19
    • The new folder© 2012 Rick Radko, r3df.com 20
    • Empty plugin folder© 2012 Rick Radko, r3df.com 21
    • Create the main plugin file© 2012 Rick Radko, r3df.com 22
    • The new file form File Name: r3df-meetup-widget.php© 2012 Rick Radko, r3df.com 23
    • The main plugin file© 2012 Rick Radko, r3df.com 24
    • Open the file in the editor© 2012 Rick Radko, r3df.com 25
    • The new and empty file© 2012 Rick Radko, r3df.com 26
    • 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: http://r3df.com/ Version: 1.0 WC Demo Author: R3DF Author URI: http://r3df.com/ Author email: wpinfo@r3df.com */ /* Plugin content here */ Creates this plugin information on the Plugins page in the Dashboard© 2012 Rick Radko, r3df.com 27
    • The plugin with headerPaste the header code from above, into the file.Plugin header information:  https://codex.wordpress.org/Writing_a_Plugin#File_Headers© 2012 Rick Radko, r3df.com 28
    • Check out the plugin listing in your Dashboard  Ignore the update message if you see one.  Don’t activate it yet!© 2012 Rick Radko, r3df.com 29
    • 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 http://ottopress.com/2011/creating-a-site-specific- snippets-plugin/© 2012 Rick Radko, r3df.com 30
    • 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, r3df.com 31
    • 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: http://codex.wordpress.org/Widgets_APIAPI – Application Programming Interface  Remote control for WordPress.  Using the API your PHP tells WordPress to do stuff.© 2012 Rick Radko, r3df.com 32
    • 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, r3df.com 33
    • 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.  http://codex.wordpress.org/Plugin_API/Action_Reference  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, r3df.com 34
    • 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, r3df.com 35
    • 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, r3df.com 36
    • 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, r3df.com 37
    • 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="http://meetup.wptoronto.com/">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, r3df.com 38
    • Filters“Filters” are the other “hook” type in WordPress.Like actions:  Specific events (100’s) trigger them.  http://codex.wordpress.org/Plugin_API/Filter_Reference  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, r3df.com 39
    • 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, r3df.com 40
    • 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, r3df.com 41
    • 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, r3df.com 42
    • The plugin code© 2012 Rick Radko, r3df.com 43
    • Activate the plugin© 2012 Rick Radko, r3df.com 44
    • Plugin activated© 2012 Rick Radko, r3df.com 45
    • 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, r3df.com 46
    • Add the widget to the sidebarIf your widget loaded, go to Appearance, and thenWidgets in your dashboard.© 2012 Rick Radko, r3df.com 47
    • Add a title if you want© 2012 Rick Radko, r3df.com 48
    • The widget on the siteYou now have a Meetup widget on your site.© 2012 Rick Radko, r3df.com 49
    • 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, r3df.com 50
    • 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, r3df.com 51
    • Get the final version from wordpress.orgGo to your dashboard, Plugins page:© 2012 Rick Radko, r3df.com 52
    • Update successfulOnce you see “Plugin updated successfully”:  Go to the click on Appearance and then go to the Widgets page.© 2012 Rick Radko, r3df.com 53
    • Update the widgetAdd the group name and URL in the new optionboxes & save. Text: The Toronto WordPress Group URL: http://meetup.wptoronto.com/© 2012 Rick Radko, r3df.com 54
    • The new widgetOnce you’ve hit save, take a look at your site:  That’s more like it!© 2012 Rick Radko, r3df.com 55
    • 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 wordpress.org.  Sub-folders are added to keep things tidy.© 2012 Rick Radko, r3df.com 56
    • r3df-meetup-widget.php: Header and copyrightThis is pretty much the same as we started with.  Added the GPL copyright notice© 2012 Rick Radko, r3df.com 57
    • 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, r3df.com 58
    • 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, r3df.com 59
    • r3df-meetup-widget.php: Form functionThe form function has had blocks added for all ofthe options. It’s also been internationalized.© 2012 Rick Radko, r3df.com 60
    • 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, r3df.com 61
    • 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, r3df.com 62
    • 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, r3df.com 63
    • The added style sheetLoaded into the page header.© 2012 Rick Radko, r3df.com 64
    • Other possible plugin functionsPlugins can have:  activation/deactivation routines  menu items  options pages© 2012 Rick Radko, r3df.com 65
    • What next?  Read some books – next couple of slides.  Watch some WordCamp talks – next couple of slides.  Read the codex:  http://codex.wordpress.org/Writing_a_Plugin  http://codex.wordpress.org/Plugin_Resources  http://codex.wordpress.org/Developer_Documentation© 2012 Rick Radko, r3df.com 66
    • Books - 1Professional WordPress PluginDevelopmentby: Brad Williams, Ozh Richard, JustinTadlockRelated WordCamp Presentations:  http://www.slideshare.net/williams ba/create-your-first-wordpress- plugin© 2012 Rick Radko, r3df.com 67
    • Books - 2WordPress Plugin DevelopmentCookbookby: Yannick LefebvreRelated WordCamp videos:  http://wordpress.tv/2011/08/16 /yannick-lefebvre-plugin- development-demystified/  http://wordpress.tv/2012/09/10 /yannick-lefebvre-wordpress- plugin-development-201/© 2012 Rick Radko, r3df.com 68
    • Books - 3WordPress 3 Plugin DevelopmentEssentialsby: Brian Bondari, Everett Griffiths© 2012 Rick Radko, r3df.com 69
    • ContactRick Radko  email: wpinfo@r3df.com  twitter: @r3designforgeSlides at:  www.slideshare.net/r3df© 2012 Rick Radko, r3df.com 70