Plugins Are Blueprints

1,784 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

×