WordPress Plugin Development 201

3,597 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
3,597
On SlideShare
0
From Embeds
0
Number of Embeds
39
Actions
Shares
0
Downloads
31
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

WordPress Plugin Development 201

  1. 1. WordPress Plugin Development 201 Yannick Lefebvre Plugin Developer @ylefebvre ylefebvre.ca profiles.wordpress.org/users/jackdewey/ Presentation available at: yannickcorner.nayanna.biz/wcmtl2012
  2. 2. WordPress Plugin Development 201• Introduction• Recap: Plugins Overview• Setting up a local development environment• Creating help tabs• Loading and using jQuery safely• Internationalization• Enhancing your plugin page on wordpress.org
  3. 3. Introduction● Using WordPress since 2004● Released first plugin (Link Library) in 2005● Released 8 Plugins to date on the official repository
  4. 4. Introduction● Published WordPress Plugin Development Cookbook with Packt Publishing in July 2012
  5. 5. Introduction ● Published WordPress Plugin Development Cookbook with Packt Publishing in July 2012 Contest!● Tweet @ylefebvre with hashtag #wpplugincookbook before 10:45am for a chance to win one of three (3) copies. Or use: http://clicktotweet.com/rKH_c● Get 40% discount on e-book with code wcmontreal12 at http://link.packtpub.com/xyVYFw
  6. 6. Recap: Plugins Overview• Allow developers to extend default WordPress capabilities (on hosted installations, not on .com)• Open plugin architecture present since very first versions• Plugin API constantly refined and expanded• Plugin code size and complexity vary widely from one to another• Functionality stays in place when theme is changed• Can be installed directly from WordPress admin or through a manual upload and activation process http://clicktotweet.com/rKH_c
  7. 7. Recap: Plugins Overview● Made from one or more php code file(s)● Can optionally contain other file types (e.g. images, text files, translation files, etc...)● Located directly in the wp-contentplugins directory or in a sub-directory within the plugins folder● Entry point is a .php file that contains a specific plugin header at its top http://clicktotweet.com/rKH_c
  8. 8. Recap: Plugins Overview● The power of plugins comes from their ability to register custom functions to be called at specific points during the execution of WordPress● This process is called hooking● Two types of hooks – Action hooks allow for code to be executed at a specific point during the page processing loop (registered using the add_action function) – Filter hooks are called during WordPress data processing to allow plugins to modify, increase or reduce data before it is displayed (registered using the add_action function) http://clicktotweet.com/rKH_c
  9. 9. Recap: Plugins Overview● Full recap from last years presentation: – http://wordpress.tv/2011/08/16/yannick-lefebvre- plugin-development-demystified/ http://clicktotweet.com/rKH_c
  10. 10. Setting up a local development environment● Running all tools that are on a web server on your personal computer● There are many benefits to working on a local environment: • No risk of breaking a live installation (WPOD) • No need to constantly upload files to a remote server • Faster page refresh with all requests running locally • More control over web server configuration http://clicktotweet.com/rKH_c
  11. 11. Suggested ToolboxWeb Server Subversion Client ● TortoiseSVN (Windows) Windows / Mac / Linux ● Cornerstone (Mac)WordPress ● Versions (Mac) http://clicktotweet.com/rKH_c
  12. 12. Suggested Toolbox (cont)Code / Text Editor Integrated Development Environment (IDE) Windows Windows / Mac / Linux Sublime (Mac) http://clicktotweet.com/rKH_c
  13. 13. Programmers Notepad http://clicktotweet.com/rKH_c
  14. 14. NetBeans IDE
  15. 15. Creating Help Tabs● All good plugins should provide documentation to their users to facilitate installation● Readme files packed with the plugin or instructions on the official plugin repository are not efficient as users dont seek these out● New multi-tab help system allows plugin developers to build elaborate help that is accessible from a plugins admin pages http://clicktotweet.com/rKH_c
  16. 16. Creating Help Tabs http://clicktotweet.com/rKH_c
  17. 17. Creating Help Tabs http://clicktotweet.com/rKH_c
  18. 18. Creating Help TabsHow to do it:$options_page = add_options_page(My Google AnalyticsConfiguration, My Google Analytics, manage_options,my-google-analytics, ga_config_page ); http://clicktotweet.com/rKH_c
  19. 19. Creating Help TabsHow to do it:$options_page = add_options_page(My Google AnalyticsConfiguration, My Google Analytics, manage_options,my-google-analytics, ga_config_page );if ( $options_page ) add_action( load- . $options_page, ga_help_tabs ); http://clicktotweet.com/rKH_c
  20. 20. Creating Help Tabsfunction ga_help_tabs() { $screen = get_current_screen(); $screen->add_help_tab( array( id => ga-plugin-help-instructions, title => Instructions, callback => ga_plugin_help_instructions ) ); $screen->add_help_tab( array( id => ga-plugin-help-faq, title => FAQ, callback => ga_plugin_help_faq ) ); $screen->set_help_sidebar( <p>This is the sidebar content</p> );}
  21. 21. Creating Help Tabsfunction ga_plugin_help_instructions() { ?> <p>These are instructions explaining how to use this plugin.</p><?php }function ga_plugin_help_faq() { ?> <p>These are the most frequently asked questions on the use of thisplugin.</p><?php } http://clicktotweet.com/rKH_c
  22. 22. Creating Help Tabs http://clicktotweet.com/rKH_c
  23. 23. Loading and using jQuery safely● JavaScript and jQuery can bring great interactivity to web sites● They can also quickly bring a site to a halt when conflicts occur between multiple versions of a script or errors in a single script.● WordPress includes mechanisms to help avoid these conflicts● The following technique applies to plugin AND theme developers alike http://clicktotweet.com/rKH_c
  24. 24. Loading and using jQuery safely● Three action hooks are now provided to register script and style requests: – wp_enqueue_scripts (for regular visitor-facing pages) – admin_enqueue_scripts (for admin panel pages) – login_enqueue_scripts (for login page) http://clicktotweet.com/rKH_c
  25. 25. Loading and using jQuery safely● Upon callback, a single function call takes care of loading the scripts that are provided with WordPress: wp_enqueue_script( jquery );● WordPress will analyze all requests and boil them down to loading a single instance of each script● Many other scripts can be loaded using same technique (Scriptaculous, ThickBox, TinyMCE, etc...)● Third-party scripts can be loaded with same function, with more parameters to indicate script location (see Codex for full list) http://clicktotweet.com/rKH_c
  26. 26. Example displaying a pop-up dialog using thebuilt-in ThickBox scriptadd_action( wp_enqueue_scripts, pud_load_scripts );function pud_load_scripts() { wp_enqueue_script( jquery ); add_thickbox();}add_action( wp_footer, pud_footer_code ); http://clicktotweet.com/rKH_c
  27. 27. Example using the built-in ThickBox scriptfunction pud_footer_code() { ?> <script type="text/javascript"> jQuery( document ).ready(function() { setTimeout( function() { tb_show( Pop-Up Message, <?php echo plugins_url( content.html?width=420&height=220, __FILE__ )?>, null ); }, 2000 ); } ); </script><?php } http://clicktotweet.com/rKH_c
  28. 28. Example using the built-in ThickBox script http://clicktotweet.com/rKH_c
  29. 29. Internationalization● Enables plugins to be translated to any language● Initial setup work needs to be done by plugin developer to make plugin code compatible with mechanism● Any user can create a local plugin translation and use it locally or submit their work for inclusion in future plugin updates http://clicktotweet.com/rKH_c
  30. 30. Internationalization● Key Functions – _e: Looks up translation string for text and echoes result to browser – __: Two underscores. Same as previous but returns a string instead of displaying it directly● Parameters are text in default language and name of text domain<h2><?php _e( Account number, my-google-analytics ); ?> http://clicktotweet.com/rKH_c
  31. 31. InternationalizationAdmin code before internationalization:function my_new_plugin_show_admin() { $options = get_option(NewGA_Options);?><h1>New Google Analytics Plugin</h1><form name="newgaform" method="post" action="">GA User ID:<input type="text" name="gauser" value="<?php echo $options[gauser]; ?>"/><br /><input type="submit" value="Submit" /></form><?php } http://clicktotweet.com/rKH_c
  32. 32. InternationalizationAdmin code after internationalization:function my_new_plugin_show_admin() { $options = get_option( NewGA_Options );?><h1><?php _e( New Google Analytics Plugin, my-google-analytics ); ?></h1><form name="newgaform" method="post" action=""><?php _e( GA User ID, my-google-analytics ); ?>:<input type="text" name="gauser" value="<?php echo $options[gauser]; ?>"/><br /><input type="submit" value="<?php _e( Submit, my-google-analytics ); ?>" /></form><?php } http://clicktotweet.com/rKH_c
  33. 33. Internationalization● After making calls to _e and __ throughout your plugins code, translation file can be created using Poedit http://clicktotweet.com/rKH_c
  34. 34. Internationalization● Translated text domain is loaded using API function on plugin initializationadd_action( init, my_google_analytics_init );function my_google_analytics_init() { load_plugin_textdomain( my-google-analytics, false, dirname( plugin_basename( __FILE__ ) ) . /languages );}● Default text is shown if no translated text domain is found for users selected language
  35. 35. Internationalization● While tempting, avoid using variable or PHP declarations to hold strings to be translated, as that will conflict with the translation lookup mechanism.● Punctuation can be included in the text to be translated since it might change places in different languages.● More advanced functions can also be used for internationalization: – _n (singular vs plural), _x (translate with context), – _ex, _nx http://clicktotweet.com/rKH_c
  36. 36. Enhancing your plugin page on wordpress.org● Since December 2011, plugins submitted to the official repository are able to customize their page with an image http://clicktotweet.com/rKH_c
  37. 37. Enhancing your plugin page on wordpress.org● Since December 2011, plugins submitted to the official repository are able to customize their page with an image http://clicktotweet.com/rKH_c
  38. 38. Enhancing your plugin page on wordpress.org● Banner must be exactly 772 x 250 pixels to fit within the wordpress.org layout● Banner must have name banner-772x250.png● Developer must create a new folder in plugin folder on official repository named assets, next to branches, tags and trunk and upload image to this folder● Image should avoid having too much content in lower-left corner as that space is used to display plugin name http://clicktotweet.com/rKH_c
  39. 39. Recommended Readings● WordPress Plugin Development Cookbook by Yannick Lefebvre, published by Packt Publishing (www.packtpub.com)● WordPress Codex (codex.wordpress.com)● PHP.net● StackOverflow.com Programming Samples● Todays presentation and code samples available at: – http://yannickcorner.nayanna.biz/wcmtl2012 http://clicktotweet.com/rKH_c
  40. 40. And the winners are...
  41. 41. And the winners are...● Thank you for participating!● If you did not win, get a 40% discount on e-book version with code wcmontreal12 when visiting http://link.packtpub.com/xyVYFw
  42. 42. Thank you for attending this talk on Plugin Development. Questions? Presentation: http://yannickcorner.nayanna.biz/wcmtl2012 Contact: ylefebvre@gmail.com Twitter: @ylefebvre Blog: ylefebvre.caPlugins: profiles.wordpress.org/users/jackdewey

×