a peek into the world of wordpress plugin development

r3df.comRick Radko

“A Peek into the World of WordPress Plugin Development”

WordCamp TorontoOctober 5th, 2013

Slides: http://www.slideshare.net/r3df

http://www.slideshare.net/r3df

© 2013 Rick Radko, r3df.com

2

A little bit about me

Rick Radko – R-Cubed Design ForgeSoftware, web and app

designer/developer.Creating web sites since 1996.

WordPress enthusiast.Co-organizer of WordCamp Ottawa 2013 &

2014Co-organizer of: The Ottawa WordPress

Group. http://wpottawa.org

Slides are posted at:http://www.slideshare.net/r3df

http://wpottawa.org/



About this presentation

In this presentation I will run through the construction of a simple plugin.The example I will use is a plugin I have

published on wordpress.org.The intent of this session is

exposure to concepts andideas, not complete understanding. - No instant code ninjas!

There is tons of material onthe net, in books and otherresources to learn more at a more leisurely pace.

3Image Credit: Derivative of CC Image by Dani Latorre on Flickr

http://www.flickr.com/photos/dlato/5530553658/sizes/o/in/photostream/




What is a plugin?

Plugins are blocks of code added to WordPress to extend, or change the functionality of:WordPressOther pluginsThemes

You can create a custom plugin to do just about anything you want.1000's of plugins available to add to your

site.4


This is a plugin

5


More about plugins…

WordPress plugins:Are written in PHP. (That gobbledygook

on the previous slide was PHP.)Can be a couple lines of code.Or 60,000 lines of code.

PHP Help:Online PHP Manual:

www.php.net/manual/en/index.phpW3schools:

www.w3schools.com/php/default.asp+ Google of course… 6

http://www.php.net/manual/en/index.php

http://www.w3schools.com/php/default.asp


Plugins also:

WordPress plugins also:Make use of WordPress API’s.

The Codex - learn about all things WordPress

codex.wordpress.org/Writing_a_Plugin Will likely have some HTML and CSS.

www.w3schools.com + many other resources.

May access the database (MySQL).www.mysql.com + many other resources.

May use some JavaScript.www.w3schools.com again + many other

resources.7

http://codex.wordpress.org/Writing_a_Plugin


http://www.w3schools.com/

http://www.mysql.com/

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

$$

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 EnvironmentNetBeans, Eclipse, Aptana, PhpStorm $,

Komodo $, + moreDo a lot more than a programming editor“Heavier”

Jeremy Clarke - WordCamp Montreal: 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/


The header – the only required part of a plugin

11

Plugin header details:codex.wordpress.org/Writing_a_Plugin#File_Headers

Creates this plugin information on the Plugins page in the Dashboard

https://codex.wordpress.org/Writing_a_Plugin#File_Headers

https://codex.wordpress.org/Writing_a_Plugin#File_Headers


Where do we put the header?

Simplest plugin is a file only:site-plugin.phpin the WordPress plugins folder:

wp-content/plugins/

12


Better plugin structure

A better structure for your plugin: folder + file

13


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 function

s.php”orottopress.com/2011/creating-a-site-specific

-snippets-plugin/

14

http://r3df.dev1/downloads/

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

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

http://ottopress.com/2011/creating-a-site-specific-snippets-plugin/

http://ottopress.com/2011/creating-a-site-specific-snippets-plugin/


Meetup widget on wordpress.org

15

wordpress.org/extend/plugins/r3df-meetup-widget

http://wordpress.org/extend/plugins/r3df-meetup-widget/


Edit the site-plugin template

Revised plugin header:

16


Change the file names

Name the file: r3df-meetup-widget.phpAnd the folder: r3df-meetup-widget

17


WordPress widget outline

Basic widget outline:

codex.wordpress.org/Widgets_API 18

http://codex.wordpress.org/Widgets_API



Lets add a widget!

We add this code to the plugin:

The "class" creates a new object that lets us “extend” the WordPress WP_Widget class.

The WP_Widget class does all the heavy lifting in creating a widget.

Use the codex example, change the class name.

Codex: codex.wordpress.org/Widgets_APIAPI – Application Programming Interface

19




Getting into the “action”

Tells WordPress to register our widget at the time it is setting up widgets - 'widgets_init'.

When you create a widget, the only thing you need to change in the action is the widget name.

Actions are very important to WordPress plugins.

20


WordPress actions

Actions are one of 2 types of WordPress “Hooks”.Specific events (100’s) trigger them, for

example:Publishing a post or pageDisplaying a post, page or admin page.Displaying a menu.Displaying the page content.codex.wordpress.org/Plugin_API/

Action_ReferenceTo use an action, your plugin defines a

function for WordPress to execute at that action event.

Generally actions “do” things.Filters, which we will see later “change”

things

21

http://codex.wordpress.org/Plugin_API/Action_Reference





Getting hooked on actions

WP Native Dashboard FixMoving 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.

22


The widget “constructor function”

Add the constructor function:

