Transcript
Page 1: An easy guide to Plugin Development

an easy start guide for

Plugin DevelopmentWordPress Meet-up!on 2014/05/29!in Bangkok, Thailand!by Shinichi Nishikawa

Page 2: An easy guide to Plugin Development

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

Page 3: An easy guide to Plugin Development

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.

Page 4: An easy guide to Plugin Development

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

Page 5: An easy guide to Plugin Development

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

Page 6: An easy guide to Plugin Development

Enquete

❖ ใครทำWordPress ThemeไดบางAnyone who can make WP Theme?!

❖ ใครทำPluginไดบางAnyone who can make WP Plugin?!

❖ ใครรจกphpบางWho knows php?

Page 7: An easy guide to Plugin Development

plugin คอ อะไรWhat is a plugin?

Page 8: An easy guide to Plugin Development

What is a plugin?

❖ Tool to extend WordPress functionality!

❖ Without changing Core codes!

❖ Over 30,000 plugins at WordPress.org/plugins/

Page 9: An easy guide to Plugin Development

ตองมอะไรบาง What do we need?

Page 10: An easy guide to Plugin Development

What do we need?

a WordPress

Get a clean install of a WordPress.

Page 11: An easy guide to Plugin Development

What do we need?

php, html, css, js

Plugins are written in php.!!Many plugins have html & css.!!Some plugins have Javascript.

Page 12: An easy guide to Plugin Development

php / basics

❖ variables!

✓ $a!

✓ $hubba!

✓ $posts

❖ functions!

function my_func() { do_something(); }

❖ others!

✓ if!

✓ foreach!

✓ array

Page 13: An easy guide to Plugin Development

php / template tags

❖ the_title()!

❖ the_permalink()!

❖ the_date()!

❖ the_content()

❖ wp_title()!

❖ body_class()!

❖ get_post_thumbnail_id()!

❖ wp_nav_menu()

Page 14: An easy guide to Plugin Development

basic

Page 15: An easy guide to Plugin Development

wp-content/plugins/easy-plugin.php

WPจะรวานเปนplugin. WP knows it’s a plugin.

This comment is called plugin header.

Page 16: An easy guide to Plugin Development
Page 17: An easy guide to Plugin Development

wp-admin/plugins.php

WP shows the plugin “Plugin Name: ” comes here.

Page 18: An easy guide to Plugin Development

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

Page 19: An easy guide to Plugin Development

wp-admin/plugins.php

WP shows the plugin Those are required if you want your plugin to be in wordpress.org site.

Page 20: An easy guide to Plugin Development
Page 21: An easy guide to Plugin Development

ตวอยาง Examples

Page 22: An easy guide to Plugin Development

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

Page 23: An easy guide to Plugin Development

คณจะเขาใจใน 30 นาท!!

It may seem difficult but!you’ll understand in 30 minutes.

Page 24: An easy guide to Plugin Development

1 ใจเยนๆ

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

Page 25: An easy guide to Plugin Development
Page 26: An easy guide to Plugin Development

1 ใจเยนๆ

Page 27: An easy guide to Plugin Development

2 สภาพ

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

Page 28: An easy guide to Plugin Development
Page 29: An easy guide to Plugin Development

2 สภาพ

Page 30: An easy guide to Plugin Development

3 สบายใจ login

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

Page 31: An easy guide to Plugin Development

plugin.com/wp-login.php

Page 32: An easy guide to Plugin Development

3 สบายใจ login

Page 33: An easy guide to Plugin Development

Plugins have codes like,!!

add_action( ‘location’, ‘function’ );!or!

add_filter( ‘location’, ‘function’ );!

Page 34: An easy guide to Plugin Development

Let’s see how 3 plugins work.

Page 35: An easy guide to Plugin Development

I will explain the concept of plugin!and!

we come back to these examples.

Page 36: An easy guide to Plugin Development

Concept of Plugin

Page 37: An easy guide to Plugin Development

We need to know how!WordPress works.

Page 38: An easy guide to Plugin Development

WordPress Process

Page 39: An easy guide to Plugin Development

WordPress Process

WordPress process

Page 40: An easy guide to Plugin Development

WordPress Processrequest: example.com/category/food

User sees the page.

WordPress process

Page 41: An easy guide to Plugin Development

WordPress Processrequest: example.com/category/food

User sees the page.Get DB info from wp-config.php

connect to DB

Page 42: An easy guide to Plugin Development

WordPress Processrequest: 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

Page 43: An easy guide to Plugin Development

WordPress Processrequest: 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

Page 44: An easy guide to Plugin Development

WordPress Processrequest: 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

Page 45: An easy guide to Plugin Development

WordPress Processrequest: example.com/category/food

User sees the page.

WordPress process

Page 46: An easy guide to Plugin Development

WordPress Processrequest: 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

Page 47: An easy guide to Plugin Development

WordPress Processrequest: 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

Page 48: An easy guide to Plugin Development

That’s how WordPress works.

Page 49: An easy guide to Plugin Development

Now, the question is!!

“how can plugins work!with the process of WordPress?”

