plugins are blueprints - daniel bachhuber · 2016. 7. 21. · credit: chris ware- building stories...
TRANSCRIPT
![Page 1: PLUGINS ARE BLUEPRINTS - Daniel Bachhuber · 2016. 7. 21. · Credit: Chris Ware- Building Stories Decoding the presentation, behavior and structure of WordPress plugins to make them](https://reader036.vdocument.in/reader036/viewer/2022071219/605519f77a250f397e736d42/html5/thumbnails/1.jpg)
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
Saturday, July 23, 2011
![Page 2: PLUGINS ARE BLUEPRINTS - Daniel Bachhuber · 2016. 7. 21. · Credit: Chris Ware- Building Stories Decoding the presentation, behavior and structure of WordPress plugins to make them](https://reader036.vdocument.in/reader036/viewer/2022071219/605519f77a250f397e736d42/html5/thumbnails/2.jpg)
Credit: Chris Ware- Building Stories
Decoding the structure, behavior and presentation of WordPress plugins to make them your own
WordCamp Boston 2011Marc Lavallee, @lavalleeWesley Lindamood, @lindamood
PLUGINS ARE BLUEPRINTS
Saturday, July 23, 2011
![Page 3: PLUGINS ARE BLUEPRINTS - Daniel Bachhuber · 2016. 7. 21. · Credit: Chris Ware- Building Stories Decoding the presentation, behavior and structure of WordPress plugins to make them](https://reader036.vdocument.in/reader036/viewer/2022071219/605519f77a250f397e736d42/html5/thumbnails/3.jpg)
CONFUSION
Saturday, July 23, 2011
![Page 4: PLUGINS ARE BLUEPRINTS - Daniel Bachhuber · 2016. 7. 21. · Credit: Chris Ware- Building Stories Decoding the presentation, behavior and structure of WordPress plugins to make them](https://reader036.vdocument.in/reader036/viewer/2022071219/605519f77a250f397e736d42/html5/thumbnails/4.jpg)
COHERENCE
Credit: David Arpi/Flickr
Saturday, July 23, 2011
![Page 5: PLUGINS ARE BLUEPRINTS - Daniel Bachhuber · 2016. 7. 21. · Credit: Chris Ware- Building Stories Decoding the presentation, behavior and structure of WordPress plugins to make them](https://reader036.vdocument.in/reader036/viewer/2022071219/605519f77a250f397e736d42/html5/thumbnails/5.jpg)
DECODING A PLUGIN
Credit: Bob Baxley
http://bit.ly/pKLC7I
Saturday, July 23, 2011
![Page 6: PLUGINS ARE BLUEPRINTS - Daniel Bachhuber · 2016. 7. 21. · Credit: Chris Ware- Building Stories Decoding the presentation, behavior and structure of WordPress plugins to make them](https://reader036.vdocument.in/reader036/viewer/2022071219/605519f77a250f397e736d42/html5/thumbnails/6.jpg)
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
Saturday, July 23, 2011
![Page 7: PLUGINS ARE BLUEPRINTS - Daniel Bachhuber · 2016. 7. 21. · Credit: Chris Ware- Building Stories Decoding the presentation, behavior and structure of WordPress plugins to make them](https://reader036.vdocument.in/reader036/viewer/2022071219/605519f77a250f397e736d42/html5/thumbnails/7.jpg)
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
Saturday, July 23, 2011
![Page 8: PLUGINS ARE BLUEPRINTS - Daniel Bachhuber · 2016. 7. 21. · Credit: Chris Ware- Building Stories Decoding the presentation, behavior and structure of WordPress plugins to make them](https://reader036.vdocument.in/reader036/viewer/2022071219/605519f77a250f397e736d42/html5/thumbnails/8.jpg)
CUSTOMIZING PLUGINS
Find the best available plugin
Explore through prototyping
Decide to build or patch
Begin development
1
2
3
4
Saturday, July 23, 2011
![Page 9: PLUGINS ARE BLUEPRINTS - Daniel Bachhuber · 2016. 7. 21. · Credit: Chris Ware- Building Stories Decoding the presentation, behavior and structure of WordPress plugins to make them](https://reader036.vdocument.in/reader036/viewer/2022071219/605519f77a250f397e736d42/html5/thumbnails/9.jpg)
AN EDUCATED GUESS
STRUCTURE
PRESENTATION
BEHAVIOR
Saturday, July 23, 2011
![Page 10: PLUGINS ARE BLUEPRINTS - Daniel Bachhuber · 2016. 7. 21. · Credit: Chris Ware- Building Stories Decoding the presentation, behavior and structure of WordPress plugins to make them](https://reader036.vdocument.in/reader036/viewer/2022071219/605519f77a250f397e736d42/html5/thumbnails/10.jpg)
WHEN TO USE A PLUGIN
STRUCTURE
BEHAVIOR
PRESENTATION
AMOUNT OF PLUGIN CUSTOMIZATION LargeSmall
USE
Saturday, July 23, 2011
![Page 11: PLUGINS ARE BLUEPRINTS - Daniel Bachhuber · 2016. 7. 21. · Credit: Chris Ware- Building Stories Decoding the presentation, behavior and structure of WordPress plugins to make them](https://reader036.vdocument.in/reader036/viewer/2022071219/605519f77a250f397e736d42/html5/thumbnails/11.jpg)
WHEN TO PATCH A PLUGIN
STRUCTURE
BEHAVIOR
PRESENTATION
AMOUNT OF PLUGIN CUSTOMIZATION LargeSmall
USE
PATCH
Saturday, July 23, 2011
![Page 12: PLUGINS ARE BLUEPRINTS - Daniel Bachhuber · 2016. 7. 21. · Credit: Chris Ware- Building Stories Decoding the presentation, behavior and structure of WordPress plugins to make them](https://reader036.vdocument.in/reader036/viewer/2022071219/605519f77a250f397e736d42/html5/thumbnails/12.jpg)
WHEN TO BUILD YOUR OWN PLUGIN
AMOUNT OF PLUGIN CUSTOMIZATION LargeSmall
STRUCTURE
BEHAVIOR
PRESENTATION
USE
PATCH
BUILD
Saturday, July 23, 2011
![Page 13: PLUGINS ARE BLUEPRINTS - Daniel Bachhuber · 2016. 7. 21. · Credit: Chris Ware- Building Stories Decoding the presentation, behavior and structure of WordPress plugins to make them](https://reader036.vdocument.in/reader036/viewer/2022071219/605519f77a250f397e736d42/html5/thumbnails/13.jpg)
NAVIS SLIDESHOWSExample One
Saturday, July 23, 2011
![Page 14: PLUGINS ARE BLUEPRINTS - Daniel Bachhuber · 2016. 7. 21. · Credit: Chris Ware- Building Stories Decoding the presentation, behavior and structure of WordPress plugins to make them](https://reader036.vdocument.in/reader036/viewer/2022071219/605519f77a250f397e736d42/html5/thumbnails/14.jpg)
A LIVING PATTERN LIBRARY
I start where the last man left off— Thomas Edison
Credit: Mark Killingsworth
Saturday, July 23, 2011
![Page 15: PLUGINS ARE BLUEPRINTS - Daniel Bachhuber · 2016. 7. 21. · Credit: Chris Ware- Building Stories Decoding the presentation, behavior and structure of WordPress plugins to make them](https://reader036.vdocument.in/reader036/viewer/2022071219/605519f77a250f397e736d42/html5/thumbnails/15.jpg)
OUR STARTING POINT
Slides for WordPress
http://bit.ly/gKHLvt
Saturday, July 23, 2011
![Page 16: PLUGINS ARE BLUEPRINTS - Daniel Bachhuber · 2016. 7. 21. · Credit: Chris Ware- Building Stories Decoding the presentation, behavior and structure of WordPress plugins to make them](https://reader036.vdocument.in/reader036/viewer/2022071219/605519f77a250f397e736d42/html5/thumbnails/16.jpg)
WORDPRESS DEFAULT
Saturday, July 23, 2011
![Page 17: PLUGINS ARE BLUEPRINTS - Daniel Bachhuber · 2016. 7. 21. · Credit: Chris Ware- Building Stories Decoding the presentation, behavior and structure of WordPress plugins to make them](https://reader036.vdocument.in/reader036/viewer/2022071219/605519f77a250f397e736d42/html5/thumbnails/17.jpg)
A PLUGIN JUMPSTART
Saturday, July 23, 2011
![Page 18: PLUGINS ARE BLUEPRINTS - Daniel Bachhuber · 2016. 7. 21. · Credit: Chris Ware- Building Stories Decoding the presentation, behavior and structure of WordPress plugins to make them](https://reader036.vdocument.in/reader036/viewer/2022071219/605519f77a250f397e736d42/html5/thumbnails/18.jpg)
A FUNCTIONAL PROTOTYPE
Saturday, July 23, 2011
![Page 19: PLUGINS ARE BLUEPRINTS - Daniel Bachhuber · 2016. 7. 21. · Credit: Chris Ware- Building Stories Decoding the presentation, behavior and structure of WordPress plugins to make them](https://reader036.vdocument.in/reader036/viewer/2022071219/605519f77a250f397e736d42/html5/thumbnails/19.jpg)
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
Saturday, July 23, 2011
![Page 20: PLUGINS ARE BLUEPRINTS - Daniel Bachhuber · 2016. 7. 21. · Credit: Chris Ware- Building Stories Decoding the presentation, behavior and structure of WordPress plugins to make them](https://reader036.vdocument.in/reader036/viewer/2022071219/605519f77a250f397e736d42/html5/thumbnails/20.jpg)
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
Saturday, July 23, 2011
![Page 21: PLUGINS ARE BLUEPRINTS - Daniel Bachhuber · 2016. 7. 21. · Credit: Chris Ware- Building Stories Decoding the presentation, behavior and structure of WordPress plugins to make them](https://reader036.vdocument.in/reader036/viewer/2022071219/605519f77a250f397e736d42/html5/thumbnails/21.jpg)
add_option('sg_preload', 'false', '','yes'); // boolean, Set true to preload images in an image based slideshow add_option('sg_container', 'slides_container', '', 'yes'); // string, Class name for slides container. Default is "slides_container"add_option('sg_generateNextPrev', 'false', '', 'yes'); // boolean, Auto generate next/prev buttonsadd_option('sg_next', 'next', '', 'yes'); // string, Class name for next buttonadd_option('sg_prev', 'prev', '', 'yes'); // string, Class name for previous buttonadd_option('sg_pagination', 'true', '', 'yes'); // boolean, If you're not using pagination you can set to false, but don't have toadd_option('sg_generatePagination', 'true', '', 'yes'); // boolean, Auto generate paginationadd_option('sg_paginationClass', 'pagination','','yes'); // string, Class name for paginationadd_option('sg_fadeSpeed','350','','yes'); // number, Set the speed of the fading animation in millisecondsadd_option('sg_slideSpeed', '350','','yes'); // number, Set the speed of the sliding animation in millisecondsadd_option('sg_start', '1','','yes'); // number, Set the speed of the sliding animation in millisecondsadd_option('sg_effect', 'slide', '', 'yes'); // string, '[next/prev], [pagination]', e.g. 'slide, fade' or simply 'fade' for bothadd_option('sg_crossfade','false','','yes'); // boolean, Crossfade images in a image based slideshowadd_option('sg_randomize','false','','yes'); // boolean, Set to true to randomize slidesadd_option('sg_play','0','','yes'); // number, Autoplay slideshow, a positive number will set to true and be the time between slide animation in millisecondsadd_option('sg_pause','0','','yes'); // number, Pause slideshow on click of next/prev or pagination. A positive number will set to true and be the time of pause in millisecondsadd_option('sg_hoverPause','false','','yes'); // boolean, Set to true and hovering over slideshow will pause itadd_option('sg_autoHeight','false','','yes'); // boolean, Set to true to auto adjust heightadd_option('sg_autoHeightSpeed','350','','yes'); // number, Set auto height animation time in millisecondsadd_option('sg_bigTarget','false','','yes'); // boolean, Set to true and the whole slide will link to next slide on clickadd_option('sg_animationStart','','','yes'); // Function called at the start of animationadd_option('sg_animationComplete','','','yes'); // Function called at the completion of animationadd_option('sg_thumbsize','thumbnail','','yes'); // Size of thumbs to use for pagers
PLUGIN SEDIMENT
SLIDES FOR WORDPRESSPHP: 39k895 lines 748 sloc
NAVIS SLIDESHOWSPHP: 8k244 lines199 sloc
Saturday, July 23, 2011
![Page 22: PLUGINS ARE BLUEPRINTS - Daniel Bachhuber · 2016. 7. 21. · Credit: Chris Ware- Building Stories Decoding the presentation, behavior and structure of WordPress plugins to make them](https://reader036.vdocument.in/reader036/viewer/2022071219/605519f77a250f397e736d42/html5/thumbnails/22.jpg)
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.
AMOUNT OF PLUGIN CUSTOMIZATION LargeSmall
BUILDUSE PATCH
Saturday, July 23, 2011
![Page 23: PLUGINS ARE BLUEPRINTS - Daniel Bachhuber · 2016. 7. 21. · Credit: Chris Ware- Building Stories Decoding the presentation, behavior and structure of WordPress plugins to make them](https://reader036.vdocument.in/reader036/viewer/2022071219/605519f77a250f397e736d42/html5/thumbnails/23.jpg)
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.
AMOUNT OF PLUGIN CUSTOMIZATION LargeSmall
BUILDUSE PATCH
Saturday, July 23, 2011
![Page 24: PLUGINS ARE BLUEPRINTS - Daniel Bachhuber · 2016. 7. 21. · Credit: Chris Ware- Building Stories Decoding the presentation, behavior and structure of WordPress plugins to make them](https://reader036.vdocument.in/reader036/viewer/2022071219/605519f77a250f397e736d42/html5/thumbnails/24.jpg)
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.
AMOUNT OF PLUGIN CUSTOMIZATION LargeSmall
BUILDUSE PATCH
Saturday, July 23, 2011
![Page 25: PLUGINS ARE BLUEPRINTS - Daniel Bachhuber · 2016. 7. 21. · Credit: Chris Ware- Building Stories Decoding the presentation, behavior and structure of WordPress plugins to make them](https://reader036.vdocument.in/reader036/viewer/2022071219/605519f77a250f397e736d42/html5/thumbnails/25.jpg)
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.
AMOUNT OF PLUGIN CUSTOMIZATION LargeSmall
BUILDUSE PATCH
Saturday, July 23, 2011
![Page 26: PLUGINS ARE BLUEPRINTS - Daniel Bachhuber · 2016. 7. 21. · Credit: Chris Ware- Building Stories Decoding the presentation, behavior and structure of WordPress plugins to make them](https://reader036.vdocument.in/reader036/viewer/2022071219/605519f77a250f397e736d42/html5/thumbnails/26.jpg)
RSS & EMAILExample Two
Saturday, July 23, 2011
![Page 27: PLUGINS ARE BLUEPRINTS - Daniel Bachhuber · 2016. 7. 21. · Credit: Chris Ware- Building Stories Decoding the presentation, behavior and structure of WordPress plugins to make them](https://reader036.vdocument.in/reader036/viewer/2022071219/605519f77a250f397e736d42/html5/thumbnails/27.jpg)
OUR STARTING POINT
FD Feedburner
http://bit.ly/gbx4j2
Saturday, July 23, 2011
![Page 28: PLUGINS ARE BLUEPRINTS - Daniel Bachhuber · 2016. 7. 21. · Credit: Chris Ware- Building Stories Decoding the presentation, behavior and structure of WordPress plugins to make them](https://reader036.vdocument.in/reader036/viewer/2022071219/605519f77a250f397e736d42/html5/thumbnails/28.jpg)
EMAIL SUBSCRIPTION INTERFACE
Saturday, July 23, 2011
![Page 29: PLUGINS ARE BLUEPRINTS - Daniel Bachhuber · 2016. 7. 21. · Credit: Chris Ware- Building Stories Decoding the presentation, behavior and structure of WordPress plugins to make them](https://reader036.vdocument.in/reader036/viewer/2022071219/605519f77a250f397e736d42/html5/thumbnails/29.jpg)
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' ); }?>
Saturday, July 23, 2011
![Page 30: PLUGINS ARE BLUEPRINTS - Daniel Bachhuber · 2016. 7. 21. · Credit: Chris Ware- Building Stories Decoding the presentation, behavior and structure of WordPress plugins to make them](https://reader036.vdocument.in/reader036/viewer/2022071219/605519f77a250f397e736d42/html5/thumbnails/30.jpg)
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;}?>
Saturday, July 23, 2011
![Page 31: PLUGINS ARE BLUEPRINTS - Daniel Bachhuber · 2016. 7. 21. · Credit: Chris Ware- Building Stories Decoding the presentation, behavior and structure of WordPress plugins to make them](https://reader036.vdocument.in/reader036/viewer/2022071219/605519f77a250f397e736d42/html5/thumbnails/31.jpg)
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
AMOUNT OF PLUGIN CUSTOMIZATION LargeSmall
BUILDUSE PATCH
Saturday, July 23, 2011
![Page 32: PLUGINS ARE BLUEPRINTS - Daniel Bachhuber · 2016. 7. 21. · Credit: Chris Ware- Building Stories Decoding the presentation, behavior and structure of WordPress plugins to make them](https://reader036.vdocument.in/reader036/viewer/2022071219/605519f77a250f397e736d42/html5/thumbnails/32.jpg)
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
AMOUNT OF PLUGIN CUSTOMIZATION LargeSmall
BUILDUSE PATCH
Saturday, July 23, 2011
![Page 33: PLUGINS ARE BLUEPRINTS - Daniel Bachhuber · 2016. 7. 21. · Credit: Chris Ware- Building Stories Decoding the presentation, behavior and structure of WordPress plugins to make them](https://reader036.vdocument.in/reader036/viewer/2022071219/605519f77a250f397e736d42/html5/thumbnails/33.jpg)
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
AMOUNT OF PLUGIN CUSTOMIZATION LargeSmall
BUILDUSE PATCH
Saturday, July 23, 2011
![Page 34: PLUGINS ARE BLUEPRINTS - Daniel Bachhuber · 2016. 7. 21. · Credit: Chris Ware- Building Stories Decoding the presentation, behavior and structure of WordPress plugins to make them](https://reader036.vdocument.in/reader036/viewer/2022071219/605519f77a250f397e736d42/html5/thumbnails/34.jpg)
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
AMOUNT OF PLUGIN CUSTOMIZATION LargeSmall
BUILDUSE PATCH
Saturday, July 23, 2011
![Page 35: PLUGINS ARE BLUEPRINTS - Daniel Bachhuber · 2016. 7. 21. · Credit: Chris Ware- Building Stories Decoding the presentation, behavior and structure of WordPress plugins to make them](https://reader036.vdocument.in/reader036/viewer/2022071219/605519f77a250f397e736d42/html5/thumbnails/35.jpg)
JIFFYPOSTSExample Three
Saturday, July 23, 2011
![Page 36: PLUGINS ARE BLUEPRINTS - Daniel Bachhuber · 2016. 7. 21. · Credit: Chris Ware- Building Stories Decoding the presentation, behavior and structure of WordPress plugins to make them](https://reader036.vdocument.in/reader036/viewer/2022071219/605519f77a250f397e736d42/html5/thumbnails/36.jpg)
EMBEDDED CONTENT
Saturday, July 23, 2011
![Page 37: PLUGINS ARE BLUEPRINTS - Daniel Bachhuber · 2016. 7. 21. · Credit: Chris Ware- Building Stories Decoding the presentation, behavior and structure of WordPress plugins to make them](https://reader036.vdocument.in/reader036/viewer/2022071219/605519f77a250f397e736d42/html5/thumbnails/37.jpg)
OUR STARTING POINT
Embed.ly
http://bit.ly/ij3O9C
Saturday, July 23, 2011
![Page 38: PLUGINS ARE BLUEPRINTS - Daniel Bachhuber · 2016. 7. 21. · Credit: Chris Ware- Building Stories Decoding the presentation, behavior and structure of WordPress plugins to make them](https://reader036.vdocument.in/reader036/viewer/2022071219/605519f77a250f397e736d42/html5/thumbnails/38.jpg)
OUR STARTING POINT
Saturday, July 23, 2011
![Page 39: PLUGINS ARE BLUEPRINTS - Daniel Bachhuber · 2016. 7. 21. · Credit: Chris Ware- Building Stories Decoding the presentation, behavior and structure of WordPress plugins to make them](https://reader036.vdocument.in/reader036/viewer/2022071219/605519f77a250f397e736d42/html5/thumbnails/39.jpg)
OUR STARTING POINT
Saturday, July 23, 2011
![Page 40: PLUGINS ARE BLUEPRINTS - Daniel Bachhuber · 2016. 7. 21. · Credit: Chris Ware- Building Stories Decoding the presentation, behavior and structure of WordPress plugins to make them](https://reader036.vdocument.in/reader036/viewer/2022071219/605519f77a250f397e736d42/html5/thumbnails/40.jpg)
WORKFLOW IMPROVEMENTS
Saturday, July 23, 2011
![Page 41: PLUGINS ARE BLUEPRINTS - Daniel Bachhuber · 2016. 7. 21. · Credit: Chris Ware- Building Stories Decoding the presentation, behavior and structure of WordPress plugins to make them](https://reader036.vdocument.in/reader036/viewer/2022071219/605519f77a250f397e736d42/html5/thumbnails/41.jpg)
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; } ?>
Saturday, July 23, 2011
![Page 42: PLUGINS ARE BLUEPRINTS - Daniel Bachhuber · 2016. 7. 21. · Credit: Chris Ware- Building Stories Decoding the presentation, behavior and structure of WordPress plugins to make them](https://reader036.vdocument.in/reader036/viewer/2022071219/605519f77a250f397e736d42/html5/thumbnails/42.jpg)
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' );}?>
Saturday, July 23, 2011
![Page 43: PLUGINS ARE BLUEPRINTS - Daniel Bachhuber · 2016. 7. 21. · Credit: Chris Ware- Building Stories Decoding the presentation, behavior and structure of WordPress plugins to make them](https://reader036.vdocument.in/reader036/viewer/2022071219/605519f77a250f397e736d42/html5/thumbnails/43.jpg)
DESIGN IMPROVEMENTS
Saturday, July 23, 2011
![Page 44: PLUGINS ARE BLUEPRINTS - Daniel Bachhuber · 2016. 7. 21. · Credit: Chris Ware- Building Stories Decoding the presentation, behavior and structure of WordPress plugins to make them](https://reader036.vdocument.in/reader036/viewer/2022071219/605519f77a250f397e736d42/html5/thumbnails/44.jpg)
DESIGN IMPROVEMENTS
Saturday, July 23, 2011
![Page 45: PLUGINS ARE BLUEPRINTS - Daniel Bachhuber · 2016. 7. 21. · Credit: Chris Ware- Building Stories Decoding the presentation, behavior and structure of WordPress plugins to make them](https://reader036.vdocument.in/reader036/viewer/2022071219/605519f77a250f397e736d42/html5/thumbnails/45.jpg)
DESIGN IMPROVEMENTS
VIDEO
LINK
PHOTO
RICHSaturday, July 23, 2011
![Page 46: PLUGINS ARE BLUEPRINTS - Daniel Bachhuber · 2016. 7. 21. · Credit: Chris Ware- Building Stories Decoding the presentation, behavior and structure of WordPress plugins to make them](https://reader036.vdocument.in/reader036/viewer/2022071219/605519f77a250f397e736d42/html5/thumbnails/46.jpg)
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
AMOUNT OF PLUGIN CUSTOMIZATION LargeSmall
BUILDUSE PATCH
Saturday, July 23, 2011
![Page 47: PLUGINS ARE BLUEPRINTS - Daniel Bachhuber · 2016. 7. 21. · Credit: Chris Ware- Building Stories Decoding the presentation, behavior and structure of WordPress plugins to make them](https://reader036.vdocument.in/reader036/viewer/2022071219/605519f77a250f397e736d42/html5/thumbnails/47.jpg)
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
AMOUNT OF PLUGIN CUSTOMIZATION LargeSmall
BUILDUSE PATCH
Saturday, July 23, 2011
![Page 48: PLUGINS ARE BLUEPRINTS - Daniel Bachhuber · 2016. 7. 21. · Credit: Chris Ware- Building Stories Decoding the presentation, behavior and structure of WordPress plugins to make them](https://reader036.vdocument.in/reader036/viewer/2022071219/605519f77a250f397e736d42/html5/thumbnails/48.jpg)
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
AMOUNT OF PLUGIN CUSTOMIZATION LargeSmall
BUILDUSE PATCH
Saturday, July 23, 2011
![Page 49: PLUGINS ARE BLUEPRINTS - Daniel Bachhuber · 2016. 7. 21. · Credit: Chris Ware- Building Stories Decoding the presentation, behavior and structure of WordPress plugins to make them](https://reader036.vdocument.in/reader036/viewer/2022071219/605519f77a250f397e736d42/html5/thumbnails/49.jpg)
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
AMOUNT OF PLUGIN CUSTOMIZATION LargeSmall
BUILDUSE PATCH
Saturday, July 23, 2011
![Page 50: PLUGINS ARE BLUEPRINTS - Daniel Bachhuber · 2016. 7. 21. · Credit: Chris Ware- Building Stories Decoding the presentation, behavior and structure of WordPress plugins to make them](https://reader036.vdocument.in/reader036/viewer/2022071219/605519f77a250f397e736d42/html5/thumbnails/50.jpg)
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
Saturday, July 23, 2011
![Page 51: PLUGINS ARE BLUEPRINTS - Daniel Bachhuber · 2016. 7. 21. · Credit: Chris Ware- Building Stories Decoding the presentation, behavior and structure of WordPress plugins to make them](https://reader036.vdocument.in/reader036/viewer/2022071219/605519f77a250f397e736d42/html5/thumbnails/51.jpg)
QUESTIONS?
credit: iwdrm.tumblr.com
Marc Lavallee @lavallee
Wesley Lindamood @lindamood
Slidesharehttp://
Saturday, July 23, 2011