1.
an easy start guide for
Plugin Development
WordPress Meet-up!
on 2014/05/29!
in Bangkok, Thailand!
by Shinichi Nishikawa

2.
about Me
❖ ผมชื่อชิน (Shinichi Nishikawa)!
❖ อยู่ที่กรุงเทพฯปีครึ่ง
Lived in Bangkok for half a year!
❖ สร้าง themes และ plugin ให้ลูกค้า
Building themes and plugins for customers!
❖ ผมชอบเขียนบล็อก เขียนหนังสือเกี่ยวกับ WordPress และจัด
WordPress Events ที่ญี่ปุ่นด้วย.
I write blogs with WP, I write books of WP, I ran WP events

3.
Challenge
❖ ผมจะสอนวิธีทำpluginอย่างง่าย
I will try to explain how to make plugins as easy as
possible.!
❖ หากคุณมีคำถาม คุณถามได้ทุกเวลา
Don’t hesitate to ask questions any time!!
❖ คุณสามารถดาวน์โหลด presentation และ codesนี้ได้
Presentation and codes online will be uploaded.

4.
Menu
❖ plugin ขั้นพื้นฐาน
Plugin basic!
❖ WordPress ทำงานอย่างไร
How WordPress works!
❖ plugin ทำงานกับ WordPress อย่างไร
How plugins work together with WordPress!
❖ ผมมีตัวอย่างpluginง่ายๆ3แบบ ที่จะทำให้คุณเข้าใจ
You will see 3 example plugins and understand them

5.
After session
❖ คุณสามารถจะทำpluginอย่างง่ายได้
You can make a simple plugin!
❖ คุณจะรู้ว่าpluginทำหน้าที่อะไร
You will know what plugins do!
❖ คุณจะชอบWordPressมากขึ้น
You will be more interested in WordPress core

6.
Enquete
❖ ใครทำWordPress Themeได้บ้าง
Anyone who can make WP Theme?!
❖ ใครทำPluginได้บ้าง
Anyone who can make WP Plugin?!
❖ ใครรู้จักphpบ้าง
Who knows php?

7.
plugin คือ อะไร
What is a plugin?

8.
What is a plugin?
❖ Tool to extend WordPress functionality!
❖ Without changing Core codes!
❖ Over 30,000 plugins at WordPress.org/plugins/

9.
ต้องมีอะไรบ้าง
What do we need?

10.
What do we need?
a WordPress
Get a clean install of a WordPress.

11.
What do we need?
php, html, css, js
Plugins are written in php.!
!
Many plugins have html & css.!
!
Some plugins have Javascript.

12.
php / basics
❖ variables!
✓ $a!
✓ $hubba!
✓ $posts
❖ functions!
function my_func() {
do_something();
}
❖ others!
✓ if!
✓ foreach!
✓ array

13.
php / template tags
❖ the_title()!
❖ the_permalink()!
❖ the_date()!
❖ the_content()
❖ wp_title()!
❖ body_class()!
❖ get_post_thumbnail_id()!
❖ wp_nav_menu()

14.
basic

15.
wp-content/plugins/easy-plugin.php
WPจะรู้ว่านี่เป็นplugin.
WP knows it’s a plugin.
This comment is called plugin
header.

16.
wp-admin/plugins.php
WP shows the plugin “Plugin Name: ” comes here.

17.
More Plugin Header
<?php!
/*!
Plugin Name: Plugin ง่าย มาก!!
Plugin URI: http://nskw-style.com/my-plugin!
Description: plugin แรกของผม!
Version: 0.1!
Author: Shinichi Nishikawa!
Author URI: http://nskw-style.com!
License: GPLv2 or later!
Text Domain: easiest!
*/

18.
wp-admin/plugins.php
WP shows the plugin
Those are required if you
want your plugin to be in
wordpress.org site.

19.
ตัวอย่าง
Examples

20.
ผมทำตัวอย่าง plugin 3 แบบ!
I made 3 plugins for tonight.