Sets up the widget with an id, name and description.Note: the name and description have been

internationalized__( ) is a function to assist in showing other

languagescodex.wordpress.org/I18n_for_WordPress_Develope

rs

Just change the ID the description and the name to reuse this block of code from the codex.

23

http://codex.wordpress.org/I18n_for_WordPress_Developers

http://codex.wordpress.org/I18n_for_WordPress_Developers


The widget function

Add the widget function:

The <a … /a> part is the content we want to show, the rest is required for a standard widget.

The extract($args) expands an array (group) of variables into individual variables: $before_widget, $after_widget, $before_title, $after_title.

24


Filtering the title

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.

25


Filters

“Filters” are the other “hook” type in WordPress.Like actions:Specific events (100’s) trigger them.

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.

26

http://codex.wordpress.org/Plugin_API/Filter_Reference





The form function

Add the form function:

This function creates the widget box you see in your dashboard in admin.

The <p … /p> part defines the HTML for your fields in the admin widget. These can be copied from examples.

27


The update function

Add the update function:

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


The plugin code

29


The plugin code continued…

30


Activation error

Debugging errors can be tricky, the line indicated for the error may be misleading, the error could be one or more lines above.

31


The resulting widget on the site

You now have a Meetup widget.

But it's not yet quite what we were expecting…

32


We have a widget that works, but…

Our widget plugin:has all the required elements for a widget.could build used as a base to create new

widgets.

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 for the logo and CSS.

It would not be very good to give to other users.

This starts to make things a bit more complicated.

33


Lets add the options to admin

This is what we want to get to:A box for text to

display so you can choose what is shown for the link text.

A box for the URL wewant.

And in the finalversion on .org thereis also a selector toadjust the textposition.

34


Update the form function

The first 4 lines get the current saved value for each setting to a variable that is used in the form sections.

The next 4 blocks of code starting with <p> each represent the html for the form item for each setting.

35


The first 3 blocks of code

The code is similar and repetitive.36


The last block of code

A lot of this code can be copied from examples and then modified to suit your plugin.Look at other plugins in the repository.Check for examples in the codex.

37


Add the new options to the update function

The update function for all of the added options.

The wp_parse_args sets defaults for values that don't exist in the input value array.In this case the array in $new_instance.

38


Update the widget to use the new options

39


The extended output block

The content area has been changed:to allow for CSS styling,to add the image,To add the option ‘middle’ for single line

display.

40


Load a css file

Added section in the constructor to load css.

41


Add style function

This function has been added after the update function.

It loads a CSS file "the WordPress way" codex.wordpress.org/Function_Reference/wp_enqueue_style

NOTE: There is a similar process for loading scripts. codex.wordpress.org/Function_Reference/

wp_enqueue_script 42

http://codex.wordpress.org/Function_Reference/wp_enqueue_style




http://codex.wordpress.org/Function_Reference/wp_enqueue_script





The added style sheet

The link to load this CSS style sheet is added into the web page header.

43


Wrapping up the plugin…

We need 2 more additions to the plugin to round it out for public use:A function to take care of loading the text

domain.Needed to enable the display of translated

text for the plugin.A function to clean up on uninstall.

44


Text domain

A function to load the text domain:

The action to call it in the constructor:

45


And finally: 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.

46


The files now in the plugin

The CSS is in the /inc folder.The /lang folder is for translations of the

plugin.readme .txt & screenshots are needed for

the repository. 47


The new widget

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

That’s more like it! 48


Other possible plugin functions

Plugins can have:activation/deactivation routinesmenu itemsoptions pages

49


What next?

Read some booksWatch some WordCamp talks – next

couple of slides.Read the codex:

http://codex.wordpress.org/Writing_a_Pluginhttp://codex.wordpress.org/Plugin_Resourceshttp://

codex.wordpress.org/Developer_Documentation

Try some experements.

50



http://codex.wordpress.org/Plugin_Resources

http://codex.wordpress.org/Plugin_Resources

http://codex.wordpress.org/Developer_Documentation

http://codex.wordpress.org/Developer_Documentation


WordPress plugin books 1

Professional WordPress Plugin Developmentby: Brad Williams, Ozh Richard, Justin Tadlock

Related WordCamp Presentations:http://

www.slideshare.net/williamsba/create-your-first-wordpress-plugin

51

http://www.slideshare.net/williamsba/create-your-first-wordpress-plugin







WordPress Plugin Development Cookbookby: 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/

52

http://wordpress.tv/2011/08/16/yannick-lefebvre-plugin-development-demystified/











WordPress 3 Plugin Development Essentialsby: Brian Bondari, Everett Griffiths

53


PHP books 1

Programming PHPby: Kevin Tatroe, Peter MacIntyre, Rasmus Lerdorf

54


PHP books 2

Learning PHP, MySQL, JavaScript, and CSSby: Robin Nixon

55


Contact

Rick Radkoemail: [email protected]: @r3designforge

Slides at:www.slideshare.net/r3df

56


a peek into the world of wordpress plugin development

Technology