Más contenido relacionado La actualidad más candente (19) Similar a Intro to WordPress Plugin Development (20) Intro to WordPress Plugin Development1. “Intro to WordPress Plugin
Development”
Before we begin please:
Connect to the internet
Grab the slides from:
http://www.slideshare.net/r3df
Rick Radko WordCamp Toronto
r3df.com September 30th, 2012
2. 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: wpinfo@r3df.com.
Slides are posted at:
http://www.slideshare.net/r3df
© 2012 Rick Radko, r3df.com 1
3. 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.
© 2012 Rick Radko, r3df.com 2
4. 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.
© 2012 Rick Radko, r3df.com 3
5. What is a plugin?
Plugins are blocks of code added to WordPress to
extend, or change the functionality of:
WordPress
Other plugins
Themes
© 2012 Rick Radko, r3df.com 4
6. 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.
© 2012 Rick Radko, r3df.com 5
7. Lets create a plugin
We could create a “Hello World” widget for our
sidebar:
But that’s not very
useful, or interesting.
© 2012 Rick Radko, r3df.com 6
9. Tools to use for programming
Programming 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
10. 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
© 2012 Rick Radko, r3df.com 9
11. 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.
© 2012 Rick Radko, r3df.com 10
12. 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
© 2012 Rick Radko, r3df.com 11
13. 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.
© 2012 Rick Radko, r3df.com 12
14. 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.
© 2012 Rick Radko, r3df.com 13
17. File Manager Popup
If you see this popup, make sure you have “Web
Root” selected and then hit go.
© 2012 Rick Radko, r3df.com 16
20. New folder name
Folder Name: r3df-meetup-widget
© 2012 Rick Radko, r3df.com 19
24. The new file form
File Name: r3df-meetup-widget.php
© 2012 Rick Radko, r3df.com 23
27. The new and empty file
© 2012 Rick Radko, r3df.com 26
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: 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
29. 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
© 2012 Rick Radko, r3df.com 28
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, r3df.com 29
31. 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/
© 2012 Rick Radko, r3df.com 30
32. Now lets make it do something
Copy and paste this code into your plugin
replacing /* 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 in
WordPress will start with:
“boilerplate code” – code blocks that are needed
and repeatedly reused with slight edits.
© 2012 Rick Radko, r3df.com 31
33. The class declaration
The 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_API
API – Application Programming Interface
Remote control for WordPress.
Using the API your PHP tells WordPress to do stuff.
© 2012 Rick Radko, r3df.com 32
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, r3df.com 33
35. 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
© 2012 Rick Radko, r3df.com 34
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, r3df.com 35
37. The widget “constructor function”
Paste the constructor function into your plugin
below 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
38. An older style of constructor
Some 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
39. The widget function
Add 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
40. 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
41. Filtering the title
The 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
42. The form function
Add 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
43. The update function
Add 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
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, r3df.com 46
48. Add the widget to the sidebar
If your widget loaded, go to Appearance, and then
Widgets in your dashboard.
© 2012 Rick Radko, r3df.com 47
49. Add a title if you want
© 2012 Rick Radko, r3df.com 48
50. The widget on the site
You now have a Meetup widget on your site.
© 2012 Rick Radko, r3df.com 49
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, r3df.com 50
52. 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.
© 2012 Rick Radko, r3df.com 51
53. Get the final version from wordpress.org
Go to your dashboard, Plugins page:
© 2012 Rick Radko, r3df.com 52
54. Update successful
Once you see “Plugin updated successfully”:
Go to the click on Appearance and then go to the
Widgets page.
© 2012 Rick Radko, r3df.com 53
55. Update the widget
Add the group name and URL in the new option
boxes & save. Text: The Toronto WordPress Group
URL: http://meetup.wptoronto.com/
© 2012 Rick Radko, r3df.com 54
56. The new widget
Once you’ve hit save, take a look at your site:
That’s more like it!
© 2012 Rick Radko, r3df.com 55
57. 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.
© 2012 Rick Radko, r3df.com 56
59. 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.
© 2012 Rick Radko, r3df.com 58
60. 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.
© 2012 Rick Radko, r3df.com 59
63. 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
© 2012 Rick Radko, r3df.com 62
64. 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.
© 2012 Rick Radko, r3df.com 63
65. The added style sheet
Loaded into the page header.
© 2012 Rick Radko, r3df.com 64
66. Other possible plugin functions
Plugins can have:
activation/deactivation routines
menu items
options pages
© 2012 Rick Radko, r3df.com 65
67. 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
68. 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
© 2012 Rick Radko, r3df.com 67
69. 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/
© 2012 Rick Radko, r3df.com 68
70. Books - 3
WordPress 3 Plugin Development
Essentials
by: Brian Bondari, Everett Griffiths
© 2012 Rick Radko, r3df.com 69
71. Contact
Rick Radko
email: wpinfo@r3df.com
twitter: @r3designforge
Slides at:
www.slideshare.net/r3df
© 2012 Rick Radko, r3df.com 70