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

Saturday, July 23, 2011

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

CONFUSION

COHERENCE

Credit: David Arpi/Flickr

DECODING A PLUGIN

Credit: Bob Baxley

http://bit.ly/pKLC7I

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

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

AN EDUCATED GUESS

STRUCTURE

PRESENTATION

BEHAVIOR

WHEN TO USE A PLUGIN

STRUCTURE

BEHAVIOR

PRESENTATION

AMOUNT OF PLUGIN CUSTOMIZATION LargeSmall

WHEN TO PATCH A PLUGIN

STRUCTURE

BEHAVIOR

PRESENTATION

WHEN TO BUILD YOUR OWN PLUGIN

STRUCTURE

BEHAVIOR

PRESENTATION

NAVIS SLIDESHOWSExample One

A LIVING PATTERN LIBRARY

I start where the last man left off— Thomas Edison

Credit: Mark Killingsworth

OUR STARTING POINT

Slides for WordPress

http://bit.ly/gKHLvt

WORDPRESS DEFAULT

A PLUGIN JUMPSTART

A FUNCTIONAL PROTOTYPE

CONDITIONAL IMAGE LOADING

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

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

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

WHAT WE CHANGED

STRUCTURE

BEHAVIOR

STRUCTURE

BEHAVIOR

PRESENTATION

BUILDUSE PATCH

WHAT WE CHANGED

STRUCTURE

BEHAVIOR

STRUCTURE

BEHAVIOR

PRESENTATION

BUILDUSE PATCH

WHAT WE CHANGED

STRUCTURE

BEHAVIOR

STRUCTURE

BEHAVIOR

PRESENTATION

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

WHAT WE CHANGED

STRUCTURE

BEHAVIOR

• No changes

PRESENTATION

STRUCTURE

BEHAVIOR

PRESENTATION

BUILDUSE PATCH

WHAT WE CHANGED

STRUCTURE

BEHAVIOR

• No changes

PRESENTATION

STRUCTURE

BEHAVIOR

PRESENTATION

BUILDUSE PATCH

WHAT WE CHANGED

STRUCTURE

BEHAVIOR

• No changes

PRESENTATION

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

RICHSaturday, July 23, 2011

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

WHAT WE BUILT

STRUCTURE

BEHAVIOR

PRESENTATION

STRUCTURE

BEHAVIOR

PRESENTATION

BUILDUSE PATCH

WHAT WE BUILT

STRUCTURE

BEHAVIOR

PRESENTATION

STRUCTURE

BEHAVIOR

PRESENTATION

BUILDUSE PATCH

WHAT WE BUILT

STRUCTURE

BEHAVIOR

PRESENTATION

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

QUESTIONS?

credit: iwdrm.tumblr.com

Marc Lavallee @lavallee

Wesley Lindamood @lindamood

Slidesharehttp://

plugins are blueprints - daniel bachhuber · 2016. 7. 21. · credit: chris ware- building stories...

Documents

exam blueprints

test blueprints

membership strategy blueprints

aspects of late helladic sea...

biotic blueprints

blu writing ep blueprints r for i writing nts blueprints

symantec netbackup blueprints -...

blueprints in neurology

bachhuber automation equipment

blueprints surgery

ak blueprints

autism blueprints

blueprints medicine

blueprints brochure

sacred blueprints

solution blueprints

sten blueprints

the blueprints

visual blueprints list building via content...