Page 50: An easy guide to Plugin Development

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

Page 51: An easy guide to Plugin Development

Hooks

WordPress process

Page 52: An easy guide to Plugin Development

Hooks

WordPress process

Page 53: An easy guide to Plugin Development

Hooks?

❖ Plugins access to hooks to put extra functions to WordPress!

❖ There are 2 types of hooks.!

✓ Filter Hooks!

✓ Action Hooks

Page 54: An easy guide to Plugin Development

Hooks

Filter Hooks

WordPress process

Action Hooks

Page 55: An easy guide to Plugin Development

Actions!&!

Filters

Page 56: An easy guide to Plugin Development

action

❖ Action is to do something.!

✓ to echo something!

✓ to save something!

✓ to redirect somewhere

Page 57: An easy guide to Plugin Development

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.

Page 58: An easy guide to Plugin Development

How hooks look like

apply_filters( ‘location1’, $value );

do_action( ‘location2’ );

filter hook

action hook

Page 59: An easy guide to Plugin Development

How hooks look like

❖ apply_filters( ‘location_name’, $value );!

❖ do_action( ‘location_name’ );

Page 60: An easy guide to Plugin Development

case: in Templates

apply_filters( ‘the_content’, $value );

do_action( ‘wp_footer’ );

ex ) example.com/about

filter hook

action hook

Page 61: An easy guide to Plugin Development

case: login screen

apply_filters( ‘login_message’, $value );

do_action( ‘login_footer’ );

ex ) example.com/wp-login.php

filter hook

action hook

Page 62: An easy guide to Plugin Development

case: admin pages

apply_filters( ‘admin_body_class’, $value );

do_action( ‘admin_head’ );

ex ) example.com/wp-admin/

filter hook

action hook

Page 63: An easy guide to Plugin Development

There are many hooks

name1 name2 name3 name5 name6 name7name4

there are 1,000+ filter hooks & 500+ action hooks

in WordPress

Page 64: An easy guide to Plugin Development

How to hook

Page 65: An easy guide to Plugin Development

How to registerapply_filters( ‘location1’, $value ); do_action( ‘location2’ );

Page 66: An easy guide to Plugin Development

Hooking Filters & Actions

❖ add_filter( ‘location’, ‘your_func_name’ );!

❖ add_action( ‘location’, ‘your_func_name’ );

Page 67: An easy guide to Plugin Development

Hooking Filters & Actions

❖ add_filter( ‘location’, ‘your_func_name’ ); function your_func_name( $default ) { // do something return $new; }

Page 68: An easy guide to Plugin Development

Hooking Filters & Actions

❖ add_action( ‘location’, ‘your_func_name’ ); function your_func_name(){ // do something }

Page 69: An easy guide to Plugin Development

Register filter

add_filter( ‘location1’, ‘func1’ ); function func1($value){ // make a filter here return $value }

apply_filters( ‘location1’, $value ); do_action( ‘location2’ );

Page 70: An easy guide to Plugin Development

Register action

add_action( ‘location2’, ‘func2’ ); function func2(){ // do something }

apply_filters( ‘location1’, $value ); do_action( ‘location2’ );

Page 71: An easy guide to Plugin Development

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

Page 72: An easy guide to Plugin Development

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

Page 73: An easy guide to Plugin Development

Plugin Hook Concept

Large plugins have many functions in them.

apply_filters( ‘location1’, $value ); do_action( ‘location2’ );

Page 74: An easy guide to Plugin Development

we go back to example plugins

Page 75: An easy guide to Plugin Development

ใจเยนๆ

Page 76: An easy guide to Plugin Development
Page 77: An easy guide to Plugin Development

ใจเยนๆ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();

Page 78: An easy guide to Plugin Development
Page 79: An easy guide to Plugin Development
Page 80: An easy guide to Plugin Development

สภาพ

Page 81: An easy guide to Plugin Development

สภาพ

Page 82: An easy guide to Plugin Development

สภาพ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 );

Page 83: An easy guide to Plugin Development
Page 84: An easy guide to Plugin Development

สภาพ

Page 85: An easy guide to Plugin Development

a little advanced

Page 86: An easy guide to Plugin Development

This is also possible.

Page 87: An easy guide to Plugin Development

สบายใจ login

Page 88: An easy guide to Plugin Development

สบายใจ login

Page 89: An easy guide to Plugin Development

สบายใจ loginrequest: 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>

Page 90: An easy guide to Plugin Development

สบายใจ login

Page 91: An easy guide to Plugin Development

More things you can do with plugins.

Page 92: An easy guide to Plugin Development

add favicon to admin pages

Page 93: An easy guide to Plugin Development

change excerpt “[…]”

Page 94: An easy guide to Plugin Development

Hide admin notice of upgrades

Page 95: An easy guide to Plugin Development

shortcode

Page 96: An easy guide to Plugin Development

Resources

Page 97: An easy guide to Plugin Development

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/

Page 98: An easy guide to Plugin Development

Next meet-up!!

“How to build theme properly”!and!

“How to sell it on WordPress.com”

Page 99: An easy guide to Plugin Development

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


Top Related