Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Developing Plugins For WordPress

3,156 views

Published on

My presentation on Developing Plugins for WordPress during Singapore PHP User Group Meetup in June 2008

Published in: Software, Art & Photos
  • Be the first to comment

Developing Plugins For WordPress

  1. 1. DEVELOPING PLUGINS FOR WORDPRESS Lester Chan | http://lesterchan.net
  2. 2. Agenda <ul><li>Introduction </li></ul><ul><li>Developing Plugin </li></ul><ul><ul><li>WP API: Filters/Hooks </li></ul></ul><ul><ul><li>Plugin Path </li></ul></ul><ul><ul><li>Plugin Details </li></ul></ul><ul><ul><li>Inserting CSS/Javascript </li></ul></ul><ul><ul><li>Modifying Content </li></ul></ul><ul><ul><li>Translating Plugin Text To Other Languages </li></ul></ul><ul><ul><li>Shortcode API </li></ul></ul><ul><ul><li>Activating The Plugin </li></ul></ul>
  3. 3. Introduction <ul><li>Name </li></ul><ul><ul><li>Lester Chan </li></ul></ul><ul><li>Website </li></ul><ul><ul><li>http://lesterchan.net </li></ul></ul><ul><li>Experience </li></ul><ul><ul><li>Developing WordPress Plugins the day WP is born </li></ul></ul><ul><ul><li>Developed 16 WP plugins to date </li></ul></ul><ul><ul><ul><li>WP-Polls, WP-PostRatings, WP-PostViews, WP-Print, WP-Email, WP-Useronline, etc </li></ul></ul></ul>
  4. 4. WP:API Filters/Hooks <ul><li>Filters </li></ul><ul><ul><li>Filters allows your plugin to modify data that passes through WordPress at specific locations </li></ul></ul><ul><ul><ul><li>Eg: post title, post date, post content </li></ul></ul></ul><ul><ul><ul><li>add_filter(‘ location ’, ‘ plugin_function_name ’); </li></ul></ul></ul><ul><li>Hooks </li></ul><ul><ul><li>Hooks allows you to execute your plugin function at specific location when WordPress is being executed </li></ul></ul><ul><ul><ul><li>Eg: Init, header, footer </li></ul></ul></ul><ul><ul><ul><li>add_action(‘ location ’, ‘ plugin_function_name ’); </li></ul></ul></ul>
  5. 5. Plugin Path <ul><li>All WordPress plugins are placed in: </li></ul><ul><ul><li>/wp-content/plugins/ </li></ul></ul><ul><li>Example: </li></ul><ul><ul><li>Name: WP-Demo </li></ul></ul><ul><ul><li>Nice Name: wp-demo </li></ul></ul><ul><li>Placing your plugin in: </li></ul><ul><ul><li>/wp-content/plugins/wp-demo.php </li></ul></ul><ul><ul><li>/wp-content/plugins/wp-demo/wp-demo.php </li></ul></ul>
  6. 6. Plugin Path <ul><li>My naming convention style: </li></ul><ul><ul><li>/wp-content/plugins/wp-demo/ </li></ul></ul><ul><ul><ul><li>wp-demo.php </li></ul></ul></ul><ul><ul><ul><li>demo-css.css </li></ul></ul></ul><ul><ul><ul><li>demo-js.js </li></ul></ul></ul><ul><ul><ul><li>demo-js-packed.js </li></ul></ul></ul><ul><ul><ul><li>demo-options.php </li></ul></ul></ul><ul><ul><ul><li>demo-uninstall.php </li></ul></ul></ul>
  7. 7. Plugin Details <ul><li><?php </li></ul><ul><li>/* </li></ul><ul><li>Plugin Name: WP-Demo </li></ul><ul><li>Plugin URI: http://lesterchan.net/wp-demo/ </li></ul><ul><li>Description: This is a demo plugin </li></ul><ul><li>Version: 1.00 </li></ul><ul><li>Author: Lester Chan </li></ul><ul><li>Author URI: http://lesterchan.net </li></ul><ul><li>*/ </li></ul><ul><li>?> </li></ul>
  8. 8. Inserting CSS/Javascript <ul><li>Inserting CSS: </li></ul><ul><ul><li>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; />‘; } </li></ul></ul><ul><ul><li>Use Hook: wp_head </li></ul></ul><ul><ul><ul><li>add_action('wp_head', ‘ print_css '); </li></ul></ul></ul>
  9. 9. Inserting CSS/Javascript <ul><li>Inserting Javascript: </li></ul><ul><ul><li>Use Hook: wp_head </li></ul></ul><ul><ul><li>Use 2 WP Functions: </li></ul></ul><ul><ul><ul><li>wp_register_script() </li></ul></ul></ul><ul><ul><ul><li>wp_print_scripts() </li></ul></ul></ul><ul><li>wp_register_script(' wp-demo ', '/wp-content/plugins/wp-demo/demo-js-packed.js', false, '1.00'); </li></ul><ul><li>wp_print_scripts(array(' jquery ', ' wp-demo ')); </li></ul>
  10. 10. Inserting CSS/Javascript <ul><li>Advantages of using register/print script: </li></ul><ul><ul><li>Print only once </li></ul></ul><ul><li>Good practice to compress/obfuscate Javascript </li></ul><ul><ul><li>Smaller File Size </li></ul></ul><ul><ul><li>Load Faster </li></ul></ul><ul><ul><li>http://dean.edwards.name/packer/ </li></ul></ul><ul><li>WordPress 2.6 </li></ul><ul><ul><li>wp_register_style() </li></ul></ul><ul><ul><li>wp_print_styles() </li></ul></ul>
  11. 11. Modifying Content <ul><li>function demo_content ($content) { return ‘Start of post’.$content.’End of post’; } </li></ul><ul><li>Use Filter: the_content </li></ul><ul><ul><li>add_filter('the_content', ' demo_content '); </li></ul></ul>
  12. 12. Translating Plugin <ul><li>Loading The Translation: </li></ul><ul><ul><li>function demo_textdomain () { load_plugin_textdomain(' wp-demo ', 'wp- content/plugins/wp-demo'); } </li></ul></ul><ul><ul><li>Use Hook: init </li></ul></ul><ul><ul><ul><li>add_action('init', ' demo_textdomain '); </li></ul></ul></ul>
  13. 13. Translating Plugin <ul><li>Printing the text </li></ul><ul><ul><li>Instead of </li></ul></ul><ul><ul><ul><li><?php echo ‘Testing’; ?> </li></ul></ul></ul><ul><ul><li>Use </li></ul></ul><ul><ul><ul><li><?php _e(‘Testing’, ‘ wp-demo ’); ?> </li></ul></ul></ul><ul><li>Return the text </li></ul><ul><ul><li><?php __(‘Testing’, ‘ wp-demo ’); ?> </li></ul></ul>
  14. 14. Translating Plugin <ul><li>Poedit </li></ul><ul><ul><li>http://www.poedit.net/ </li></ul></ul><ul><li>Tutorial </li></ul><ul><ul><li>http://lc.sg/q </li></ul></ul>
  15. 15. ShortCode API <ul><li>What is ShortCode API? </li></ul><ul><ul><li>Shortcode API, a simple set of functions for creating macro codes for use in post content. </li></ul></ul><ul><ul><li>Example: [demo id=“1”] </li></ul></ul><ul><ul><ul><li>Is able to retrieve a demo record of ID 1 and embed the results into the post content </li></ul></ul></ul>
  16. 16. ShortCode API <ul><li>Implementation </li></ul><ul><ul><li>[ demo id=“1”] </li></ul></ul><ul><ul><li>add_shortcode(' demo ', ' demo_shortcode '); function demo_shortcode ($atts) { extract(shortcode_atts( array('id' => 0), $atts)); return get_demo_by_id ($id); } </li></ul></ul><ul><li>Get Demo By ID Function </li></ul><ul><ul><li>function get_demo_by_id ($id) { // Perform Database Query return '<p>ID:'. $id.'</p>‘; } </li></ul></ul>
  17. 17. Activating The Plugin <ul><li>add_action('activate_ wp-demo/wp-demo.php ', ' create_demo_table '); </li></ul><ul><li>global $wpdb; </li></ul><ul><li>$wpdb->demo = $wpdb->prefix.'demo'; </li></ul><ul><li>function create_demo_table () { global $wpdb; … } </li></ul>
  18. 18. THANK YOU ANY QUESTIONS

×