DEVELOPING PLUGINS FOR WORDPRESS Lester Chan | http://lesterchan.net

Agenda Introduction Developing Plugin WP API: Filters/Hooks Plugin Path Plugin Details Inserting CSS/Javascript Modifying Content Translating Plugin Text To Other Languages Shortcode API Activating The Plugin

Introduction

Developing Plugin

WP API: Filters/Hooks

Plugin Path

Plugin Details

Inserting CSS/Javascript

Modifying Content

Translating Plugin Text To Other Languages

Shortcode API

Activating The Plugin

Introduction Name Lester Chan Website http://lesterchan.net Experience Developing WordPress Plugins the day WP is born Developed 16 WP plugins to date WP-Polls, WP-PostRatings, WP-PostViews, WP-Print, WP-Email, WP-Useronline, etc

Name

Lester Chan

Website

http://lesterchan.net

Experience

Developing WordPress Plugins the day WP is born

Developed 16 WP plugins to date

WP-Polls, WP-PostRatings, WP-PostViews, WP-Print, WP-Email, WP-Useronline, etc

WP:API Filters/Hooks Filters Filters allows your plugin to modify data that passes through WordPress at specific locations Eg: post title, post date, post content add_filter(‘ location ’, ‘ plugin_function_name ’); Hooks Hooks allows you to execute your plugin function at specific location when WordPress is being executed Eg: Init, header, footer add_action(‘ location ’, ‘ plugin_function_name ’);

Filters

Filters allows your plugin to modify data that passes through WordPress at specific locations

Eg: post title, post date, post content

add_filter(‘ location ’, ‘ plugin_function_name ’);

Hooks

Hooks allows you to execute your plugin function at specific location when WordPress is being executed

Eg: Init, header, footer

add_action(‘ location ’, ‘ plugin_function_name ’);

Plugin Path All WordPress plugins are placed in: /wp-content/plugins/ Example: Name: WP-Demo Nice Name: wp-demo Placing your plugin in: /wp-content/plugins/wp-demo.php /wp-content/plugins/wp-demo/wp-demo.php

All WordPress plugins are placed in:

/wp-content/plugins/

Example:

Name: WP-Demo

Nice Name: wp-demo

Placing your plugin in:

/wp-content/plugins/wp-demo.php

/wp-content/plugins/wp-demo/wp-demo.php

Plugin Path My naming convention style: /wp-content/plugins/wp-demo/ wp-demo.php demo-css.css demo-js.js demo-js-packed.js demo-options.php demo-uninstall.php

My naming convention style:

/wp-content/plugins/wp-demo/

wp-demo.php

demo-css.css

demo-js.js

demo-js-packed.js

demo-options.php

demo-uninstall.php

Plugin Details <?php /* Plugin Name: WP-Demo Plugin URI: http://lesterchan.net/wp-demo/ Description: This is a demo plugin Version: 1.00 Author: Lester Chan Author URI: http://lesterchan.net */ ?>

<?php

/*

Plugin Name: WP-Demo

Plugin URI: http://lesterchan.net/wp-demo/

Description: This is a demo plugin

Version: 1.00

Author: Lester Chan

Author URI: http://lesterchan.net

*/

?>

Inserting CSS/Javascript Inserting CSS: function print_css () { echo '<link rel=&quot;stylesheet&quot; href=&quot;'.get_option('siteurl').'/wp-content/plugins/wp- demo/demo-css.css&quot; type=&quot;text/css&quot; media=&quot;screen&quot; />‘; } Use Hook: wp_head add_action('wp_head', ‘ print_css ');

Inserting CSS:

