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/r3df

Rick Radko WordCamp Toronto
r3df.com September 30th, 2012

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

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.

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.

What is a plugin?

Plugins are blocks of code added to WordPress to
extend, or change the functionality of:
 WordPress
 Other plugins
 Themes


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.


Lets create a plugin

We could create a “Hello World” widget for our
sidebar:

But that’s not very
useful, or interesting.


Meetup Widget

With a few more lines of code we can have:


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

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

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.

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

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.


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.

Log into your hosting account


Open File Manager


File Manager Popup

If you see this popup, make sure you have “Web
Root” selected and then hit go.


Path to plugins

Navigate to the plugin folder.


Create a folder for the plugin


New folder name

Folder Name: r3df-meetup-widget

The new folder


Empty plugin folder


Create the main plugin file


The new file form

File Name: r3df-meetup-widget.php

The main plugin file


Open the file in the editor


The new and empty file


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


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


Check out the plugin listing in your Dashboard

 Ignore the update message if you see one.
 Don’t activate it yet!

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/

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.


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.

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.

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

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.


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.

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.


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.

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.

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.


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.

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.


The plugin code


Activate the plugin


Plugin activated


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.

Add the widget to the sidebar

If your widget loaded, go to Appearance, and then
Widgets in your dashboard.


Add a title if you want


The widget on the site

You now have a Meetup widget on your site.


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.

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.

Get the final version from wordpress.org

Go to your dashboard, Plugins page:


Update successful

Once you see “Plugin updated successfully”:
 Go to the click on Appearance and then go to the
Widgets page.


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/


The new widget

Once you’ve hit save, take a look at your site:

 That’s more like it!

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.


r3df-meetup-widget.php: Header and copyright

This is pretty much the same as we started with.
 Added the GPL copyright notice


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.


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.


r3df-meetup-widget.php: Form function

The form function has had blocks added for all of
the options. It’s also been internationalized.


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.


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


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.


The added style sheet

Loaded into the page header.


Other possible plugin functions

Plugins can have:
 activation/deactivation routines
 menu items
 options pages


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


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


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/

Books - 3

WordPress 3 Plugin Development
Essentials
by: Brian Bondari, Everett Griffiths


Contact

Rick Radko
 email: wpinfo@r3df.com
 twitter: @r3designforge

Slides at:
 www.slideshare.net/r3df


Intro to WordPress Plugin Development

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (19)

En vedette

En vedette (20)

Similaire à Intro to WordPress Plugin Development

Similaire à Intro to WordPress Plugin Development (20)

Dernier

Dernier (20)

Intro to WordPress Plugin Development