WordPress Plugin Development 201

WordPress Plugin Development 201 Yannick Lefebvre Plugin Developer @ylefebvre ylefebvre.ca profiles.wordpress.org/users/jackdewey/ Presentation available at: yannickcorner.nayanna.biz/wcmtl2012

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

Introduction● Using WordPress since 2004● Released first plugin (Link Library) in 2005● Released 8 Plugins to date on the official repository

Introduction● Published WordPress Plugin Development Cookbook with Packt Publishing in July 2012

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

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

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

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

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

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

Suggested ToolboxWeb Server Subversion Client ● TortoiseSVN (Windows) Windows / Mac / Linux ● Cornerstone (Mac)WordPress ● Versions (Mac) http://clicktotweet.com/rKH_c

Suggested Toolbox (cont)Code / Text Editor Integrated Development Environment (IDE) Windows Windows / Mac / Linux Sublime (Mac) http://clicktotweet.com/rKH_c

Programmers Notepad http://clicktotweet.com/rKH_c

NetBeans IDE

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

Creating Help Tabs http://clicktotweet.com/rKH_c

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

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

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> );}

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

Creating Help Tabs http://clicktotweet.com/rKH_c

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

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

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

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

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

Example using the built-in ThickBox script http://clicktotweet.com/rKH_c

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

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

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

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

Internationalization● After making calls to _e and __ throughout your plugins code, translation file can be created using Poedit http://clicktotweet.com/rKH_c

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

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

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

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

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

And the winners are...

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

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

WordPress Plugin Development 201

by ylefebvre on Aug 15, 2012

Accessibility

Categories

Upload Details

Usage Rights

1 Embed 35

Statistics

WordPress Plugin Development 201 Presentation Transcript