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

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

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.

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

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

Enquete

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

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

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

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

What is a plugin?

❖ Tool to extend WordPress functionality!

❖ Without changing Core codes!

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

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

What do we need?

a WordPress

Get a clean install of a WordPress.

What do we need?

php, html, css, js

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

php / basics

❖ variables!

✓ $a!

✓ $hubba!

✓ $posts

❖ functions!

function my_func() { do_something(); }

❖ others!

✓ if!

✓ foreach!

✓ array

php / template tags

❖ the_title()!

❖ the_permalink()!

❖ the_date()!

❖ the_content()

❖ wp_title()!

❖ body_class()!

❖ get_post_thumbnail_id()!

❖ wp_nav_menu()

basic

wp-content/plugins/easy-plugin.php

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

This comment is called plugin header.

wp-admin/plugins.php

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

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

wp-admin/plugins.php

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

ตวอยาง Examples

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

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

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

1 ใจเยนๆ

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

1 ใจเยนๆ

2 สภาพ

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

2 สภาพ

3 สบายใจ login

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

plugin.com/wp-login.php

3 สบายใจ login

Plugins have codes like,!!

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

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

Let’s see how 3 plugins work.

I will explain the concept of plugin!and!

we come back to these examples.

Concept of Plugin

We need to know how!WordPress works.

WordPress Process

WordPress Process

WordPress process

WordPress Processrequest: example.com/category/food

User sees the page.

WordPress process

WordPress Processrequest: example.com/category/food

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

connect to DB

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

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

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

WordPress Processrequest: example.com/category/food

User sees the page.

WordPress process

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

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

That’s how WordPress works.

Now, the question is!!

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

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

Hooks

WordPress process

Hooks

WordPress process

Hooks?

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

❖ There are 2 types of hooks.!

✓ Filter Hooks!

✓ Action Hooks

Hooks

Filter Hooks

WordPress process

Action Hooks

Actions!&!

Filters

action

❖ Action is to do something.!

✓ to echo something!

✓ to save something!

✓ to redirect somewhere

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.

How hooks look like

apply_filters( ‘location1’, $value );

do_action( ‘location2’ );

filter hook

action hook

How hooks look like

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

❖ do_action( ‘location_name’ );

case: in Templates

apply_filters( ‘the_content’, $value );

do_action( ‘wp_footer’ );

ex ) example.com/about

filter hook

action hook

case: login screen

apply_filters( ‘login_message’, $value );

do_action( ‘login_footer’ );

ex ) example.com/wp-login.php

filter hook

action hook

case: admin pages

apply_filters( ‘admin_body_class’, $value );

do_action( ‘admin_head’ );

ex ) example.com/wp-admin/

filter hook

action hook

There are many hooks

name1 name2 name3 name5 name6 name7name4

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

in WordPress

How to hook

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

Hooking Filters & Actions

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

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

Hooking Filters & Actions

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

Hooking Filters & Actions

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

Register filter

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

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

Register action

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

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

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

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

Plugin Hook Concept

Large plugins have many functions in them.

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

we go back to example plugins

ใจเยนๆ

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

สภาพ

สภาพ

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

สภาพ

a little advanced

This is also possible.

สบายใจ login

สบายใจ login

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

สบายใจ login

More things you can do with plugins.

add favicon to admin pages

change excerpt “[…]”

Hide admin notice of upgrades

shortcode

Resources

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/

Next meet-up!!

“How to build theme properly”!and!

“How to sell it on WordPress.com”

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