Download - Intro to WordPress Plugin Development
r3df.com
Rick Radko
“Intro to WordPress Plugin
Development”
WordCamp Toronto
September 30th, 2012
Before we begin please:
Connect to the internet
Grab the slides from:
http://www.slideshare.net/r3df
© 2012 Rick Radko, r3df.com
A little bit about me
Rick 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: [email protected].
Slides are posted at:
http://www.slideshare.net/r3df
1
© 2012 Rick Radko, r3df.com
About this talk
This is a hands on workshop.
If you don’t have access to a WordPress site, you can also
follow 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.
2
© 2012 Rick Radko, r3df.com
Goals
In this workshop I will walk run through a reconstruction
of 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.
3
© 2012 Rick Radko, r3df.com
What is a plugin?
Plugins are blocks of code added to WordPress to
extend, or change the functionality of:
WordPress
Other plugins
Themes
4
© 2012 Rick Radko, r3df.com
More about plugins
Plugins:
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.
5
© 2012 Rick Radko, r3df.com
Lets create a plugin
We could create a “Hello World” widget for our
sidebar:
6
But that’s not very
useful, or interesting.
© 2012 Rick Radko, r3df.com
Meetup Widget
With a few more lines of code we can have:
7
© 2012 Rick Radko, r3df.com
Tools to use for programming
Programming editors:
Code completion
Syntax highlighting
Bracket matching
“Light” and fast
8
Windows: Notepad++, Sublime Text $$
Mac: TextWrangler, Coda $$, Sublime Text $$
© 2012 Rick Radko, r3df.com
More tools
IDE – 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 with
IDE’s Like NetBeans
9
© 2012 Rick Radko, r3df.com
A place to work
Development “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.
10
© 2012 Rick Radko, r3df.com
Not at WordCamp Toronto?
If you are doing this workshop on your own, it is
recommended 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 for
local servers from the codex:
http://codex.wordpress.org/User:Beltranrubo/BitNami
http://codex.wordpress.org/Installing_WordPress_Loc
ally_on_Your_Mac_With_MAMP
11
© 2012 Rick Radko, r3df.com
For the live workshop – we’re taking a shortcut
I’m going to demonstrate using the cPanel File
Manager 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.
12
© 2012 Rick Radko, r3df.com
Available tools
This 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 IDE
for the workshop.
For the workshop to work, please enter all the text
exactly as illustrated.
13
© 2012 Rick Radko, r3df.com
Log into your hosting account
14
© 2012 Rick Radko, r3df.com
Open File Manager
15
© 2012 Rick Radko, r3df.com
File Manager Popup
If you see this popup, make sure you have “Web
Root” selected and then hit go.
16
© 2012 Rick Radko, r3df.com
Path to plugins
Navigate to the plugin folder.
17
© 2012 Rick Radko, r3df.com
Create a folder for the plugin
18
© 2012 Rick Radko, r3df.com
New folder name
19
Folder Name: r3df-meetup-widget
© 2012 Rick Radko, r3df.com
The new folder
20
© 2012 Rick Radko, r3df.com
Empty plugin folder
21
© 2012 Rick Radko, r3df.com
Create the main plugin file
22
© 2012 Rick Radko, r3df.com
The new file form
23
File Name: r3df-meetup-widget.php
© 2012 Rick Radko, r3df.com
The main plugin file
24
© 2012 Rick Radko, r3df.com
Open the file in the editor
25
© 2012 Rick Radko, r3df.com
The new and empty file
26
© 2012 Rick Radko, r3df.com
The file header – the only required part of a plugin
27
<?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: [email protected] */ /* Plugin content here */
Creates this plugin information on the Plugins page in the Dashboard
© 2012 Rick Radko, r3df.com
The plugin with header
Paste the header code from above, into the file.
Plugin header information:
https://codex.wordpress.org/Writing_a_Plugin#File_Headers
28
© 2012 Rick Radko, r3df.com
Check out the plugin listing in your Dashboard
Ignore the update message if you see one.
Don’t activate it yet! 29
© 2012 Rick Radko, r3df.com
Empty plugin template
We now have an empty plugin that could be used
as 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/
30
© 2012 Rick Radko, r3df.com
Now lets make it do something
Copy and paste this code into your plugin
replacing /* Plugin content here */:
A lot of the code you need to do things in
WordPress will start with:
“boilerplate code” – code blocks that are needed
and repeatedly reused with slight edits.
31
class widget_r3dfmeetup extends WP_Widget { /* constructor */ } add_action('widgets_init', create_function('', 'return register_widget("widget_r3dfmeetup");'));
© 2012 Rick Radko, r3df.com
The line:
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_API
API – Application Programming Interface
Remote control for WordPress.
Using the API your PHP tells WordPress to do stuff.
The class declaration
32
class widget_r3dfmeetup extends WP_Widget {
© 2012 Rick Radko, r3df.com
Getting into the “action”
The line:
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. 33
add_action('widgets_init', create_function('', 'return register_widget( "widget_r3dfmeetup");‘ ));
© 2012 Rick Radko, r3df.com
WordPress actions
Actions 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 34
© 2012 Rick Radko, r3df.com
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.
35
© 2012 Rick Radko, r3df.com
The widget “constructor function”
Paste the constructor function into your plugin
below the /* constructor */ line:
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.
36
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 */
© 2012 Rick Radko, r3df.com
An older style of constructor
37
Some tutorials and/or widgets may have:
This is a older, PHP 4 style for constructors.
The function name needs to match the class
defined above.
function <function name that matches class name>() {
© 2012 Rick Radko, r3df.com
The widget function
Add this code after /* widget function */ line:
:
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. 38
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 */
© 2012 Rick Radko, r3df.com
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.
39
© 2012 Rick Radko, r3df.com
Filtering the title
The apply_filters in our code block:
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.
40
$title = apply_filters('widget_title', $instance['title'], $instance, $this->id_base);
© 2012 Rick Radko, r3df.com
The form function
Add this code after /* form function */ line:
:
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. 41
function form($instance) {
$title = esc_attr($instance['title']); ?>
<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 */
© 2012 Rick Radko, r3df.com
The update function
Add this code after /* update function */ line:
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.
42
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;
}
© 2012 Rick Radko, r3df.com
The plugin code
43
© 2012 Rick Radko, r3df.com
Activate the plugin
44
© 2012 Rick Radko, r3df.com
Plugin activated
45
© 2012 Rick Radko, r3df.com
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. 46
© 2012 Rick Radko, r3df.com
Add the widget to the sidebar
If your widget loaded, go to Appearance, and then
Widgets in your dashboard.
47
© 2012 Rick Radko, r3df.com
Add a title if you want
48
© 2012 Rick Radko, r3df.com
The widget on the site
You now have a Meetup widget on your site.
49
© 2012 Rick Radko, r3df.com
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. 50
© 2012 Rick Radko, r3df.com
Pull the baked cake out of the oven
Properly 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 show
move here, and pull the baked “cake” out of the
oven.
51
© 2012 Rick Radko, r3df.com
Get the final version from wordpress.org
Go to your dashboard, Plugins page:
52
© 2012 Rick Radko, r3df.com
Update successful
53
Once you see “Plugin updated successfully”:
Go to the click on Appearance and then go to the
Widgets page.
© 2012 Rick Radko, r3df.com
Update the widget
Add the group name and URL in the new option
boxes & save.
54
Text: The Toronto WordPress Group
URL: http://meetup.wptoronto.com/
© 2012 Rick Radko, r3df.com
The new widget
Once you’ve hit save, take a look at your site:
That’s more like it! 55
© 2012 Rick Radko, r3df.com
Lets look at some of the new code
There 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.
56
© 2012 Rick Radko, r3df.com
r3df-meetup-widget.php: Header and copyright
This is pretty much the same as we started with.
Added the GPL copyright notice
57
© 2012 Rick Radko, r3df.com
r3df-meetup-widget.php: Class and Constructor
We still have the same class statement.
There two new sections in the constructor to load
css and set a text domain.
58
© 2012 Rick Radko, r3df.com
r3df-meetup-widget.php: Widget function
The widget function has had the content area
changed to allow for CSS styling, to add the image,
and the option ‘middle’ for single line display.
59
© 2012 Rick Radko, r3df.com
r3df-meetup-widget.php: Form function
The form function has had blocks added for all of
the options. It’s also been internationalized.
60
© 2012 Rick Radko, r3df.com
r3df-meetup-widget.php: Update function
The update function now handles all of the added
options.
The wp_parse_args sets defaults and strips out
unknown parameters.
61
© 2012 Rick Radko, r3df.com
r3df-meetup-widget.php: added functions
Two 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
62
© 2012 Rick Radko, r3df.com
uninstall.php
This 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.
63
© 2012 Rick Radko, r3df.com
The added style sheet
Loaded into the page header.
64
© 2012 Rick Radko, r3df.com
Other possible plugin functions
Plugins can have:
activation/deactivation routines
menu items
options pages
65
© 2012 Rick Radko, r3df.com
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
66
© 2012 Rick Radko, r3df.com
Books - 1
Professional WordPress Plugin
Development
by: Brad Williams, Ozh Richard, Justin
Tadlock
Related WordCamp Presentations:
http://www.slideshare.net/williams
ba/create-your-first-wordpress-
plugin
67
© 2012 Rick Radko, r3df.com
Books - 2
WordPress Plugin Development
Cookbook
by: Yannick Lefebvre
Related 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/
68
© 2012 Rick Radko, r3df.com
Books - 3
WordPress 3 Plugin Development
Essentials
by: Brian Bondari, Everett Griffiths
69
© 2012 Rick Radko, r3df.com
Contact
Rick Radko
email: [email protected]
twitter: @r3designforge
Slides at:
www.slideshare.net/r3df
70