An easy guide to Plugin Development

28,570 views

Published on

This is a slide I used at WordPress Meet-up in Bagnkok. It explains how WordPress and Plugins work together.

Published in: Technology, Business
1 Comment
14 Likes
Statistics
Notes
No Downloads
Views
Total views
28,570
On SlideShare
0
From Embeds
0
Number of Embeds
23,239
Actions
Shares
0
Downloads
379
Comments
1
Likes
14
Embeds 0
No embeds

No notes for slide

An easy guide to Plugin Development

  1. 1. an easy start guide for Plugin Development WordPress Meet-up! on 2014/05/29! in Bangkok, Thailand! by Shinichi Nishikawa
  2. 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. 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. 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. 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. 6. Enquete ❖ ใครทำWordPress Themeได้บ้าง
 Anyone who can make WP Theme?! ❖ ใครทำPluginได้บ้าง
 Anyone who can make WP Plugin?! ❖ ใครรู้จักphpบ้าง
 Who knows php?
  7. 7. plugin คือ อะไร
 What is a plugin?
  8. 8. What is a plugin? ❖ Tool to extend WordPress functionality! ❖ Without changing Core codes! ❖ Over 30,000 plugins at WordPress.org/plugins/
  9. 9. ต้องมีอะไรบ้าง What do we need?
  10. 10. What do we need? a WordPress Get a clean install of a WordPress.
  11. 11. What do we need? php, html, css, js Plugins are written in php.! ! Many plugins have html & css.! ! Some plugins have Javascript.
  12. 12. php / basics ❖ variables! ✓ $a! ✓ $hubba! ✓ $posts ❖ functions! function my_func() {
 do_something();
 } ❖ others! ✓ if! ✓ foreach! ✓ array
  13. 13. php / template tags ❖ the_title()! ❖ the_permalink()! ❖ the_date()! ❖ the_content() ❖ wp_title()! ❖ body_class()! ❖ get_post_thumbnail_id()! ❖ wp_nav_menu()
  14. 14. basic
  15. 15. wp-content/plugins/easy-plugin.php WPจะรู้ว่านี่เป็นplugin. WP knows it’s a plugin. This comment is called plugin header.
  16. 16. wp-admin/plugins.php WP shows the plugin “Plugin Name: ” comes here.
  17. 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. 18. wp-admin/plugins.php WP shows the plugin Those are required if you want your plugin to be in wordpress.org site.
  19. 19. ตัวอย่าง Examples
  20. 20. ผมทำตัวอย่าง plugin 3 แบบ! I made 3 plugins for tonight.
  21. 21. คุณจะเข้าใจใน 30 นาที! ! It may seem difficult but! you’ll understand in 30 minutes.
  22. 22. 1 ใจเย็นๆ <?php! /*! Plugin Name: ใจเย็นๆ! Description: Tell people to take it easy.! */
  23. 23. 1 ใจเย็นๆ
  24. 24. 2 สุภาพ <?php! /*! Plugin Name: สุภาพ! Description: This plugin make all content polite.! */
  25. 25. 2 สุภาพ
  26. 26. 3 สบายใจ login <?php! /*! Plugin Name: สบายใจ login! Description: This plugin make login screen happy.! */
  27. 27. plugin.com/wp-login.php
  28. 28. 3 สบายใจ login
  29. 29. Plugins have codes like,! ! add_action( ‘location’, ‘function’ );! or! add_filter( ‘location’, ‘function’ );!
  30. 30. Let’s see how 3 plugins work.
  31. 31. I will explain the concept of plugin! and! we come back to these examples.
  32. 32. Concept of Plugin
  33. 33. We need to know how! WordPress works.
  34. 34. WordPress Process
  35. 35. WordPress Process WordPress process
  36. 36. WordPress Process request: example.com/category/food User sees the page. WordPress process
  37. 37. WordPress Process request: example.com/category/food User sees the page. Get DB info from wp-config.php connect to DB
  38. 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. 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. 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. 41. WordPress Process request: example.com/category/food User sees the page. WordPress process
  42. 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. 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. 44. That’s how WordPress works.
  45. 45. Now, the question is! ! “how can plugins work! with the process of WordPress?”
  46. 46. I need to talk about “Hooks”,! the Secret Key of WordPress.
  47. 47. Hooks WordPress process
  48. 48. Hooks WordPress process
  49. 49. Hooks? ❖ Plugins access to hooks to put extra functions to WordPress! ❖ There are 2 types of hooks.! ✓ Filter Hooks! ✓ Action Hooks
  50. 50. Hooks Filter Hooks WordPress process Action Hooks
  51. 51. Actions! &! Filters
  52. 52. action ❖ Action is to do something.! ✓ to echo something! ✓ to save something! ✓ to redirect somewhere
  53. 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. 54. How hooks look like apply_filters( ‘location1’, $value ); do_action( ‘location2’ ); filter hook action hook
  55. 55. How hooks look like ❖ apply_filters( ‘location_name’, $value );! ❖ do_action( ‘location_name’ );
  56. 56. case: in Templates apply_filters( ‘the_content’, $value ); do_action( ‘wp_footer’ ); ex ) example.com/about filter hook action hook
  57. 57. case: login screen apply_filters( ‘login_message’, $value ); do_action( ‘login_footer’ ); ex ) example.com/wp-login.php filter hook action hook
  58. 58. case: admin pages apply_filters( ‘admin_body_class’, $value ); do_action( ‘admin_head’ ); ex ) example.com/wp-admin/ filter hook action hook
  59. 59. There are many hooks name1 name2 name3 name5 name6 name7name4 there are 1,000+ filter hooks & 500+ action hooks in WordPress
  60. 60. How to hook
  61. 61. How to register apply_filters( ‘location1’, $value ); do_action( ‘location2’ );
  62. 62. Hooking Filters & Actions ❖ add_filter( ‘location’, ‘your_func_name’ );! ❖ add_action( ‘location’, ‘your_func_name’ );
  63. 63. Hooking Filters & Actions ❖ add_filter( ‘location’, ‘your_func_name’ );
 function your_func_name( $default ) {
 
 // do something
 
 return $new;
 
 }
  64. 64. Hooking Filters & Actions ❖ add_action( ‘location’, ‘your_func_name’ );
 function your_func_name(){
 
 // do something
 
 }
  65. 65. Register filter add_filter( ‘location1’, ‘func1’ ); function func1($value){ // make a filter here return $value } apply_filters( ‘location1’, $value ); do_action( ‘location2’ );
  66. 66. Register action add_action( ‘location2’, ‘func2’ ); function func2(){ // do something } apply_filters( ‘location1’, $value ); do_action( ‘location2’ );
  67. 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. 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. 69. Plugin Hook Concept Large plugins have many functions in them. apply_filters( ‘location1’, $value ); do_action( ‘location2’ );
  70. 70. we go back to example plugins
  71. 71. ใจเย็นๆ
  72. 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. 73. สุภาพ
  74. 74. สุภาพ
  75. 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. 76. สุภาพ
  77. 77. a little advanced
  78. 78. This is also possible.
  79. 79. สบายใจ login
  80. 80. สบายใจ login
  81. 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. 82. สบายใจ login
  83. 83. More things you can do with plugins.
  84. 84. add favicon to admin pages
  85. 85. change excerpt “[…]”
  86. 86. Hide admin notice of upgrades
  87. 87. shortcode
  88. 88. Resources
  89. 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. 90. Next meet-up! ! “How to build theme properly”! and! “How to sell it on WordPress.com”
  91. 91. แนะนำหัวข้อที่น่าสนใจได้นะครับ! Any suggestions for coming meet-up?

×