Chang Woo's WordPress plugin introduction slides

1. WordPress Plugin #1
May 7th, 2015
Changwoo

2. TOC
1.Reference Book
2.Plugin Introduction
3.PHP Syntax: functions, classes
4.Plugin Basics
a. plugin hello world
b. hooks

3. Reference Book
Professional WordPress Plugin Development
Brad Williams, Ozh Richard, Justin Tadlock
ISBN: 978-0-470-91622-3
Paperback
552 pages
March 2011

4. Introducing WP Plugin
Plug-in or add-in:
an software to add
a specific feature to
an existing software.
Everyone knows it.

5. Introducing WP Plugin
The famous “Hello, dolly!”

6. Popular Plugins
Jetpack
Akismet
WordPress SEO by Yoast
WooCommerce
...

7. How to make it?

8. Requirement
1.PHP 5.4+ programming skill
2.Knowledge of MySQL database
server:
a. You should understand WPDB structure
3.HTML, Javascript, CSS:
a. You need to take care of client side

9. PHP Programming
WordPress is a PHP application.
You are required to understand
functions and callbacks at least.

10. Database
Wordpress uses MySQL 5.5+
WPDB structures
Some query syntax:
DELETE INSERT SELECT UPDATE
JOIN GROUP ORDER
LIMIT OFFSET HAVING

11. Client-Side Languages
HTML
CSS
Javascript

12. PHP Programming Concept:
Function & Class

13. Basic: functions
function f(x) = x^2
function g(x) = x+1
INPUT
OUTPUT
FUNCTION

14. Basic: functions
function f(x) = x^2
function g(x) = x+1
function f($x) { return $x * $x; }
function g($x) { return $x + 1; }

15. Basic: functions
function f($x) {
return $x * $x;
}
function g($x) {
return $x + 1;
}

16. Basic: functions
(option) type hinting is available
(not for scalars: int, bool, string, ...)
function foo(array $x) {
...
}
foo(array()); // OK
foo(5); // ERROR
foo(NULL); // ERROR

17. Advanced: class
Functions are not enough.
You will need more advanced
programmaing techniques.
Q. Do you know what is “class”?
Q. Then, what is “object”

18. Object vs Class
● building vs plan
vs

19. Object vs Class
● building vs plan
vs

20. Object vs Class
● building vs plan
vs

21. Class: a service plan
Inside a class:
variables
methods

22. Class: a service plan
class Car {
public $name;
public $max_speed;
public $color;
private $cost;
public function honk() { … }
private function engine_ignite() {
...
}
}

23. Class: a service plan
class Car {
public $name;
public $max_speed;
public $color;
private $cost;
public function honk() { … }
private function engine_ignite() {
...
}
}

24. Class: a service plan
class Car {
public $name;
public $max_speed;
public $color;
private $cost;
public function honk() { … }
private function engine_ignite() {
...
}
}

25. Why class?
● Easily modularized
● Can be extended
o DRY: Don’t Repeat Yourself

26. Class Inheritance
class Truck extends Car {
...
public function dump() {
}
}

27. Class in Modern Programming
Class is important to modern
programming, OOP.
Almost all advanced topics are
closely related to classes.
next, cb func.

28. Callback function
Plugins extend WordPress.
- Plugins do extra tasks for core.
- Core runs plugins.
- So there will be a ‘protocol’.

29. Callback function
Imagine the protocol
- Wordpress core knows every
possible situation.
- But the detail has not been known
exactly

30. Callback function
- So plugins throw “to do list” to
the core.
- Then core runs as the list says.
TO-DO LIST: callback function

31. Callback function
callback func.
caller:
outside of
my program
general func.
caller:
inside of
my program

32. Hello, World! Plugin

33. Environment setting
We all must in the same AP.
Add a line below to /etc/hosts:
<ip> wp-meetup
Check http://wp-meetup/ is valid, and you can login as
guest/guest.
Check ftp://wp-meetup is valid.
You can login as meetup/1.
You an upload your plugin here.

34. Hello, World! Plugin
Create your first plugin!
1. create a plugin directory “hello-world-<your-name>”
2. in the directory, create main file:
hello-world.php
3. Add file header and edit it!
4. Upload your plugin directory to wp-meetup via FTP
5. Access http://wp-meetup, login, and check out your
fresh plugin.

35. Hello Dolly Plugin Example

36. /*
Plugin Name: Hello Dolly
Plugin URI: http://wordpress.org/plugins/hello-dolly/
Description: This is not just a plugin, it symbolizes the hope and
enthusiasm of an entire generation summed up in two words sung most
famously by Louis Armstrong: Hello, Dolly. When activated you will
randomly see a lyric from <cite>Hello, Dolly</cite> in the upper right of
your admin screen on every page.
Author: Matt Mullenweg
Version: 1.6
Author URI: http://ma.tt/
*/

37. There are just 3 function definitions and 2 add_action()
calls:
● hello_dolly_get_lyric(): get any random lyric
● dolly_css(): callback. add style tag
● hello_dolly(): callback of admin_notices.
● add_action( 'admin_notices', 'hello_dolly' );
● add_action( 'admin_head', 'dolly_css' );

38. Hello Dolly’s Actions

39. Action and Callback
WPCore Dolly
add_action(
’admin_notices’,
'hello_dolly'
);

40. Action and Callback
● admin_notices:
○ hello_dolly
○ ...
○ ...
WPCore Dolly
add_action(
’admin_notices’,
'hello_dolly'
);

41. Action and Callback
● admin_notices:
○ hello_dolly
○ …
○ …
WPCore Dolly
add_action(
’admin_head’,
'dolly_css'
);

42. Action and Callback
● admin_notices:
○ hello_dolly
○ …
○ …
● admin_head:
○ dolly_css
○ …
○ ...
WPCore Dolly
add_action(
’admin_head’,
'dolly_css'
);

43. Action and Callback
● admin_notices:
○ hello_dolly
○ …
○ …
● admin_head:
○ dolly_css
○ …
○ ...
WPCore
WPCore Runs…
Createing a page…

44. Action and Callback
● admin_notices:
○ hello_dolly
○ …
○ …
● admin_head:
○ dolly_css
○ …
○ ...
WPCore
Code reaches at
‘admin_notices’
actions in core

45. Action and Callback
● admin_notices:
○ hello_dolly
○ …
○ …
● admin_head:
○ dolly_css
○ …
○ ...
WPCore
Registered callbacks
are fired!

46. Action and Callback
● admin_notices:
○ hello_dolly
○ …
○ …
● admin_head:
○ dolly_css
○ …
○ ...
WPCore
Code reaches at
‘admin_head’
actions in core

47. Action and Callback
● admin_notices:
○ hello_dolly
○ …
○ …
● admin_head:
○ dolly_css
○ …
○ ...
WPCore
Registered
callbacks are fired!

48. Hello Dolly Modification
Add any lyrics you like.
Alter styles.
…

49. Plan Your New Plugin!
Prepare your development
environment.
Plan your new plugin.
Submit your plugin to wordpress.org

50. Fin.

51. Action and Callback
Then where are
admin_notices
and admin_head
actions?

52. action list
codex
function reference
flow chart
action database...