function print_css () { echo '<link rel=&quot;stylesheet&quot; href=&quot;'.get_option('siteurl').'/wp-content/plugins/wp- demo/demo-css.css&quot; type=&quot;text/css&quot; media=&quot;screen&quot; />‘; }

Use Hook: wp_head

add_action('wp_head', ‘ print_css ');

Inserting CSS/Javascript Inserting Javascript: Use Hook: wp_head Use 2 WP Functions: wp_register_script() wp_print_scripts() wp_register_script(' wp-demo ', '/wp-content/plugins/wp-demo/demo-js-packed.js', false, '1.00'); wp_print_scripts(array(' jquery ', ' wp-demo '));

Inserting Javascript:

Use Hook: wp_head

Use 2 WP Functions:

wp_register_script()

wp_print_scripts()

wp_register_script(' wp-demo ', '/wp-content/plugins/wp-demo/demo-js-packed.js', false, '1.00');

wp_print_scripts(array(' jquery ', ' wp-demo '));

Inserting CSS/Javascript Advantages of using register/print script: Print only once Good practice to compress/obfuscate Javascript Smaller File Size Load Faster http://dean.edwards.name/packer/ WordPress 2.6 wp_register_style() wp_print_styles()

Advantages of using register/print script:

Print only once

Good practice to compress/obfuscate Javascript

Smaller File Size

Load Faster

http://dean.edwards.name/packer/

WordPress 2.6

wp_register_style()

wp_print_styles()

Modifying Content function demo_content ($content) { return ‘Start of post’.$content.’End of post’; } Use Filter: the_content add_filter('the_content', ' demo_content ');

function demo_content ($content) { return ‘Start of post’.$content.’End of post’; }

Use Filter: the_content

add_filter('the_content', ' demo_content ');

Translating Plugin Loading The Translation: function demo_textdomain () { load_plugin_textdomain(' wp-demo ', 'wp- content/plugins/wp-demo'); } Use Hook: init add_action('init', ' demo_textdomain ');

Loading The Translation:

function demo_textdomain () { load_plugin_textdomain(' wp-demo ', 'wp- content/plugins/wp-demo'); }

Use Hook: init

add_action('init', ' demo_textdomain ');

Translating Plugin Printing the text Instead of <?php echo ‘Testing’; ?> Use <?php _e(‘Testing’, ‘ wp-demo ’); ?> Return the text <?php __(‘Testing’, ‘ wp-demo ’); ?>

Printing the text

Instead of

<?php echo ‘Testing’; ?>

Use

<?php _e(‘Testing’, ‘ wp-demo ’); ?>

Return the text

<?php __(‘Testing’, ‘ wp-demo ’); ?>

Translating Plugin Poedit http://www.poedit.net/ Tutorial http://lc.sg/q

Poedit

http://www.poedit.net/

Tutorial

http://lc.sg/q

ShortCode API What is ShortCode API? Shortcode API, a simple set of functions for creating macro codes for use in post content. Example: [demo id=“1”] Is able to retrieve a demo record of ID 1 and embed the results into the post content

What is ShortCode API?

Shortcode API, a simple set of functions for creating macro codes for use in post content.

Example: [demo id=“1”]

Is able to retrieve a demo record of ID 1 and embed the results into the post content

ShortCode API Implementation [ demo id=“1”] add_shortcode(' demo ', ' demo_shortcode '); function demo_shortcode ($atts) { extract(shortcode_atts( array('id' => 0), $atts)); return get_demo_by_id ($id); } Get Demo By ID Function function get_demo_by_id ($id) { // Perform Database Query return '<p>ID:'. $id.'</p>‘; }

Implementation

[ demo id=“1”]

add_shortcode(' demo ', ' demo_shortcode '); function demo_shortcode ($atts) { extract(shortcode_atts( array('id' => 0), $atts)); return get_demo_by_id ($id); }

Get Demo By ID Function

function get_demo_by_id ($id) { // Perform Database Query return '<p>ID:'. $id.'</p>‘; }

Activating The Plugin add_action('activate_ wp-demo/wp-demo.php ', ' create_demo_table '); global $wpdb; $wpdb->demo = $wpdb->prefix.'demo'; function create_demo_table () { global $wpdb; … }

add_action('activate_ wp-demo/wp-demo.php ', ' create_demo_table ');

global $wpdb;

$wpdb->demo = $wpdb->prefix.'demo';

function create_demo_table () { global $wpdb; … }

THANK YOU ANY QUESTIONS