Tata AIG General Insurance Company - Insurer Innovation Award 2024
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
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
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
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
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