21.
คุณจะเข้าใจใน 30 นาที!
!
It may seem difficult but!
you’ll understand in 30 minutes.

22.
1 ใจเย็นๆ
<?php!
/*!
Plugin Name: ใจเย็นๆ!
Description: Tell people to take it easy.!
*/

23.
1 ใจเย็นๆ

24.
2 สุภาพ
<?php!
/*!
Plugin Name: สุภาพ!
Description: This plugin make all content polite.!
*/

25.
2 สุภาพ

26.
3 สบายใจ login
<?php!
/*!
Plugin Name: สบายใจ login!
Description: This plugin make login screen happy.!
*/

27.
plugin.com/wp-login.php

28.
3 สบายใจ login

29.
Plugins have codes like,!
!
add_action( ‘location’, ‘function’ );!
or!
add_filter( ‘location’, ‘function’ );!

30.
Let’s see how 3 plugins work.

31.
I will explain the concept of plugin!
and!
we come back to these examples.

32.
Concept of Plugin

33.
We need to know how!
WordPress works.

34.
WordPress Process

35.
WordPress Process
WordPress process

36.
WordPress Process
request: example.com/category/food
User sees the page.
WordPress process

37.
WordPress Process
request: example.com/category/food
User sees the page.
Get DB info from
wp-config.php
connect to DB

38.
WordPress Process
request: example.com/category/food
User sees the page.
Get DB info from
wp-config.php
connect to DB
load core functions
load plugins
load functions.php

39.
WordPress Process
request: example.com/category/food
User sees the page.
Get DB info from
wp-config.php
connect to DB
load core functions
load plugins
load functions.php
query from URL
get post(s)
data from DB

40.
WordPress Process
request: example.com/category/food
User sees the page.
Get DB info from
wp-config.php
connect to DB
load core functions
load plugins
load functions.php
template file
decided.
(category.php)
query from URL
get post(s)
data from DB
category.php!
header.php
loop
sidebar.php
footer.php

41.
WordPress Process
request: example.com/category/food
User sees the page.
WordPress process

42.
WordPress Process
request: example.com/wp-admin/post-new.php
User sees the page.
WordPress process
WordPress Processes can be …
!
✓ displaying home page
✓ displaying admin page
✓ displaying login page
✓ or any other things WordPress does

43.
WordPress Process
request: example.com/wp-login.php
User sees the page.
WordPress process
WordPress Processes can be …
!
✓ displaying home page
✓ displaying admin page
✓ displaying login page
✓ or any other things WordPress does

44.
That’s how WordPress works.

45.
Now, the question is!
!
“how can plugins work!
with the process of WordPress?”

46.
I need to talk about “Hooks”,!
the Secret Key of WordPress.

47.
Hooks
WordPress process

48.
Hooks
WordPress process

49.
Hooks?
❖ Plugins access to hooks to put extra functions
to WordPress!
❖ There are 2 types of hooks.!
✓ Filter Hooks!
✓ Action Hooks

50.
Hooks
Filter Hooks
WordPress process
Action Hooks

51.
Actions!
&!
Filters

52.
action
❖ Action is to do something.!
✓ to echo something!
✓ to save something!
✓ to redirect somewhere

53.
filter
❖ Filter is to change something!
✓ change original text to your text!
✓ change original html to your html!
✓ change original php values to your values.

54.
How hooks look like
apply_filters( ‘location1’, $value );
do_action( ‘location2’ );
filter hook
action hook

55.
How hooks look like
❖ apply_filters( ‘location_name’, $value );!
❖ do_action( ‘location_name’ );

56.
case: in Templates
apply_filters( ‘the_content’, $value );
do_action( ‘wp_footer’ );
ex ) example.com/about
filter hook
action hook

57.
case: login screen
apply_filters( ‘login_message’, $value );
do_action( ‘login_footer’ );
ex ) example.com/wp-login.php
filter hook
action hook

