PLUGINS ARE   BLUEPRINTSDecoding the presentation,behavior and structure ofWordPress plugins to makethem your ownWordCamp ...
PLUGINS ARE   BLUEPRINTSDecoding the presentation,behavior and structure ofWordPress plugins to makethem your ownWordCamp ...
CONFUSION
COHERENCE            Credit: David Arpi/Flickr
DECODING A PLUGIN                        http://bit.ly/pKLC7I                    Credit: Bob Baxley
PLUGIN USAGE     USE                  PATCH                                       BUILD • W3 Total Cache • Google Analytic...
PLUGIN USAGE     USE                  PATCH                                       BUILD • W3 Total Cache • Google Analytic...
CUSTOMIZING PLUGINS1   Find the best available plugin2   Explore through prototyping3   Decide to build or patch4   Begin ...
AN EDUCATED GUESS                               PRESENTATION                          BEHAVIOR              STRUCTURE
WHEN TO USE A PLUGIN                                         PRESENTATION                 USE                             ...
WHEN TO PATCH A PLUGIN                                         PRESENTATION                 USE                           ...
WHEN TO BUILD YOUR OWN PLUGIN                                         PRESENTATION                 USE                    ...
Example OneNAVIS SLIDESHOWS
A LIVING PATTERN LIBRARY            Credit: Mark KillingsworthI start wherethe last manleft off— Thomas Edison
OUR STARTING POINT            http://bit.ly/gKHLvt       Slides for WordPress
WORDPRESS DEFAULT
A PLUGIN JUMPSTART
A FUNCTIONAL PROTOTYPE
CONDITIONAL IMAGE LOADING                                                   http://bit.ly/pab-imagesELEMENT BEFORE<div id=...
CONDITIONAL SCRIPT LOADING                          http://bit.ly/pab-scripts<?php$argo_include_slideshow_deps = false;add...
PLUGIN SEDIMENTSLIDES FOR WORDPRESS PHP: 39k 895 lines 748 slocNAVIS SLIDESHOWS PHP: 8k 244 lines 199 sloc
WHAT WE CHANGED    STRUCTURE                                                                            PRESENTATION•   Re...
WHAT WE CHANGED    STRUCTURE                                                                            PRESENTATION•   Re...
WHAT WE CHANGED    STRUCTURE                                                                            PRESENTATION•   Re...
WHAT WE CHANGED    STRUCTURE                                                                            PRESENTATION•   Re...
Example TwoRSS & EMAIL
OUR STARTING POINT               http://bit.ly/gbx4j2                 FD Feedburner
EMAIL SUBSCRIPTION INTERFACE
MENU PLACEMENT<?php// In our themes functions.php fileif ( function_exists( feedburner_config_page ) ) {    add_submenu_pa...
USER AGENT CUSTOMIZATIONS<?php// In FD Feedburner pluginfunction feedburner_redirect() {    global $feed, $withcomments, $...
WHAT WE CHANGED    STRUCTURE                                                                      PRESENTATION•   No chang...
WHAT WE CHANGED    STRUCTURE                                                                      PRESENTATION•   No chang...
WHAT WE CHANGED    STRUCTURE                                                                      PRESENTATION•   No chang...
WHAT WE CHANGED    STRUCTURE                                                                      PRESENTATION•   No chang...
Example ThreeJIFFYPOSTS
EMBEDDED CONTENT
OUR STARTING POINT              http://bit.ly/ij3O9C                     Embed.ly
OUR STARTING POINT
OUR STARTING POINT
WORKFLOW IMPROVEMENTS
WORKFLOW IMPROVEMENTS<?phpadd_action( init, argo_register_jiffypost_type );function argo_register_jiffypost_type() {    re...
WORKFLOW IMPROVEMENTS<?phpadd_meta_box( navisleadin, Lead in text, argo_embed_leadin_box,    jiffypost, normal, high );add...
DESIGN IMPROVEMENTS
DESIGN IMPROVEMENTS
DESIGN IMPROVEMENTS       LINK                      PHOTO       VIDEO           RICH
WHAT WE BUILT    STRUCTURE                                                                                  PRESENTATION• ...
WHAT WE BUILT    STRUCTURE                                                                                  PRESENTATION• ...
WHAT WE BUILT    STRUCTURE                                                                                  PRESENTATION• ...
WHAT WE BUILT    STRUCTURE                                                                                  PRESENTATION• ...
LESSONS LEARNED“I could tell you stories to curl your hair,but it looks like you’ve already heard ‘em.”                   ...
QUESTIONS?             Marc Lavallee             @lavallee             Wesley Lindamood             @lindamood            ...
Upcoming SlideShare
Loading in …5
×

Plugins Are Blueprints

1,691 views
1,636 views

Published on

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

Published in: Technology, Art & Photos

Plugins Are Blueprints

  1. 1. PLUGINS ARE BLUEPRINTSDecoding the presentation,behavior and structure ofWordPress plugins to makethem your ownWordCamp Boston 2011Marc Lavallee, @lavalleeWesley Lindamood, @lindamood Credit: Chris Ware- Building Stories
  2. 2. PLUGINS ARE BLUEPRINTSDecoding the presentation,behavior and structure ofWordPress plugins to makethem your ownWordCamp Boston 2011Marc Lavallee, @lavalleeWesley Lindamood, @lindamood Credit: Chris Ware- Building Stories
  3. 3. CONFUSION
  4. 4. COHERENCE Credit: David Arpi/Flickr
  5. 5. DECODING A PLUGIN http://bit.ly/pKLC7I Credit: Bob Baxley
  6. 6. PLUGIN USAGE USE PATCH BUILD • W3 Total Cache • Google Analyticator • FD Feedburner • Slides for WordPress • Embed.ly • Link Roundup Use Patch Prototype and Draw inspiration Start from as-is customize scratch
  7. 7. PLUGIN USAGE USE PATCH BUILD • W3 Total Cache • Google Analyticator • FD Feedburner • Slides for WordPress • Embed.ly • Link Roundup Use Patch Prototype and Draw inspiration Start from as-is customize scratch
  8. 8. CUSTOMIZING PLUGINS1 Find the best available plugin2 Explore through prototyping3 Decide to build or patch4 Begin development
  9. 9. AN EDUCATED GUESS PRESENTATION BEHAVIOR STRUCTURE
  10. 10. WHEN TO USE A PLUGIN PRESENTATION USE BEHAVIOR STRUCTURE Small AMOUNT OF PLUGIN CUSTOMIZATION Large
  11. 11. WHEN TO PATCH A PLUGIN PRESENTATION USE BEHAVIOR PATCH STRUCTURE Small AMOUNT OF PLUGIN CUSTOMIZATION Large
  12. 12. WHEN TO BUILD YOUR OWN PLUGIN PRESENTATION USE BEHAVIOR PATCH STRUCTURE BUILD Small AMOUNT OF PLUGIN CUSTOMIZATION Large
  13. 13. Example OneNAVIS SLIDESHOWS
  14. 14. A LIVING PATTERN LIBRARY Credit: Mark KillingsworthI start wherethe last manleft off— Thomas Edison
  15. 15. OUR STARTING POINT http://bit.ly/gKHLvt Slides for WordPress
  16. 16. WORDPRESS DEFAULT
  17. 17. A PLUGIN JUMPSTART
  18. 18. A FUNCTIONAL PROTOTYPE
  19. 19. CONDITIONAL IMAGE LOADING http://bit.ly/pab-imagesELEMENT BEFORE<div id="7118-slide3" data-src="http://e.opb.org/files/2011/07/3.jpg*450*600" />ELEMENT AFTER<div id="7118-slide2"><img src="http://e.opb.org/files/2011/07/3.jpg" width="620" height="465" />JAVASCRIPTfunction 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 );    }}
  20. 20. CONDITIONAL SCRIPT LOADING http://bit.ly/pab-scripts<?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 );}?>
  21. 21. PLUGIN SEDIMENTSLIDES FOR WORDPRESS PHP: 39k 895 lines 748 slocNAVIS SLIDESHOWS PHP: 8k 244 lines 199 sloc
  22. 22. WHAT WE CHANGED STRUCTURE PRESENTATION• Remove unneeded options and features BEHAVIOR• Conditionally load slideshow CSS, JS BEHAVIOR• Dynamically load images• Add custom taxonomy for sideshow content type• Add image permalinks STRUCTURE 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. Small AMOUNT OF PLUGIN CUSTOMIZATION Large USE PATCH BUILD
  23. 23. WHAT WE CHANGED STRUCTURE PRESENTATION• Remove unneeded options and features BEHAVIOR• Conditionally load slideshow CSS, JS BEHAVIOR• Dynamically load images• Add custom taxonomy for sideshow content type• Add image permalinks STRUCTURE 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. Small AMOUNT OF PLUGIN CUSTOMIZATION Large USE PATCH BUILD
  24. 24. WHAT WE CHANGED STRUCTURE PRESENTATION• Remove unneeded options and features BEHAVIOR• Conditionally load slideshow CSS, JS BEHAVIOR• Dynamically load images• Add custom taxonomy for sideshow content type• Add image permalinks STRUCTURE 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. Small AMOUNT OF PLUGIN CUSTOMIZATION Large USE PATCH BUILD
  25. 25. WHAT WE CHANGED STRUCTURE PRESENTATION• Remove unneeded options and features BEHAVIOR• Conditionally load slideshow CSS, JS BEHAVIOR• Dynamically load images• Add custom taxonomy for sideshow content type• Add image permalinks STRUCTURE 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. Small AMOUNT OF PLUGIN CUSTOMIZATION Large USE PATCH BUILD
  26. 26. Example TwoRSS & EMAIL
  27. 27. OUR STARTING POINT http://bit.ly/gbx4j2 FD Feedburner
  28. 28. EMAIL SUBSCRIPTION INTERFACE
  29. 29. MENU PLACEMENT<?php// In our themes functions.php fileif ( function_exists( feedburner_config_page ) ) {    add_submenu_page( plugins.php,Feedburner Configuration, FeedburnerConfiguration,        manage_options, argo_feedburner_menu, feedburner_conf );    remove_submenu_page( plugins.php, fdfeedburner.php );}?>
  30. 30. 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;}?>
  31. 31. WHAT WE CHANGED STRUCTURE PRESENTATION• No changes BEHAVIOR• Change user agent list BEHAVIOR• Add an email subscription form into the footer• Create an email subscription widget PRESENTATION STRUCTURE• Widget and footer styling Small AMOUNT OF PLUGIN CUSTOMIZATION Large USE PATCH BUILD
  32. 32. WHAT WE CHANGED STRUCTURE PRESENTATION• No changes BEHAVIOR• Change user agent list BEHAVIOR• Add an email subscription form into the footer• Create an email subscription widget PRESENTATION STRUCTURE• Widget and footer styling Small AMOUNT OF PLUGIN CUSTOMIZATION Large USE PATCH BUILD
  33. 33. WHAT WE CHANGED STRUCTURE PRESENTATION• No changes BEHAVIOR• Change user agent list BEHAVIOR• Add an email subscription form into the footer• Create an email subscription widget PRESENTATION STRUCTURE• Widget and footer styling Small AMOUNT OF PLUGIN CUSTOMIZATION Large USE PATCH BUILD
  34. 34. WHAT WE CHANGED STRUCTURE PRESENTATION• No changes BEHAVIOR• Change user agent list BEHAVIOR• Add an email subscription form into the footer• Create an email subscription widget PRESENTATION STRUCTURE• Widget and footer styling Small AMOUNT OF PLUGIN CUSTOMIZATION Large USE PATCH BUILD
  35. 35. Example ThreeJIFFYPOSTS
  36. 36. EMBEDDED CONTENT
  37. 37. OUR STARTING POINT http://bit.ly/ij3O9C Embed.ly
  38. 38. OUR STARTING POINT
  39. 39. OUR STARTING POINT
  40. 40. WORKFLOW IMPROVEMENTS
  41. 41. WORKFLOW IMPROVEMENTS<?phpadd_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;}?>
  42. 42. WORKFLOW IMPROVEMENTS<?phpadd_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%"><?phpesc_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 );}?>
  43. 43. DESIGN IMPROVEMENTS
  44. 44. DESIGN IMPROVEMENTS
  45. 45. DESIGN IMPROVEMENTS LINK PHOTO VIDEO RICH
  46. 46. WHAT WE BUILT STRUCTURE PRESENTATION• Create a custom post type for embedded content• Keep requests for embedded content on the backend BEHAVIOR BEHAVIOR• Create a customized TinyMCE editor for use with character-limited lead-in text• Preview/edit embedded content in post admin STRUCTURE• Provide proper attribution through source and via fields• Create bookmarklet for adding JiffyPosts off-site PRESENTATION• Provide formatting of all embed.ly content type responses.• Reveal hierarchy of original and embedded content• Introduce visual variety for different post types Small AMOUNT OF PLUGIN CUSTOMIZATION Large• Encourage interaction around embedded content on-site USE PATCH BUILD
  47. 47. WHAT WE BUILT STRUCTURE PRESENTATION• Create a custom post type for embedded content• Keep requests for embedded content on the backend BEHAVIOR BEHAVIOR• Create a customized TinyMCE editor for use with character-limited lead-in text• Preview/edit embedded content in post admin STRUCTURE• Provide proper attribution through source and via fields• Create bookmarklet for adding JiffyPosts off-site PRESENTATION• Provide formatting of all embed.ly content type responses.• Reveal hierarchy of original and embedded content• Introduce visual variety for different post types Small AMOUNT OF PLUGIN CUSTOMIZATION Large• Encourage interaction around embedded content on-site USE PATCH BUILD
  48. 48. WHAT WE BUILT STRUCTURE PRESENTATION• Create a custom post type for embedded content• Keep requests for embedded content on the backend BEHAVIOR BEHAVIOR• Create a customized TinyMCE editor for use with character-limited lead-in text• Preview/edit embedded content in post admin STRUCTURE• Provide proper attribution through source and via fields• Create bookmarklet for adding JiffyPosts off-site PRESENTATION• Provide formatting of all embed.ly content type responses.• Reveal hierarchy of original and embedded content• Introduce visual variety for different post types Small AMOUNT OF PLUGIN CUSTOMIZATION Large• Encourage interaction around embedded content on-site USE PATCH BUILD
  49. 49. WHAT WE BUILT STRUCTURE PRESENTATION• Create a custom post type for embedded content• Keep requests for embedded content on the backend BEHAVIOR BEHAVIOR• Create a customized TinyMCE editor for use with character-limited lead-in text• Preview/edit embedded content in post admin STRUCTURE• Provide proper attribution through source and via fields• Create bookmarklet for adding JiffyPosts off-site PRESENTATION• Provide formatting of all embed.ly content type responses.• Reveal hierarchy of original and embedded content• Introduce visual variety for different post types Small AMOUNT OF PLUGIN CUSTOMIZATION Large• Encourage interaction around embedded content on-site USE PATCH BUILD
  50. 50. 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
  51. 51. QUESTIONS? Marc Lavallee @lavallee Wesley Lindamood @lindamood Slideshare http://slidesha.re/qsJEmY credit: iwdrm.tumblr.com

×