Intro to WordPress Plugin Development

“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

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

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

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

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

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

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

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: 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: 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

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

Intro to WordPress Plugin Development

by R-Cubed Design Forge on Sep 30, 2012

Accessibility

Categories

Upload Details

Usage Rights

2 Embeds 5

Statistics

Intro to WordPress Plugin Development Presentation Transcript

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