58.
case: admin pages
apply_filters( ‘admin_body_class’, $value );
do_action( ‘admin_head’ );
ex ) example.com/wp-admin/
filter hook
action hook

59.
There are many hooks
name1 name2 name3 name5 name6 name7name4
there are
1,000+ filter hooks & 500+ action hooks
in WordPress

60.
How to hook

61.
How to register
apply_filters( ‘location1’, $value ); do_action( ‘location2’ );

62.
Hooking Filters & Actions
❖ add_filter( ‘location’, ‘your_func_name’ );!
❖ add_action( ‘location’, ‘your_func_name’ );

63.
Hooking Filters & Actions
❖ add_filter( ‘location’, ‘your_func_name’ );
function your_func_name( $default ) {
// do something
return $new;
}

64.
Hooking Filters & Actions
❖ add_action( ‘location’, ‘your_func_name’ );
function your_func_name(){
// do something
}

65.
Register filter
add_filter( ‘location1’, ‘func1’ );
function func1($value){
// make a filter here
return $value
}
apply_filters( ‘location1’, $value ); do_action( ‘location2’ );

66.
Register action
add_action( ‘location2’, ‘func2’ );
function func2(){
// do something
}
apply_filters( ‘location1’, $value ); do_action( ‘location2’ );

67.
Plugin Hook Concept
add_filter( ‘location1’, ‘func1’ );
function func1($value){
// make a filter here
return $value
}
add_action( ‘location2’, ‘func2’ );
function func2(){
// do something
}
apply_filters( ‘location1’, $value ); do_action( ‘location2’ );

68.
Plugin Hook Concept
Plugin is a set of add_action() & add_filter()
add_filter( ‘location1’, ‘func1’ );
function func1($value){
// make a filter here
return $value
}
add_action( ‘location2’, ‘func2’ );
function func2(){
// do something
}
apply_filters( ‘location1’, $value ); do_action( ‘location2’ );

69.
Plugin Hook Concept
Large plugins have many functions in them.
apply_filters( ‘location1’, $value ); do_action( ‘location2’ );

70.
we go back to example plugins

71.
ใจเย็นๆ

72.
ใจเย็นๆ
request: example.com/category/food
User sees the page.
Get DB info from
wp-config.php
connect to DB
load core functions
load plugins
load functions.php
template file
decided.
(category.php)
query from URL
get post(s)
data from DB
category.php!
header.php
loop
sidebar.php
footer.php
wp_head();
wp_footer();

73.
สุภาพ

74.
สุภาพ

75.
สุภาพ
request: example.com/category/food
User sees the page.
Get DB info from
wp-config.php
connect to DB
load core functions
load plugins
load functions.php
template file
decided.
(category.php)
query from URL
get post(s)
data from DB
category.php!
header.php
loop
sidebar.php
footer.php
apply_filters(
‘the_content’,
$content
);

76.
สุภาพ

77.
a little advanced

78.
This is also possible.

79.
สบายใจ login

80.
สบายใจ login

81.
สบายใจ login
request: example.com/wp-login.php
User sees the page.
check cookies
see ssl
condition
check errors
show logo
& message<html>
</head>
show <form>
do_action(‘login_footer’);
!
in plugin: echo <video>
display login footer
do_action(‘login_head’);
!
in plugin: echo <style>

82.
สบายใจ login

83.
More things you can do with
plugins.

84.
add favicon to admin pages

85.
change excerpt “[…]”

86.
Hide admin notice of upgrades

87.
shortcode

88.
Resources

89.
Resources
❖ Codex!
✓ http://codex.wordpress.org/Writing_a_Plugin!
✓ http://codex.wordpress.org/Plugin_API!
✓ http://codex.wordpress.org/Plugin_Resources!
❖ wordpress.org!
✓ http://developer.wordpress.org/reference/

90.
Next meet-up!
!
“How to build theme properly”!
and!
“How to sell it on WordPress.com”

91.
แนะนำหัวข้อที่น่าสนใจได้นะครับ!
Any suggestions for coming meet-up?