Intro to WordPress Plugins

Intro to WordPress Doug Stewart Philly Tech Week 2012 Plugins

Intro to WordPress PluginsPhilly Tech Week 2012Philadelphia Inquirer BuildingApril 25th, 2012

Who am I?

Who am I?• Doug Stewart

Who am I?• Doug Stewart• Philly WordPress Meetup co-organizer

Who am I?• Doug Stewart• Philly WordPress Meetup co-organizer• Using WordPress since version 1.0 (February 2004 or so)

Who am I?• Doug Stewart• Philly WordPress Meetup co-organizer• Using WordPress since version 1.0 (February 2004 or so)• @zamoose on Twitter

Why are we here?

Why are we here?•Plugins!

What’s a plugin?

What’s a plugin?• The WordPress Codex* deﬁnes a plugin as: “[...]a program, or a set of one or more functions, written in the PHP scripting language, that adds a speciﬁc set of features or services to the WordPress weblog, which can be seamlessly integrated with the weblog using access points and methods provided by the WordPress Plugin Application Program Interface (API).”**

What’s a plugin?• The WordPress Codex* deﬁnes a plugin as: “[...]a program, or a set of one or more functions, written in the PHP scripting language, that adds a speciﬁc set of features or services to the WordPress weblog, which can be seamlessly integrated with the weblog using access points and methods provided by the WordPress Plugin Application Program Interface (API).”*** You do know what the Codex is, right?** http://codex.wordpress.org/Writing_a_Plugin

A plugin...

A plugin...• Is a piece of software

A plugin...• Is a piece of software• Is usually written in a mix of PHP and JavaScript

A plugin...• Is a piece of software• Is usually written in a mix of PHP and JavaScript• Supplements or substantially alters the way WordPress functions

A plugin...• Is a piece of software• Is usually written in a mix of PHP and JavaScript• Supplements or substantially alters the way WordPress functions• Uses the WordPress Plugin API* to accomplish the above in a way that integrates with WordPress

A plugin...• Is a piece of software• Is usually written in a mix of PHP and JavaScript• Supplements or substantially alters the way WordPress functions• Uses the WordPress Plugin API* to accomplish the above in a way that integrates with WordPress * http://codex.wordpress.org/Plugin_API

A few notable plugins

A few notable plugins• Hello Dolly

A few notable plugins• Hello Dolly• Akismet

A few notable plugins• Hello Dolly• Akismet• BuddyPress

A few notable plugins• Hello Dolly• Akismet• BuddyPress• WordPress SEO

A few notable plugins• Hello Dolly• Akismet• BuddyPress• WordPress SEO• bbPress

Creating your own

Step 1: What do you want to do?

Step 1.1: Has anyone ELSE tried to do this?

Step 1.2: Has anyone else done this poorly?

http://wordpress.org/extend/plugins/

At this point, this effectwill likely kick in.

At this point, this effectwill likely kick in.• Fight the instinct to procrastinate.

At this point, this effectwill likely kick in.• Fight the instinct to procrastinate.• Plan.

At this point, this effectwill likely kick in.• Fight the instinct to procrastinate.• Plan.• Wireframe.

At this point, this effectwill likely kick in.• Fight the instinct to procrastinate.• Plan.• Wireframe.• Pen and paper can help.

Step 2: Getting Started

Getting started

Getting started• This sounds simple, but pick a name for your plugin

Getting started• This sounds simple, but pick a name for your plugin• Now pick a “slug” for your plugin

Getting started• This sounds simple, but pick a name for your plugin• Now pick a “slug” for your plugin• Check your slug against existing plugins

Getting started• This sounds simple, but pick a name for your plugin• Now pick a “slug” for your plugin• Check your slug against existing plugins • Slugs are universally used by WordPress to identify plugins

Getting started• This sounds simple, but pick a name for your plugin• Now pick a “slug” for your plugin• Check your slug against existing plugins • Slugs are universally used by WordPress to identify plugins • If you somehow end up with a slug that matches another plugin’s, there will be trouble

Getting started• This sounds simple, but pick a name for your plugin• Now pick a “slug” for your plugin• Check your slug against existing plugins • Slugs are universally used by WordPress to identify plugins • If you somehow end up with a slug that matches another plugin’s, there will be trouble • Easy solution: unique slug preﬁx

Getting started (cont.) Plugin Name: LB ColorBox Plugin Slug: lb-colorbox

Getting started (cont.)

