Advertisement
An easy guide to Plugin Development
May. 29, 2014•0 likes•50,243 views
17 likes
Be the first to like this
Show More
views
Total views
0
On Slideshare
0
From embeds
0
Number of embeds
0
Download to read offline
Report
Technology
Business
This is a slide I used at WordPress Meet-up in Bagnkok. It explains how WordPress and Plugins work together.
Shinichi NishikawaFollow
Director of Client Services at Human MadeAdvertisement
Advertisement
Advertisement
An easy guide to Plugin Development
- an easy start guide for Plugin Development WordPress 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 Process request: example.com/category/food User sees the page. WordPress process
- WordPress Process request: example.com/category/food User sees the page. Get DB info from wp-config.php connect to DB
- 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
- 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
- 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
- WordPress Process request: example.com/category/food User sees the page. WordPress process
- 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
- 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
- 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 register apply_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
- สบายใจ 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>
- สบายใจ 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?
Advertisement