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

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

http://drawn.ca/archive/chris-ware-ends-his-run-at-the-new-york-times/


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


http://www.baxleydesign.com/index.html

http://www.baxleydesign.com/index.html

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

1

2

3

4


AN EDUCATED GUESS

STRUCTURE

PRESENTATION

BEHAVIOR


WHEN TO USE A PLUGIN

STRUCTURE

BEHAVIOR

PRESENTATION

AMOUNT OF PLUGIN CUSTOMIZATION LargeSmall

USE


WHEN TO PATCH A PLUGIN

STRUCTURE

BEHAVIOR

PRESENTATION


USE

PATCH


WHEN TO BUILD YOUR OWN PLUGIN


STRUCTURE

BEHAVIOR

PRESENTATION

USE

PATCH

BUILD


NAVIS SLIDESHOWSExample One


A LIVING PATTERN LIBRARY

I start where the last man left off— Thomas Edison

Credit: Mark Killingsworth


http://www.zazzle.com/thomas_edison_tshirt-235718667595212147

http://www.zazzle.com/thomas_edison_tshirt-235718667595212147

OUR STARTING POINT

Slides for WordPress

http://bit.ly/gKHLvt


WORDPRESS DEFAULT


A PLUGIN JUMPSTART


A FUNCTIONAL PROTOTYPE


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


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


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


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


DESIGN IMPROVEMENTS

VIDEO

LINK

PHOTO

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


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


http://www.imdb.com/title/tt0101410/

http://www.imdb.com/title/tt0101410/

http://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