Getting started (cont.)• Read about the plugin submission process at http://wordpress.org/extend/plugins/about/

Getting started (cont.)• Read about the plugin submission process at http://wordpress.org/extend/plugins/about/• Go to http://wordpress.org/extend/plugins/add/

Getting started (cont.)• Read about the plugin submission process at http://wordpress.org/extend/plugins/about/• Go to http://wordpress.org/extend/plugins/add/• Log in with your WordPress.org account

Getting started (cont.)• Read about the plugin submission process at http://wordpress.org/extend/plugins/about/• Go to http://wordpress.org/extend/plugins/add/• Log in with your WordPress.org account• Register your new plugin

Getting started (cont.)• Read about the plugin submission process at http://wordpress.org/extend/plugins/about/• Go to http://wordpress.org/extend/plugins/add/• Log in with your WordPress.org account• Register your new plugin • Name and description are required

Getting started (cont.)• Read about the plugin submission process at http://wordpress.org/extend/plugins/about/• Go to http://wordpress.org/extend/plugins/add/• Log in with your WordPress.org account• Register your new plugin • Name and description are required• Wait for The Powers That Be to approve your plugin submission

Getting started (cont.)• Read about the plugin submission process at http://wordpress.org/extend/plugins/about/• Go to http://wordpress.org/extend/plugins/add/• Log in with your WordPress.org account• Register your new plugin • Name and description are required• Wait for The Powers That Be to approve your plugin submission• While you wait...

Step 3: Set up your development environment

Set up your development environment

Set up your development environment• You’ll need a development environment

Set up your development environment• You’ll need a development environment • Local?

Set up your development environment• You’ll need a development environment • Local? • Remote?

Set up your development environment• You’ll need a development environment • Local? • Remote?• Local development environment is preferable

Set up your development environment• You’ll need a development environment • Local? • Remote?• Local development environment is preferable • Disconnected development

Set up your development environment• You’ll need a development environment • Local? • Remote?• Local development environment is preferable • Disconnected development • No waiting for uploads

Set up your development environment• You’ll need a development environment • Local? • Remote?• Local development environment is preferable • Disconnected development • No waiting for uploads • Master of your own domain

Set up your development environment (cont.)

Set up your development environment (cont.)• Windows

