plugins are blueprints

Credit: Chris Ware- Building Stories

Decoding the presentation, behavior and structure of WordPress plugins to make them your own

WordCamp Boston 2011Marc Lavallee, @lavalleeWesley Lindamood, @lindamood

PLUGINS ARE BLUEPRINTS

http://drawn.ca/archive/chris-ware-ends-his-run-at-the-new-york-times/


Credit: Chris Ware- Building Stories

WordCamp Boston 2011Marc Lavallee, @lavalleeWesley Lindamood, @lindamood

PLUGINS ARE BLUEPRINTS

Decoding the presentation, behavior and structure of WordPress plugins to make them your own



CONFUSION

COHERENCE

Credit: David Arpi/Flickr

DECODING A PLUGIN

Credit: Bob Baxley

http://bit.ly/pKLC7I

http://www.baxleydesign.com/index.html

http://www.baxleydesign.com/index.html

PLUGIN USAGE

Useas-is

Start from scratch

Patch Prototype and customize

Draw inspiration

• W3 Total Cache

• Google Analyticator • FD Feedburner • Slides for WordPress • Embed.ly

BUILDPATCHUSE

• Link Roundup

CUSTOMIZING PLUGINS

Find the best available plugin

Explore through prototyping

Decide to build or patch

Begin development

1

2

3

4

AN EDUCATED GUESS

STRUCTURE

PRESENTATION

BEHAVIOR

WHEN TO USE A PLUGIN

STRUCTURE

BEHAVIOR

PRESENTATION

AMOUNT OF PLUGIN CUSTOMIZATION LargeSmall

USE

WHEN TO PATCH A PLUGIN

STRUCTURE

BEHAVIOR

PRESENTATION


USE

PATCH

WHEN TO BUILD YOUR OWN PLUGIN


STRUCTURE

BEHAVIOR

PRESENTATION

USE

PATCH

BUILD

NAVIS SLIDESHOWSExample One

A LIVING PATTERN LIBRARY

I start where the last man left off— Thomas Edison

Credit: Mark Killingsworth

http://www.zazzle.com/thomas_edison_tshirt-235718667595212147

http://www.zazzle.com/thomas_edison_tshirt-235718667595212147

OUR STARTING POINT

Slides for WordPress

http://bit.ly/gKHLvt

WORDPRESS DEFAULT

A PLUGIN JUMPSTART

A FUNCTIONAL PROTOTYPE

CONDITIONAL IMAGE LOADING

<div id="7118-slide3" data-src="http://e.opb.org/files/2011/07/3.jpg*450*600" />

ELEMENT BEFORE

function ensureImageIsLoaded( postID, slideNum ) { var slideDiv = jQuery( "#" + getSlideElement( postID, slideNum ) );

// Do nothing if the slide image already exists if ( slideDiv.has( "img" ).length ) return;

var imgData = slideDiv.attr( "data-src" ); if ( imgData ) { var parts = imgData.split( "*" ); var img = jQuery( "<img/>" ) .attr( "src", parts[0] ) .attr( "width", parts[1] ) .attr( "height", parts[2] ); slideDiv.prepend( img ); }}

ELEMENT AFTER<div id="7118-slide2"><img src="http://e.opb.org/files/2011/07/3.jpg" width="620" height="465" />

JAVASCRIPT

http://bit.ly/pab-images

CONDITIONAL SCRIPT LOADING<?php$argo_include_slideshow_deps = false;add_filter( 'post_gallery', 'argo_handle_slideshow', 10, 2 );add_filter( 'wp_footer', 'argo_add_slideshow_deps' );

function argo_handle_slideshow( $output, $attr ) { global $argo_include_slideshow_deps; $argo_include_slideshow_deps = true; return do_other_slideshow_things( $output, $attr );}

function argo_add_slideshow_deps() { global $argo_include_slideshow_deps; if ( ! $argo_include_slideshow_deps ) { return; }

// jQuery slides plugin from http://slidesjs.com/ $slides_src = plugins_url( 'js/slides.min.jquery.js', __FILE__ ); wp_register_script( 'jquery-slides', $slides_src, array( 'jquery' ), '1.1.7', true ); wp_print_scripts( 'jquery-slides' );} ?>

http://bit.ly/pab-scripts

PLUGIN SEDIMENT

SLIDES FOR WORDPRESSPHP: 39k895 lines 748 sloc

NAVIS SLIDESHOWSPHP: 8k244 lines199 sloc

WHAT WE CHANGED

STRUCTURE

BEHAVIOR

STRUCTURE

BEHAVIOR

PRESENTATION

• Conditionally load slideshow CSS, JS

• Dynamically load images

• Add custom taxonomy for sideshow content type

• Add image permalinks

• Remove unneeded options and features

PRESENTATION

• Add credit and caption

• Adjust placement of UI controls, the width of images and look and feel of the slideshow to conform to Argo standards.


BUILDUSE PATCH

RSS & EMAILExample Two

OUR STARTING POINT

FD Feedburner

http://bit.ly/gbx4j2

EMAIL SUBSCRIPTION INTERFACE

MENU PLACEMENT

<?php// In our theme's functions.php fileif ( function_exists( 'feedburner_config_page' ) ) { add_submenu_page( 'plugins.php','Feedburner Configuration', 'Feedburner Configuration', 'manage_options', 'argo_feedburner_menu', 'feedburner_conf' ); remove_submenu_page( 'plugins.php', 'fdfeedburner.php' ); }?>

USER AGENT CUSTOMIZATIONS<?php// In FD Feedburner pluginfunction feedburner_redirect() { global $feed, $withcomments, $wp, $wpdb, $wp_version, $wp_db_version;

do_a_bunch_of_stuff();

// Do nothing if not a feed if (!is_feed()) return;

$skip_useragents = array( '/feedburner/i', '/googlebot/i' ); $skip_useragents = apply_filters( 'feedburner_skip_useragents', $skip_useragents ); foreach ( $skip_useragents as $ua ) { if ( preg_match( $ua, $_SERVER[ 'HTTP_USER_AGENT' ] ) ) return; }

do_more_stuff();}?><?php// In our themeadd_filter( 'feedburner_skip_useragents', 'argo_allow_yahoo_pipes' );

