An easy guide to Plugin Development

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 difﬁcult 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_ﬁlter( ‘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_ﬁlters( ‘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_ﬁlter( ‘location’, ‘your_func_name’ );! ❖ add_action( ‘location’, ‘your_func_name’ );

63. Hooking Filters & Actions ❖ add_ﬁlter( ‘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

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>

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?