wordpress plugin development 201

WordPress Plugin Development 201

Yannick LefebvrePlugin Developer

@ylefebvreylefebvre.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


● 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-content\plugins 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



● 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)



● Full recap from last year's presentation:– http://wordpress.tv/2011/08/16/yannick-lefebvre-

plugin-development-demystified/


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


Suggested Toolbox

Web Server

Windows / Mac / Linux

Subversion Client

● TortoiseSVN (Windows)

● Cornerstone (Mac)

● Versions (Mac)


WordPress

Suggested Toolbox (cont)

Code / Text Editor

Windows

Sublime (Mac)

Integrated Development Environment (IDE)

Windows / Mac / Linux


Programmer's Notepad


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 don't seek these out

● New multi-tab help system allows plugin developers to build elaborate help that is accessible from a plugin's admin pages


Creating Help Tabs


Creating Help Tabs

$options_page = add_options_page('My Google Analytics Configuration', 'My Google Analytics', 'manage_options', 'my-google-analytics', 'ga_config_page' );


How to do it:

Creating Help Tabs

$options_page = add_options_page('My Google Analytics Configuration', 'My Google Analytics', 'manage_options', 'my-google-analytics', 'ga_config_page' );

if ( $options_page )

add_action( 'load-' . $options_page,

'ga_help_tabs' );


How to do it:

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 this plugin.</p>

<?php }


Creating Help Tabs


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



● 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)



● 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)


Example displaying a pop-up dialog using the built-in ThickBox script

add_action( 'wp_enqueue_scripts',

'pud_load_scripts' );

function pud_load_scripts() {

wp_enqueue_script( 'jquery' );

add_thickbox();

}

add_action( 'wp_footer', 'pud_footer_code' );


Example using the built-in ThickBox script

function 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 }


Example using the built-in ThickBox script


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



● 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' ); ?>



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 }


Admin code before 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 }


Admin code after internationalization:


● After making calls to _e and __ throughout your plugin's code, translation file can be created using Poedit



● Translated text domain is loaded using API function on plugin initialization

add_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 user's selected language


● 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


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


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


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● Today's presentation and code samples

available at:– http://yannickcorner.nayanna.biz/wcmtl2012


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: [email protected]

Twitter: @ylefebvre

Blog: ylefebvre.ca

Plugins: profiles.wordpress.org/users/jackdewey

wordpress plugin development 201

Technology