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:


1

r3df.com

r3df.com

r3df.com

http://wpottawa.org/

mailto:[email protected]



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


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


What is a plugin?

Plugins are blocks of code added to WordPress to

extend, or change the functionality of:

WordPress

Other plugins

Themes

4


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


Lets create a plugin

We could create a “Hello World” widget for our

sidebar:

6

But that’s not very

useful, or interesting.


Meetup Widget

With a few more lines of code we can have:

7


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

http://notepad-plus-plus.org/

http://www.sublimetext.com/

http://www.barebones.com/products/TextWrangler/

http://www.panic.com/coda/

http://www.sublimetext.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

http://netbeans.org/

http://www.eclipse.org/

http://www.aptana.com/

http://www.jetbrains.com/phpstorm/

http://www.activestate.com/komodo-ide

http://www.youtube.com/watch?v=6sWllWP3NKM





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

http://bitnami.org/stack/wordpress

http://www.apachefriends.org/en/xampp.html

http://www.wampserver.com/

http://www.mamp.info/


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



http://codex.wordpress.org/Installing_WordPress_Locally_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.

12


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


Log into your hosting account

14


Open File Manager

15


File Manager Popup

If you see this popup, make sure you have “Web

Root” selected and then hit go.

16


Path to plugins

Navigate to the plugin folder.

17


Create a folder for the plugin

18


New folder name

19

Folder Name: r3df-meetup-widget


The new folder

20


Empty plugin folder

21


Create the main plugin file

22


The new file form

23

File Name: r3df-meetup-widget.php


The main plugin file

24


Open the file in the editor

25


The new and empty file

26


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


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

https://codex.wordpress.org/Writing_a_Plugin




Check out the plugin listing in your Dashboard

Ignore the update message if you see one.

Don’t activate it yet! 29


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

http://r3df.dev1/downloads/

http://www.slideshare.net/r3df/dont-just-paste-this-code-in-your-functionsphp

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

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");'));


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 {

http://codex.wordpress.org/Widgets_API


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");‘ ));


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




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


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


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>() {


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


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




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);


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


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;

}


The plugin code

43


Activate the plugin

44


Plugin activated

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. 46


Add the widget to the sidebar

If your widget loaded, go to Appearance, and then

Widgets in your dashboard.

47


Add a title if you want

48


The widget on the site

You now have a Meetup widget on your site.

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. 50


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


Get the final version from wordpress.org

Go to your dashboard, Plugins page:

52


Update successful

53

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.

54

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! 55


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


r3df-meetup-widget.php: Header and copyright

This is pretty much the same as we started with.

Added the GPL copyright notice

57


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


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


r3df-meetup-widget.php: Form function

The form function has had blocks added for all of

the options. It’s also been internationalized.

60


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


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


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


The added style sheet

Loaded into the page header.

64


Other possible plugin functions

Plugins can have:

activation/deactivation routines

menu items

options pages

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

66








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

http://www.slideshare.net/williamsba/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/

68

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

69


Contact

Rick Radko

email: [email protected]

twitter: @r3designforge

Slides at:

www.slideshare.net/r3df

70


Technology

Intro to WordPress Plugin Development