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


● 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



● 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 Subversion Client
● TortoiseSVN
(Windows)

Windows / Mac / Linux
● Cornerstone (Mac)
WordPress

● Versions (Mac)


Suggested Toolbox (cont)

Code / Text Editor Integrated Development
Environment (IDE)

Windows
Windows / Mac / Linux

Sublime (Mac)


Programmer's Notepad


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

How to do it:
$options_page = add_options_page('My Google Analytics
Configuration', 'My Google Analytics', 'manage_options',
'my-google-analytics', 'ga_config_page' );


Creating Help Tabs

How to do it:
$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' );


Creating Help Tabs
function 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 Tabs
function 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 }


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



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



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



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

● 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.ca
Plugins: profiles.wordpress.org/users/jackdewey

WordPress Plugin Development 201

More Related Content

What's hot

Viewers also liked

Similar to WordPress Plugin Development 201

Recently uploaded

WordPress Plugin Development 201