Set up your development environment (cont.)• Windows • WAMP (http://www.wampserver.com/en/)

Set up your development environment (cont.)• Windows • WAMP (http://www.wampserver.com/en/) • XAMPP (http://www.apachefriends.org/en/xampp-windows.html)

Set up your development environment (cont.)• Windows • WAMP (http://www.wampserver.com/en/) • XAMPP (http://www.apachefriends.org/en/xampp-windows.html)• OS X

Set up your development environment (cont.)• Windows • WAMP (http://www.wampserver.com/en/) • XAMPP (http://www.apachefriends.org/en/xampp-windows.html)• OS X • MAMP (http://www.mamp.info/en/index.html)

Set up your development environment (cont.)• Windows • WAMP (http://www.wampserver.com/en/) • XAMPP (http://www.apachefriends.org/en/xampp-windows.html)• OS X • MAMP (http://www.mamp.info/en/index.html) • XAMPP (http://www.apachefriends.org/en/xampp-macosx.html)

Set up your development environment (cont.)• Windows • WAMP (http://www.wampserver.com/en/) • XAMPP (http://www.apachefriends.org/en/xampp-windows.html)• OS X • MAMP (http://www.mamp.info/en/index.html) • XAMPP (http://www.apachefriends.org/en/xampp-macosx.html) • NMPP (http://getmnpp.org/)

Set up your developmentenvironment (cont.)

Set up your developmentenvironment (cont.)• Install WordPress

Set up your developmentenvironment (cont.)• Install WordPress• Create a new directory under [WordPress install directory]/ wp-content/plugins

Set up your developmentenvironment (cont.)• Install WordPress• Create a new directory under [WordPress install directory]/ wp-content/plugins • Make sure it matches your slug!

Step 4: Skeleton

Skeleton

Skeleton• Let’s put “pen” to “paper”

Skeleton• Let’s put “pen” to “paper”• A plugin must have at least the following two ﬁles:

Skeleton• Let’s put “pen” to “paper”• A plugin must have at least the following two ﬁles: • readme.txt

Skeleton• Let’s put “pen” to “paper”• A plugin must have at least the following two ﬁles: • readme.txt • [plugin-slug].php

Step 4.1: readme.txt

readme.txt

readme.txt• Full example here: http://wordpress.org/extend/plugins/about/readme.txt

readme.txt• Full example here: http://wordpress.org/extend/plugins/about/readme.txt• The important bits are at the top

readme.txt• Full example here: http://wordpress.org/extend/plugins/about/readme.txt• The important bits are at the top• Uses a modiﬁed Markdown syntax

readme.txt• Full example here: http://wordpress.org/extend/plugins/about/readme.txt• The important bits are at the top• Uses a modiﬁed Markdown syntax• Contains important information about your theme

readme.txt• Full example here: http://wordpress.org/extend/plugins/about/readme.txt• The important bits are at the top• Uses a modiﬁed Markdown syntax• Contains important information about your theme• Explicitly controls how your plugin’s WordPress.org directory page looks

readme.txt (cont.) This... Text

readme.txt (cont.) ...results in this

readme.txt (cont.)• WordPress.org has a handy-dandy readme syntax checker: http://wordpress.org/extend/plugins/about/validator/• Other information displayed • Installation instructions • FAQs • Screenshots • Changelog

Step 4.2: [plugin-slug].php

[plugin-slug].php• Create wp-content/plugins/[plugin-slug]/[plugin-slug].php• Add plugin header information so WordPress knows how to talk about your plugin• Plugin header info deﬁnes how WordPress displays your plugin’s info in the Plugins administration screen

[plugin-slug].php (cont.) This...

[plugin-slug].php ...deﬁnes this

Step 5: Put some meat on those bones

Meat• Let’s talk APIs

Meat• Let’s talk APIs • WordPress core -- http://codex.wordpress.org/Function_Reference

Meat• Let’s talk APIs • WordPress core -- http://codex.wordpress.org/Function_Reference • the_title(), get_posts(), add_meta_box(), etc.

Meat• Let’s talk APIs • WordPress core -- http://codex.wordpress.org/Function_Reference • the_title(), get_posts(), add_meta_box(), etc. • Plugin API -- http://codex.wordpress.org/Plugin_API

Meat (cont.)• Topics for advanced study • Settings API -- http://codex.wordpress.org/Settings_API • Options API -- http://codex.wordpress.org/Options_API • Transients API -- http://codex.wordpress.org/Transients_API • Widgets API -- http://codex.wordpress.org/Widgets_API

Meathooks• From the Codex: “Hooks are provided by WordPress to allow your plugin to hook into the rest of WordPress; that is, to call functions in your plugin at speciﬁc times, and thereby set your plugin in motion.”

Meathooks (cont.)

Meathooks (cont.)• There are two kinds of hooks (again, from the Codex):

Meathooks (cont.)• There are two kinds of hooks (again, from the Codex): • “Actions: Actions are the hooks that the WordPress core launches at speciﬁc points during execution, or when speciﬁc events occur. Your plugin can specify that one or more of its PHP functions are executed at these points, using the Action API.”

Meathooks (cont.)• There are two kinds of hooks (again, from the Codex): • “Actions: Actions are the hooks that the WordPress core launches at specific points during execution, or when specific events occur. Your plugin can specify that one or more of its PHP functions are executed at these points, using the Action API.” • “Filters: Filters are the hooks that WordPress launches to modify text of various types before adding it to the database or sending it to the browser screen. Your plugin can specify that one or more of its PHP functions is executed to modify specific types of text at these times, using the Filter API.”

Demo Time!

Resources• Codex, Codex, Codex http://codex.wordpress.org• StackExchange http://wordpress.stackexchange.com• WordPress.org forums

Useful kickstarts• WordPress Plugin Kickstarter http://wordpress.org/extend/plugins/wordpress-plugin-kickstarter/• WordPress Plugin Scaffold https://github.com/eteubert/WordPress-Plugin-Scaffold• WordPress Plugin Boilerplate https://github.com/tommcfarlin/WordPress-Plugin-Boilerplate• WordPress Plugin Skeleton https://github.com/lpointet/WordPress-Plugin-Skeleton

Thanks for coming out!

http://literalbarrage.org	298
http://192.168.2.113	4
http://localhost	3
http://127.0.0.1	2
http://us-w1.rockmelt.com	1
http://coderwall.com	1
http://feeds.feedburner.com	1

Intro to WordPress Plugins

by zamoose

Accessibility

Categories

Upload Details

Usage Rights

7 Embeds 310

Statistics

Intro to WordPress Plugins Presentation Transcript