function argo_allow_yahoo_pipes( $useragents ) { $useragents[] = '/yahoo pipes/i'; return $useragents;}?>

WHAT WE CHANGED

STRUCTURE

BEHAVIOR

• Change user agent list

• Add an email subscription form into the footer

• Create an email subscription widget

• No changes

PRESENTATION

• Widget and footer styling

STRUCTURE

BEHAVIOR

PRESENTATION


BUILDUSE PATCH

JIFFYPOSTSExample Three

EMBEDDED CONTENT

OUR STARTING POINT

Embed.ly

http://bit.ly/ij3O9C

OUR STARTING POINT

WORKFLOW IMPROVEMENTS

WORKFLOW IMPROVEMENTS<?php add_action( 'init', 'argo_register_jiffypost_type' ); function argo_register_jiffypost_type() { register_post_type( 'jiffypost', array( 'labels' => array( 'name' => 'Jiffy Posts', 'singular_name' => 'Jiffy Post', ), 'description' => 'Jiffy Posts', 'supports' => array( 'title', 'comments', 'author' ), # no editor! 'public' => true, 'menu_position' => 6, 'taxonomies' => array(), ) ); } add_filter( 'wp_insert_post_data', 'argo_insert_post_content' ); function argo_insert_post_content( $data ) { if ( 'jiffypost' != $data[ 'post_type' ] ) return $data; $content = ''; if ( isset( $_POST[ 'leadintext' ] ) ) { $content = '<p>' . $_POST[ 'leadintext' ] . '</p>'; } if ( isset( $_POST[ 'embedlyarea' ] ) ) { $content .= $_POST[ 'embedlyarea' ]; } $data[ 'post_content' ] = $content; return $data; } ?>

WORKFLOW IMPROVEMENTS<?php add_meta_box( 'navisleadin', 'Lead in text', 'argo_embed_leadin_box', 'jiffypost', 'normal', 'high' );add_filter( 'teeny_mce_buttons', 'argo_modify_teeny_mce_buttons' ) );

function argo_embed_leadin_box( $post ) { $leadintext = get_post_meta( $post->ID, '_leadintext', true );

wp_tiny_mce( true, array( 'editor_selector' => 'leadintext', 'setup' => 'tinyMCESetup', ) );?> <p align="right"> <a id="edButtonHTML" class="">HTML</a> <a id="edButtonPreview" class="active">Visual</a> </p> <textarea id="leadintext" class="leadintext" name="leadintext" style="width: 98%"><?php esc_textarea( $leadintext ); ?></textarea><?php}

function argo_modify_teeny_mce_buttons( $buttons ) { if ( 'jiffypost' != get_post_type() ) return $buttons;

return array( 'bold', 'italic', 'underline', 'strikethrough', 'link', 'unlink' );}?>

DESIGN IMPROVEMENTS

DESIGN IMPROVEMENTS

VIDEO

LINK

PHOTO

RICH

WHAT WE BUILT

STRUCTURE

BEHAVIOR

• Create a customized TinyMCE editor for use withcharacter-limited lead-in text

• Preview/edit embedded content in post admin

• Provide proper attribution through source and via fields

• Create bookmarklet for adding JiffyPosts off-site

• Create a custom post type for embedded content

• Keep requests for embedded content on the backend

PRESENTATION

• Provide formatting of all embed.ly content type responses.

• Reveal hierarchy of original and embedded content

• Introduce visual variety for different post types

• Encourage interaction around embedded content on-site

STRUCTURE

BEHAVIOR

PRESENTATION


BUILDUSE PATCH

LESSONS LEARNED

“I could tell you stories to curl your hair, but it looks like you’ve already heard ‘em.”

— Barton Fink (1991)

credit: iwdrm.tumblr.com

http://www.imdb.com/title/tt0101410/

http://www.imdb.com/title/tt0101410/

http://iwdrm.tumblr.com/


QUESTIONS?

credit: iwdrm.tumblr.com

Marc Lavallee @lavallee

Wesley Lindamood @lindamood

Slidesharehttp://slidesha.re/qsJEmY



plugins are blueprints

Technology