Plugins Are Blueprints
•
5 likes•1,061 views
Decoding the presentation, behavior and structure of WordPress plugins to make them your own
Recommended
Recommended
More Related Content
Similar to Plugins Are Blueprints
Similar to Plugins Are Blueprints (20)
Recently uploaded
Recently uploaded (20)
Plugins Are Blueprints
- 1. PLUGINS ARE BLUEPRINTS Decoding the presentation, behavior and structure of WordPress plugins to make them your own WordCamp Boston 2011 Marc Lavallee, @lavallee Wesley Lindamood, @lindamood Credit: Chris Ware- Building Stories
- 2. PLUGINS ARE BLUEPRINTS Decoding the presentation, behavior and structure of WordPress plugins to make them your own WordCamp Boston 2011 Marc Lavallee, @lavallee Wesley Lindamood, @lindamood Credit: Chris Ware- Building Stories
- 3. CONFUSION
- 4. COHERENCE Credit: David Arpi/Flickr
- 5. DECODING A PLUGIN http://bit.ly/pKLC7I Credit: Bob Baxley
- 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. 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. CUSTOMIZING PLUGINS 1 Find the best available plugin 2 Explore through prototyping 3 Decide to build or patch 4 Begin development
- 9. AN EDUCATED GUESS PRESENTATION BEHAVIOR STRUCTURE
- 10. WHEN TO USE A PLUGIN PRESENTATION USE BEHAVIOR STRUCTURE Small AMOUNT OF PLUGIN CUSTOMIZATION Large
- 11. WHEN TO PATCH A PLUGIN PRESENTATION USE BEHAVIOR PATCH STRUCTURE Small AMOUNT OF PLUGIN CUSTOMIZATION Large
- 12. WHEN TO BUILD YOUR OWN PLUGIN PRESENTATION USE BEHAVIOR PATCH STRUCTURE BUILD Small AMOUNT OF PLUGIN CUSTOMIZATION Large
- 14. A LIVING PATTERN LIBRARY Credit: Mark Killingsworth I start where the last man left off — Thomas Edison
- 15. OUR STARTING POINT http://bit.ly/gKHLvt Slides for WordPress
- 19. CONDITIONAL IMAGE LOADING http://bit.ly/pab-images ELEMENT 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" /> JAVASCRIPT 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 ); } }
- 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. PLUGIN SEDIMENT SLIDES FOR WORDPRESS PHP: 39k 895 lines 748 sloc NAVIS SLIDESHOWS PHP: 8k 244 lines 199 sloc
- 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. 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. 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. 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. Example Two RSS & EMAIL
- 27. OUR STARTING POINT http://bit.ly/gbx4j2 FD Feedburner
- 29. MENU PLACEMENT <?php // In our theme's functions.php file if ( 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' ); } ?>
- 30. USER AGENT CUSTOMIZATIONS <?php // In FD Feedburner plugin function 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 theme add_filter( 'feedburner_skip_useragents', 'argo_allow_yahoo_pipes' ); function argo_allow_yahoo_pipes( $useragents ) { $useragents[] = '/yahoo pipes/i'; return $useragents; } ?>
- 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. 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. 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. 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
- 36. EMBEDDED CONTENT
- 37. OUR STARTING POINT http://bit.ly/ij3O9C Embed.ly
- 41. 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; } ?>
- 42. 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' ); } ?>
- 45. DESIGN IMPROVEMENTS LINK PHOTO VIDEO RICH
- 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. 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. 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. 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. 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. QUESTIONS? Marc Lavallee @lavallee Wesley Lindamood @lindamood Slideshare http://slidesha.re/qsJEmY credit: iwdrm.tumblr.com