Stop Repeating Yourself: Modularized WordPress Development

J
Stop Repeating Yourself
MODULARIZED WORDPRESS DEVELOPMENT
#DPA5
Who We Are
JIM BARNES
Web Applications Programmer
4 years at UCF
https://github.com/jmbarne3
JO DICKSON
Web Applications Programmer
4 years at UCF
https://github.com/cjg89
HEW2016 — #DPA5 SLIDE 2
UCF Web Communications
• Part of UCF Marketing
• Team of 5 (4 developers, 1 director)
• Responsible for development of top-level websites and
applications for the university
• Develop and maintain sites for various departments,
organizations, and colleges
HEW2016 — #DPA5 SLIDE 3
HEW2016 — #DPA5 SLIDE 4
Current Theme Development
• Most functionality provided for the site is defined in the theme
• New themes are based on a generic theme with helper functions
for faster development
• Contains a base set of PHP functions, CSS and JavaScript that is
reproduced with each new theme
• Minimal reliance on plugins
• Build sites, not themes
HEW2016 — #DPA5 SLIDE 5
Current Theme Tools
• Abstract classes for custom post types, custom taxonomies
and shortcodes
• Support for adding custom meta fields to custom post types
• Support for quickly adding common configuration items
• Useful UI features, like a shortcode WYSIWYG GUI
HEW2016 — #DPA5 SLIDE 6
Custom Post Types
What You Need
• Title
• Singular Name
• Plural Name
• Standard Options
• Fields
What You Get
• Registration Logic
• Name Generation
• Automatic Shortcode
Registration
• Metaboxes and Fields
HEW2016 — #DPA5 SLIDE 7
!
News
"
Events
#
People
$
Carousel
%
Theme
Code
!
News
#
People
!
News
"
Events
#
People
%
Theme
Code
%
Theme
Code
%
Theme
Code
%
Theme
Code
#
People
$
Carousel
"
Events
$
Carousel
HEW2016 — #DPA5 SLIDE 8
& Simplified Deployment
' Maximum Customization
% Centralization of Code Base
( Reduction in client resources (CSS/JS)
) Little to no plugin bloat
Advantages
HEW2016 — #DPA5 SLIDE 9
Disadvantages
* We Repeat Ourselves
+ Duplication of Features and Styles
, Decentralized Bug Fixes
 Data loss on theme change
. Not WordPress best practices
HEW2016 — #DPA5 SLIDE 10
D.R.Y.
Don’t Repeat Yourself
HEW2016 — #DPA5 SLIDE 11
WordPress Best Practices
Themes
• Provide look and feel
• Page and post templates
• Stylesheet
• JavaScript necessary for
look and feel
Plugins
• Provide functionality
• Custom Post Types and
Taxonomies
• Shortcodes
• Widgets
• APIs
HEW2016 — #DPA5 SLIDE 12
Challenges with the “WordPress Way”
• Dependency management
• Heavy per-site customizations, in bulk
• Plugin bloat
• Minified asset delivery
HEW2016 — #DPA5 SLIDE 13
HEW2016 — #DPA5 SLIDE 14
( REDUCE
Time to Distribute Bug Fixes
HEW2016 — #DPA5 SLIDE 15
/ CONSOLIDATE
Similar Features and Logic
Across Our Themes
HEW2016 — #DPA5 SLIDE 16
0 MODERNIZE
Our Codebase
HEW2016 — #DPA5 SLIDE 17
1 STANDARDIZE
Plugin Dependency Management
For Themes and Other Plugins
HEW2016 — #DPA5 SLIDE 18
2 DISTRIBUTE
Resources for Developers and
Non-Developers Across Campus
HEW2016 — #DPA5 SLIDE 19
3 PROMOTE
Best Practices
How do we stop
repeating ourselves?
HEW2016 — #DPA5 SLIDE 20
!
News
"
Events
#
People
$
Carousel
%
Theme
Code
!
News
#
People
!
News
"
Events
#
People
%
Theme
Code
%
Theme
Code
%
Theme
Code
%
Theme
Code
#
People
$
Carousel
"
Events
$
Carousel
HEW2016 — #DPA5 SLIDE 21
!
News
"
Events
#
People
$
Carousel
%
Theme
Code
%
Theme
Code
%
Theme
Code
%
Theme
Code
%
Theme
Code
HEW2016 — #DPA5 SLIDE 22
Separate theme functionality from
plugin functionality
HEW2016 — #DPA5 SLIDE 23
Theme, or Plugin?
• Theme: look and feel
• Plugins: content and functionality
If the code were to be placed in a theme, and the theme
was then switched out, would you miss its functionality?
• Yes: plugin code
• No: theme code
HEW2016 — #DPA5 SLIDE 24
Separation of Concerns
(Content vs. Presentation)
Theme
• Layout
• Page and Post Templates
• Menu Locations
• Sidebars
• Presentation-related functions
• Styles
• Theme specific styles
• Overrides for plugin provided
markup, specific to theme
• Presentation Configuration
• Theme mods
Plugins
• Functionality
• Widgets
• Shortcodes
• Data-related functions
• Data Definition
• Custom Post Types
• Taxonomies
• Meta Fields
• API Endpoints
• Data Configuration
• Options
HEW2016 — #DPA5 SLIDE 25
Plugin Development
Reusability & Portability
• Default Styles and Templates
• Ability to turn off default CSS
and JS when more
customization is desired
• Customization of look and feel
through theme CSS
• Default functionality without
programming
Extensibility
• Actions and Filters to allow
overriding of default templates
• Sass artifacts available in
repository for easy overrides
• Well documented CSS classes
for theme specific overrides
HEW2016 — #DPA5 SLIDE 26
Example Plugins
UCF News UCF Events
HEW2016 — #DPA5 SLIDE 27
Example Plugins
HEW2016 — #DPA5 SLIDE 28
Example Plugins
HEW2016 — #DPA5 SLIDE 29
Customizing
Example – UCF News in a “Masonry” stacked grid layout
<?php
add_action( 'ucf_news_display_masonry_before', 'news_masonry_template_before', 10, 3 );
add_action( 'ucf_news_display_masonry_title', 'news_masonry_template_title', 10, 3 );
add_action( 'ucf_news_display_masonry', 'news_masonry_template', 10, 3 );
add_action( 'ucf_news_display_masonry_after', 'news_masonry_template_after', 10, 3 );
add_action( 'ucf_news_get_layouts', 'add_masonry_layout', 10, 1 );
?>
HEW2016 — #DPA5 SLIDE 30
Displays news content (prints markup)
Registers the new layout
<?php
add_action( 'ucf_news_display_masonry_before', 'news_masonry_template_before', 10, 3 );
add_action( 'ucf_news_display_masonry_title', 'news_masonry_template_title', 10, 3 );
add_action( 'ucf_news_display_masonry', 'news_masonry_template', 10, 3 );
add_action( 'ucf_news_display_masonry_after', 'news_masonry_template_after', 10, 3 );
add_action( 'ucf_news_get_layouts', 'add_masonry_layout', 10, 1 );
?>
Customizing
Example – UCF News in a “Masonry” stacked grid layout
HEW2016 — #DPA5 SLIDE 31
<?php
function news_masonry_template_before( $items,
$title, $display_type ) {
echo '<div class="news-masonry">';
}
?>
<?php
add_action( 'ucf_news_display_masonry_before', 'news_masonry_template_before', 10, 3 );
add_action( 'ucf_news_display_masonry_title', 'news_masonry_template_title', 10, 3 );
add_action( 'ucf_news_display_masonry', 'news_masonry_template', 10, 3 );
add_action( 'ucf_news_display_masonry_after', 'news_masonry_template_after', 10, 3 );
add_action( 'ucf_news_get_layouts', 'add_masonry_layout', 10, 1 );
?>
Customizing
Example – UCF News in a “Masonry” stacked grid layout
HEW2016 — #DPA5 SLIDE 32
<?php
function news_masonry_template_title( $items,
$title, $display_type ) {
echo '<h2>' . $title . '</h2>';
}
?>
<?php
add_action( 'ucf_news_display_masonry_before', 'news_masonry_template_before', 10, 3 );
add_action( 'ucf_news_display_masonry_title', 'news_masonry_template_title', 10, 3 );
add_action( 'ucf_news_display_masonry', 'news_masonry_template', 10, 3 );
add_action( 'ucf_news_display_masonry_after', 'news_masonry_template_after', 10, 3 );
add_action( 'ucf_news_get_layouts', 'add_masonry_layout', 10, 1 );
?>
Customizing
Example – UCF News in a “Masonry” stacked grid layout
HEW2016 — #DPA5 SLIDE 33
<?php
function news_masonry_template( $items,
$title, $display_type ) {
ob_start();
foreach ( $items as $item ) {
?>
<div class="news-item">
<?php echo $item->title; ?>
<?php // other item content… ?>
</div>
<?php
}
return ob_get_clean();
}
?>
<?php
add_action( 'ucf_news_display_masonry_before', 'news_masonry_template_before', 10, 3 );
add_action( 'ucf_news_display_masonry_title', 'news_masonry_template_title', 10, 3 );
add_action( 'ucf_news_display_masonry', 'news_masonry_template', 10, 3 );
add_action( 'ucf_news_display_masonry_after', 'news_masonry_template_after', 10, 3 );
add_action( 'ucf_news_get_layouts', 'add_masonry_layout', 10, 1 );
?>
Customizing
Example – UCF News in a “Masonry” stacked grid layout
HEW2016 — #DPA5 SLIDE 34
<?php
function news_masonry_template_after( $items,
$title, $display_type ) {
echo '</div>';
}
?>
<?php
add_action( 'ucf_news_display_masonry_before', 'news_masonry_template_before', 10, 3 );
add_action( 'ucf_news_display_masonry_title', 'news_masonry_template_title', 10, 3 );
add_action( 'ucf_news_display_masonry', 'news_masonry_template', 10, 3 );
add_action( 'ucf_news_display_masonry_after', 'news_masonry_template_after', 10, 3 );
add_action( 'ucf_news_get_layouts', 'add_masonry_layout', 10, 1 );
?>
Customizing
Example – UCF News in a “Masonry” stacked grid layout
HEW2016 — #DPA5 SLIDE 35
<?php
function add_masonry_layout( $layouts ) {
$layouts = array_merge(
$layouts,
array(
'masonry' => 'Masonry Layout'
)
);
return $layouts;
}
?>
Plugins We’re Building
WordPress Features
• Post types and taxonomies
• Shortcode WYSIWYG interface
• Autocomplete search field for
lists of posts by type
• Plugin for general utility
functions
Plugins for Services
• UCF search service
• Weather data
• Map data (map.ucf.edu)
• UCF Header (JavaScript brand
widget)
HEW2016 — #DPA5 SLIDE 36
Plugins We’re Not Building
• Meta box and meta field management (Advanced Custom
Fields/ACF)
• SEO optimization (WordPress SEO/Yoast)
• Form management (GravityForms)
• And a few others…
HEW2016 — #DPA5 SLIDE 37
Modularization of Plugin Functionality
Example – Separation of post type and meta field definitions
#
Person
custom post type
4
Advanced Custom Fields
(or other meta field manager)
%
Theme Code
• Email field
• Phone number field
• Address field
%
Theme Code
HEW2016 — #DPA5 SLIDE 38
Utilize a plugin + theme dependency
management system
HEW2016 — #DPA5 SLIDE 39
Dependency Management
• Avoid unnecessary dependencies
• Simple plugin detection
• SemVer plugin detection – In Development
HEW2016 — #DPA5 SLIDE 40
Theme Development
• Focused on:
• Layout (Templates)
• Styling
• Content
• Dependency Management
• Fail gracefully
• Handle dependencies through deployment process
HEW2016 — #DPA5 SLIDE 41
Yeoman Generators
• Allow for quick customization of look and feel
• Pick and Choose:
• Page templates
• Adjust SASS Variables
• Create documentation and labels
• Use WP CLI to create site, install theme enable plugins
HEW2016 — #DPA5 SLIDE 42
Looking Forward
Advantages
• More effective maintenance
and upgrade cycles
• More rapid development of
new themes
• Distributed functionality and
standard styles
• Increased consistency across
sites
Challenges
• Up front investment of time
• Additional responsibilities for
documenting and testing
• Change in culture – being
product driven instead of site
driven
• Balancing these transitions
with the need to get
production work done
HEW2016 — #DPA5 SLIDE 43
Questions?
HEW2016 — #DPA5 SLIDE 44
In Conclusion
• D.R.Y. WordPress sites require a different approach to both
code and site development as a whole
• YMMV!
• Code will be available on Github
• https://github.com/UCF
HEW2016 — #DPA5 SLIDE 45
Resources
• WordPress best practices
• https://codex.wordpress.org/Theme_Develo
pment#Functions_File
• https://developer.wordpress.com/themes/
• Dependency Management solutions
• https://roots.io/using-composer-with-
wordpress/
• http://tgmpluginactivation.com
• WordPress hooks, actions and filters
• https://codex.wordpress.org/Plugin_API
• Separation of Concerns (WP
StackExchange)
• http://wordpress.stackexchange.com/q/73031
• Theme or Plugin? (WP
StackExchange)
• http://wordpress.stackexchange.com/a/73038
• Meta field management plugins
• https://www.advancedcustomfields.com/
• https://wordpress.org/plugins/cmb2/
• UCF on Github
• https://github.com/UCF
HEW2016 — #DPA5 SLIDE 46
1 of 46

Recommended

Grav CMS by
Grav CMSGrav CMS
Grav CMSbtopro
293 views54 slides
EdTechJoker Spring 2020 - Lecture 5 grav cms by
EdTechJoker Spring 2020 - Lecture 5 grav cmsEdTechJoker Spring 2020 - Lecture 5 grav cms
EdTechJoker Spring 2020 - Lecture 5 grav cmsBryan Ollendyke
145 views46 slides
You Broke It, You Bought It by
You Broke It, You Bought ItYou Broke It, You Bought It
You Broke It, You Bought ItTim Senft
1.3K views47 slides
Get Hooked on Integrations with GitHub by
Get Hooked on Integrations with GitHubGet Hooked on Integrations with GitHub
Get Hooked on Integrations with GitHubChris Thomas
824 views30 slides
Hello from the Other Side: Painful Lessons Learned from a Website Redesign by
Hello from the Other Side: Painful Lessons Learned from a Website RedesignHello from the Other Side: Painful Lessons Learned from a Website Redesign
Hello from the Other Side: Painful Lessons Learned from a Website Redesignlisacatto
1K views33 slides
Train the Trainer: Tips for Enhancing Employee Learning (Presented at HighEdW... by
Train the Trainer: Tips for Enhancing Employee Learning (Presented at HighEdW...Train the Trainer: Tips for Enhancing Employee Learning (Presented at HighEdW...
Train the Trainer: Tips for Enhancing Employee Learning (Presented at HighEdW...Katie Santo
2.5K views70 slides

More Related Content

Viewers also liked

One Size Fits None: Remaking a College Site for a Content Hungry Generation by
One Size Fits None: Remaking a College Site for a Content Hungry GenerationOne Size Fits None: Remaking a College Site for a Content Hungry Generation
One Size Fits None: Remaking a College Site for a Content Hungry GenerationArdis Kadiu
1.7K views37 slides
What 'The Walking Dead' Taught Me About Web Governance by
What 'The Walking Dead' Taught Me About Web GovernanceWhat 'The Walking Dead' Taught Me About Web Governance
What 'The Walking Dead' Taught Me About Web GovernanceTim Nekritz
1.1K views56 slides
Learning to C.O.P.E. at XU by
Learning to C.O.P.E. at XULearning to C.O.P.E. at XU
Learning to C.O.P.E. at XUGregory McMullen
998 views44 slides
That is Not My Job by
That is Not My JobThat is Not My Job
That is Not My JobRobin Smail
1.3K views36 slides
Events in Stereo: How to help your events and campaigns succeed #heweb16 #mcs3 by
Events in Stereo: How to help your events and campaigns succeed #heweb16 #mcs3Events in Stereo: How to help your events and campaigns succeed #heweb16 #mcs3
Events in Stereo: How to help your events and campaigns succeed #heweb16 #mcs3Tiffany Beker
1.3K views34 slides
S.I.F.T. Through Your Content For Accessibility by
S.I.F.T. Through Your Content For AccessibilityS.I.F.T. Through Your Content For Accessibility
S.I.F.T. Through Your Content For AccessibilityJustin Gatewood
1.3K views70 slides

Viewers also liked(20)

One Size Fits None: Remaking a College Site for a Content Hungry Generation by Ardis Kadiu
One Size Fits None: Remaking a College Site for a Content Hungry GenerationOne Size Fits None: Remaking a College Site for a Content Hungry Generation
One Size Fits None: Remaking a College Site for a Content Hungry Generation
Ardis Kadiu1.7K views
What 'The Walking Dead' Taught Me About Web Governance by Tim Nekritz
What 'The Walking Dead' Taught Me About Web GovernanceWhat 'The Walking Dead' Taught Me About Web Governance
What 'The Walking Dead' Taught Me About Web Governance
Tim Nekritz1.1K views
That is Not My Job by Robin Smail
That is Not My JobThat is Not My Job
That is Not My Job
Robin Smail1.3K views
Events in Stereo: How to help your events and campaigns succeed #heweb16 #mcs3 by Tiffany Beker
Events in Stereo: How to help your events and campaigns succeed #heweb16 #mcs3Events in Stereo: How to help your events and campaigns succeed #heweb16 #mcs3
Events in Stereo: How to help your events and campaigns succeed #heweb16 #mcs3
Tiffany Beker1.3K views
S.I.F.T. Through Your Content For Accessibility by Justin Gatewood
S.I.F.T. Through Your Content For AccessibilityS.I.F.T. Through Your Content For Accessibility
S.I.F.T. Through Your Content For Accessibility
Justin Gatewood1.3K views
Nailing Pinterest: It's Not All Wedding Dresses and Desserts by Jackie Vetrano
Nailing Pinterest: It's Not All Wedding Dresses and DessertsNailing Pinterest: It's Not All Wedding Dresses and Desserts
Nailing Pinterest: It's Not All Wedding Dresses and Desserts
Jackie Vetrano1.2K views
"No, YOU'RE Crying": How Two Schools Turned a Cinderella Experience into Soci... by Chris D'Orso
"No, YOU'RE Crying": How Two Schools Turned a Cinderella Experience into Soci..."No, YOU'RE Crying": How Two Schools Turned a Cinderella Experience into Soci...
"No, YOU'RE Crying": How Two Schools Turned a Cinderella Experience into Soci...
Chris D'Orso792 views
Is This Hashtag Really Necessary: Taking the Plunge into Twitter Chats by David Tyler
Is This Hashtag Really Necessary: Taking the Plunge into Twitter ChatsIs This Hashtag Really Necessary: Taking the Plunge into Twitter Chats
Is This Hashtag Really Necessary: Taking the Plunge into Twitter Chats
David Tyler1K views
Higher Ed Governance for the Real World by Rachel DeLauder
Higher Ed Governance for the Real WorldHigher Ed Governance for the Real World
Higher Ed Governance for the Real World
Rachel DeLauder2.4K views
Digital hoarding is driving away users and killing conversion by Kate Wehner
Digital hoarding is driving away users and killing conversionDigital hoarding is driving away users and killing conversion
Digital hoarding is driving away users and killing conversion
Kate Wehner713 views
The New Analytics of Web Governance by Shane Diffily
The New Analytics of Web GovernanceThe New Analytics of Web Governance
The New Analytics of Web Governance
Shane Diffily11.7K views
Web Governance in Higher Education by Shane Diffily
Web Governance in Higher EducationWeb Governance in Higher Education
Web Governance in Higher Education
Shane Diffily9.2K views
Using the Web Arms Race to your advantage - sell more via a better site :) by Shane Diffily
Using the Web Arms Race to your advantage - sell more via a better site :)Using the Web Arms Race to your advantage - sell more via a better site :)
Using the Web Arms Race to your advantage - sell more via a better site :)
Shane Diffily9.7K views
A New Framework for Web Governance by Shane Diffily
A New Framework for Web GovernanceA New Framework for Web Governance
A New Framework for Web Governance
Shane Diffily10.3K views
Shall We Play a Game? Gaming the System, When the System Is Your Learning Man... by Nikki Massaro Kauffman
Shall We Play a Game? Gaming the System, When the System Is Your Learning Man...Shall We Play a Game? Gaming the System, When the System Is Your Learning Man...
Shall We Play a Game? Gaming the System, When the System Is Your Learning Man...
Explain your work! 5 public speaking skills you can learn now by Genevieve Howard
Explain your work! 5 public speaking skills you can learn nowExplain your work! 5 public speaking skills you can learn now
Explain your work! 5 public speaking skills you can learn now
Genevieve Howard1.5K views
Getting it Right: What Really Matters to Students In Social Media Communities... by Corie Martin, Ed.D.
Getting it Right: What Really Matters to Students In Social Media Communities...Getting it Right: What Really Matters to Students In Social Media Communities...
Getting it Right: What Really Matters to Students In Social Media Communities...
Corie Martin, Ed.D.2.7K views
Managing Chaos - Digital Governance by Lisa Welchman
Managing Chaos - Digital GovernanceManaging Chaos - Digital Governance
Managing Chaos - Digital Governance
Lisa Welchman1.5K views

Similar to Stop Repeating Yourself: Modularized WordPress Development

Wordpress development 101 by
Wordpress development 101Wordpress development 101
Wordpress development 101Commit Software Sh.p.k.
192 views34 slides
Accelerating Custom Development with Dynamic Scaffolding and WP-CLI by
Accelerating Custom Development with Dynamic Scaffolding and WP-CLIAccelerating Custom Development with Dynamic Scaffolding and WP-CLI
Accelerating Custom Development with Dynamic Scaffolding and WP-CLIdrywallbmb
488 views27 slides
It's a Mod World - A Practical Guide to Rocking Modernizr by
It's a Mod World - A Practical Guide to Rocking ModernizrIt's a Mod World - A Practical Guide to Rocking Modernizr
It's a Mod World - A Practical Guide to Rocking ModernizrMichael Enslow
1.9K views26 slides
CSMess to OOCSS: Refactoring CSS with Object Oriented Design by
CSMess to OOCSS: Refactoring CSS with Object Oriented DesignCSMess to OOCSS: Refactoring CSS with Object Oriented Design
CSMess to OOCSS: Refactoring CSS with Object Oriented DesignKate Travers
37 views114 slides
Building Responsive Applications Using XPages by
Building Responsive Applications Using XPagesBuilding Responsive Applications Using XPages
Building Responsive Applications Using XPagesTeamstudio
4.8K views77 slides
Please do this asap its already late. I will provide log info to www.docx by
Please do this asap its already late. I will provide log info to www.docxPlease do this asap its already late. I will provide log info to www.docx
Please do this asap its already late. I will provide log info to www.docxChereCheek752
2 views11 slides

Similar to Stop Repeating Yourself: Modularized WordPress Development(20)

Accelerating Custom Development with Dynamic Scaffolding and WP-CLI by drywallbmb
Accelerating Custom Development with Dynamic Scaffolding and WP-CLIAccelerating Custom Development with Dynamic Scaffolding and WP-CLI
Accelerating Custom Development with Dynamic Scaffolding and WP-CLI
drywallbmb488 views
It's a Mod World - A Practical Guide to Rocking Modernizr by Michael Enslow
It's a Mod World - A Practical Guide to Rocking ModernizrIt's a Mod World - A Practical Guide to Rocking Modernizr
It's a Mod World - A Practical Guide to Rocking Modernizr
Michael Enslow1.9K views
CSMess to OOCSS: Refactoring CSS with Object Oriented Design by Kate Travers
CSMess to OOCSS: Refactoring CSS with Object Oriented DesignCSMess to OOCSS: Refactoring CSS with Object Oriented Design
CSMess to OOCSS: Refactoring CSS with Object Oriented Design
Kate Travers37 views
Building Responsive Applications Using XPages by Teamstudio
Building Responsive Applications Using XPagesBuilding Responsive Applications Using XPages
Building Responsive Applications Using XPages
Teamstudio4.8K views
Please do this asap its already late. I will provide log info to www.docx by ChereCheek752
Please do this asap its already late. I will provide log info to www.docxPlease do this asap its already late. I will provide log info to www.docx
Please do this asap its already late. I will provide log info to www.docx
ChereCheek7522 views
WordCamp Sheffield 2014 Theme Workflow Presentation by Jonny Allbut
WordCamp Sheffield 2014 Theme Workflow PresentationWordCamp Sheffield 2014 Theme Workflow Presentation
WordCamp Sheffield 2014 Theme Workflow Presentation
Jonny Allbut2.5K views
Extreme CSS Techniques - MadWorld Europe 2018, Scott DeLoach, ClickStart by Scott DeLoach
Extreme CSS Techniques - MadWorld Europe 2018, Scott DeLoach, ClickStartExtreme CSS Techniques - MadWorld Europe 2018, Scott DeLoach, ClickStart
Extreme CSS Techniques - MadWorld Europe 2018, Scott DeLoach, ClickStart
Scott DeLoach41 views
Office 365 Saturday (Sydney) - SharePoint framework – build integrated user e... by Anupam Ranku
Office 365 Saturday (Sydney) - SharePoint framework – build integrated user e...Office 365 Saturday (Sydney) - SharePoint framework – build integrated user e...
Office 365 Saturday (Sydney) - SharePoint framework – build integrated user e...
Anupam Ranku791 views
WordCamp Asheville 2017 - So You Wanna Dev? Join the Team! by Evan Mullins
WordCamp Asheville 2017 - So You Wanna Dev? Join the Team!WordCamp Asheville 2017 - So You Wanna Dev? Join the Team!
WordCamp Asheville 2017 - So You Wanna Dev? Join the Team!
Evan Mullins1.3K views
Highly Maintainable, Efficient, and Optimized CSS by Zoe Gillenwater
Highly Maintainable, Efficient, and Optimized CSSHighly Maintainable, Efficient, and Optimized CSS
Highly Maintainable, Efficient, and Optimized CSS
Zoe Gillenwater1.1K views
Extending & Scaling | Dallas PHP by randyhoyt
Extending & Scaling | Dallas PHPExtending & Scaling | Dallas PHP
Extending & Scaling | Dallas PHP
randyhoyt2.2K views
SPUnite17 Building Great Client Side Web Parts with SPFx by NCCOMMS
SPUnite17 Building Great Client Side Web Parts with SPFxSPUnite17 Building Great Client Side Web Parts with SPFx
SPUnite17 Building Great Client Side Web Parts with SPFx
NCCOMMS392 views
LavaCon 2017 - Much Ado About Templates: Reduce the Learning Curve and Increa... by Jack Molisani
LavaCon 2017 - Much Ado About Templates: Reduce the Learning Curve and Increa...LavaCon 2017 - Much Ado About Templates: Reduce the Learning Curve and Increa...
LavaCon 2017 - Much Ado About Templates: Reduce the Learning Curve and Increa...
Jack Molisani175 views
SoCal Code Camp 2011 - ASP.NET MVC 4 by Jon Galloway
SoCal Code Camp 2011 - ASP.NET MVC 4SoCal Code Camp 2011 - ASP.NET MVC 4
SoCal Code Camp 2011 - ASP.NET MVC 4
Jon Galloway1.6K views
WordPress Custom Fields: Control your content presentation by breaking out of... by Denise Williams
WordPress Custom Fields: Control your content presentation by breaking out of...WordPress Custom Fields: Control your content presentation by breaking out of...
WordPress Custom Fields: Control your content presentation by breaking out of...
Denise Williams6.5K views
CIS 336 (DEVRY) Entire Course NEW by shyamuopuop
CIS 336 (DEVRY) Entire Course NEWCIS 336 (DEVRY) Entire Course NEW
CIS 336 (DEVRY) Entire Course NEW
shyamuopuop29 views

Recently uploaded

Web Dev - 1 PPT.pdf by
Web Dev - 1 PPT.pdfWeb Dev - 1 PPT.pdf
Web Dev - 1 PPT.pdfgdsczhcet
55 views45 slides
Automating a World-Class Technology Conference; Behind the Scenes of CiscoLive by
Automating a World-Class Technology Conference; Behind the Scenes of CiscoLiveAutomating a World-Class Technology Conference; Behind the Scenes of CiscoLive
Automating a World-Class Technology Conference; Behind the Scenes of CiscoLiveNetwork Automation Forum
21 views35 slides
STPI OctaNE CoE Brochure.pdf by
STPI OctaNE CoE Brochure.pdfSTPI OctaNE CoE Brochure.pdf
STPI OctaNE CoE Brochure.pdfmadhurjyapb
12 views1 slide
Transcript: The Details of Description Techniques tips and tangents on altern... by
Transcript: The Details of Description Techniques tips and tangents on altern...Transcript: The Details of Description Techniques tips and tangents on altern...
Transcript: The Details of Description Techniques tips and tangents on altern...BookNet Canada
130 views15 slides
Black and White Modern Science Presentation.pptx by
Black and White Modern Science Presentation.pptxBlack and White Modern Science Presentation.pptx
Black and White Modern Science Presentation.pptxmaryamkhalid2916
14 views21 slides
Perth MeetUp November 2023 by
Perth MeetUp November 2023 Perth MeetUp November 2023
Perth MeetUp November 2023 Michael Price
15 views44 slides

Recently uploaded(20)

Web Dev - 1 PPT.pdf by gdsczhcet
Web Dev - 1 PPT.pdfWeb Dev - 1 PPT.pdf
Web Dev - 1 PPT.pdf
gdsczhcet55 views
Automating a World-Class Technology Conference; Behind the Scenes of CiscoLive by Network Automation Forum
Automating a World-Class Technology Conference; Behind the Scenes of CiscoLiveAutomating a World-Class Technology Conference; Behind the Scenes of CiscoLive
Automating a World-Class Technology Conference; Behind the Scenes of CiscoLive
STPI OctaNE CoE Brochure.pdf by madhurjyapb
STPI OctaNE CoE Brochure.pdfSTPI OctaNE CoE Brochure.pdf
STPI OctaNE CoE Brochure.pdf
madhurjyapb12 views
Transcript: The Details of Description Techniques tips and tangents on altern... by BookNet Canada
Transcript: The Details of Description Techniques tips and tangents on altern...Transcript: The Details of Description Techniques tips and tangents on altern...
Transcript: The Details of Description Techniques tips and tangents on altern...
BookNet Canada130 views
Black and White Modern Science Presentation.pptx by maryamkhalid2916
Black and White Modern Science Presentation.pptxBlack and White Modern Science Presentation.pptx
Black and White Modern Science Presentation.pptx
maryamkhalid291614 views
Perth MeetUp November 2023 by Michael Price
Perth MeetUp November 2023 Perth MeetUp November 2023
Perth MeetUp November 2023
Michael Price15 views
Attacking IoT Devices from a Web Perspective - Linux Day by Simone Onofri
Attacking IoT Devices from a Web Perspective - Linux Day Attacking IoT Devices from a Web Perspective - Linux Day
Attacking IoT Devices from a Web Perspective - Linux Day
Simone Onofri15 views
【USB韌體設計課程】精選講義節錄-USB的列舉過程_艾鍗學院 by IttrainingIttraining
【USB韌體設計課程】精選講義節錄-USB的列舉過程_艾鍗學院【USB韌體設計課程】精選講義節錄-USB的列舉過程_艾鍗學院
【USB韌體設計課程】精選講義節錄-USB的列舉過程_艾鍗學院
Spesifikasi Lengkap ASUS Vivobook Go 14 by Dot Semarang
Spesifikasi Lengkap ASUS Vivobook Go 14Spesifikasi Lengkap ASUS Vivobook Go 14
Spesifikasi Lengkap ASUS Vivobook Go 14
Dot Semarang35 views
DALI Basics Course 2023 by Ivory Egg
DALI Basics Course  2023DALI Basics Course  2023
DALI Basics Course 2023
Ivory Egg14 views
TouchLog: Finger Micro Gesture Recognition Using Photo-Reflective Sensors by sugiuralab
TouchLog: Finger Micro Gesture Recognition  Using Photo-Reflective SensorsTouchLog: Finger Micro Gesture Recognition  Using Photo-Reflective Sensors
TouchLog: Finger Micro Gesture Recognition Using Photo-Reflective Sensors
sugiuralab15 views
AMAZON PRODUCT RESEARCH.pdf by JerikkLaureta
AMAZON PRODUCT RESEARCH.pdfAMAZON PRODUCT RESEARCH.pdf
AMAZON PRODUCT RESEARCH.pdf
JerikkLaureta15 views
Business Analyst Series 2023 - Week 3 Session 5 by DianaGray10
Business Analyst Series 2023 -  Week 3 Session 5Business Analyst Series 2023 -  Week 3 Session 5
Business Analyst Series 2023 - Week 3 Session 5
DianaGray10209 views
SAP Automation Using Bar Code and FIORI.pdf by Virendra Rai, PMP
SAP Automation Using Bar Code and FIORI.pdfSAP Automation Using Bar Code and FIORI.pdf
SAP Automation Using Bar Code and FIORI.pdf
Case Study Copenhagen Energy and Business Central.pdf by Aitana
Case Study Copenhagen Energy and Business Central.pdfCase Study Copenhagen Energy and Business Central.pdf
Case Study Copenhagen Energy and Business Central.pdf
Aitana12 views

Stop Repeating Yourself: Modularized WordPress Development

  • 1. Stop Repeating Yourself MODULARIZED WORDPRESS DEVELOPMENT #DPA5
  • 2. Who We Are JIM BARNES Web Applications Programmer 4 years at UCF https://github.com/jmbarne3 JO DICKSON Web Applications Programmer 4 years at UCF https://github.com/cjg89 HEW2016 — #DPA5 SLIDE 2
  • 3. UCF Web Communications • Part of UCF Marketing • Team of 5 (4 developers, 1 director) • Responsible for development of top-level websites and applications for the university • Develop and maintain sites for various departments, organizations, and colleges HEW2016 — #DPA5 SLIDE 3
  • 5. Current Theme Development • Most functionality provided for the site is defined in the theme • New themes are based on a generic theme with helper functions for faster development • Contains a base set of PHP functions, CSS and JavaScript that is reproduced with each new theme • Minimal reliance on plugins • Build sites, not themes HEW2016 — #DPA5 SLIDE 5
  • 6. Current Theme Tools • Abstract classes for custom post types, custom taxonomies and shortcodes • Support for adding custom meta fields to custom post types • Support for quickly adding common configuration items • Useful UI features, like a shortcode WYSIWYG GUI HEW2016 — #DPA5 SLIDE 6
  • 7. Custom Post Types What You Need • Title • Singular Name • Plural Name • Standard Options • Fields What You Get • Registration Logic • Name Generation • Automatic Shortcode Registration • Metaboxes and Fields HEW2016 — #DPA5 SLIDE 7
  • 9. & Simplified Deployment ' Maximum Customization % Centralization of Code Base ( Reduction in client resources (CSS/JS) ) Little to no plugin bloat Advantages HEW2016 — #DPA5 SLIDE 9
  • 10. Disadvantages * We Repeat Ourselves + Duplication of Features and Styles , Decentralized Bug Fixes  Data loss on theme change . Not WordPress best practices HEW2016 — #DPA5 SLIDE 10
  • 12. WordPress Best Practices Themes • Provide look and feel • Page and post templates • Stylesheet • JavaScript necessary for look and feel Plugins • Provide functionality • Custom Post Types and Taxonomies • Shortcodes • Widgets • APIs HEW2016 — #DPA5 SLIDE 12
  • 13. Challenges with the “WordPress Way” • Dependency management • Heavy per-site customizations, in bulk • Plugin bloat • Minified asset delivery HEW2016 — #DPA5 SLIDE 13
  • 14. HEW2016 — #DPA5 SLIDE 14 ( REDUCE Time to Distribute Bug Fixes
  • 15. HEW2016 — #DPA5 SLIDE 15 / CONSOLIDATE Similar Features and Logic Across Our Themes
  • 16. HEW2016 — #DPA5 SLIDE 16 0 MODERNIZE Our Codebase
  • 17. HEW2016 — #DPA5 SLIDE 17 1 STANDARDIZE Plugin Dependency Management For Themes and Other Plugins
  • 18. HEW2016 — #DPA5 SLIDE 18 2 DISTRIBUTE Resources for Developers and Non-Developers Across Campus
  • 19. HEW2016 — #DPA5 SLIDE 19 3 PROMOTE Best Practices
  • 20. How do we stop repeating ourselves? HEW2016 — #DPA5 SLIDE 20
  • 23. Separate theme functionality from plugin functionality HEW2016 — #DPA5 SLIDE 23
  • 24. Theme, or Plugin? • Theme: look and feel • Plugins: content and functionality If the code were to be placed in a theme, and the theme was then switched out, would you miss its functionality? • Yes: plugin code • No: theme code HEW2016 — #DPA5 SLIDE 24
  • 25. Separation of Concerns (Content vs. Presentation) Theme • Layout • Page and Post Templates • Menu Locations • Sidebars • Presentation-related functions • Styles • Theme specific styles • Overrides for plugin provided markup, specific to theme • Presentation Configuration • Theme mods Plugins • Functionality • Widgets • Shortcodes • Data-related functions • Data Definition • Custom Post Types • Taxonomies • Meta Fields • API Endpoints • Data Configuration • Options HEW2016 — #DPA5 SLIDE 25
  • 26. Plugin Development Reusability & Portability • Default Styles and Templates • Ability to turn off default CSS and JS when more customization is desired • Customization of look and feel through theme CSS • Default functionality without programming Extensibility • Actions and Filters to allow overriding of default templates • Sass artifacts available in repository for easy overrides • Well documented CSS classes for theme specific overrides HEW2016 — #DPA5 SLIDE 26
  • 27. Example Plugins UCF News UCF Events HEW2016 — #DPA5 SLIDE 27
  • 28. Example Plugins HEW2016 — #DPA5 SLIDE 28
  • 29. Example Plugins HEW2016 — #DPA5 SLIDE 29
  • 30. Customizing Example – UCF News in a “Masonry” stacked grid layout <?php add_action( 'ucf_news_display_masonry_before', 'news_masonry_template_before', 10, 3 ); add_action( 'ucf_news_display_masonry_title', 'news_masonry_template_title', 10, 3 ); add_action( 'ucf_news_display_masonry', 'news_masonry_template', 10, 3 ); add_action( 'ucf_news_display_masonry_after', 'news_masonry_template_after', 10, 3 ); add_action( 'ucf_news_get_layouts', 'add_masonry_layout', 10, 1 ); ?> HEW2016 — #DPA5 SLIDE 30 Displays news content (prints markup) Registers the new layout
  • 31. <?php add_action( 'ucf_news_display_masonry_before', 'news_masonry_template_before', 10, 3 ); add_action( 'ucf_news_display_masonry_title', 'news_masonry_template_title', 10, 3 ); add_action( 'ucf_news_display_masonry', 'news_masonry_template', 10, 3 ); add_action( 'ucf_news_display_masonry_after', 'news_masonry_template_after', 10, 3 ); add_action( 'ucf_news_get_layouts', 'add_masonry_layout', 10, 1 ); ?> Customizing Example – UCF News in a “Masonry” stacked grid layout HEW2016 — #DPA5 SLIDE 31 <?php function news_masonry_template_before( $items, $title, $display_type ) { echo '<div class="news-masonry">'; } ?>
  • 32. <?php add_action( 'ucf_news_display_masonry_before', 'news_masonry_template_before', 10, 3 ); add_action( 'ucf_news_display_masonry_title', 'news_masonry_template_title', 10, 3 ); add_action( 'ucf_news_display_masonry', 'news_masonry_template', 10, 3 ); add_action( 'ucf_news_display_masonry_after', 'news_masonry_template_after', 10, 3 ); add_action( 'ucf_news_get_layouts', 'add_masonry_layout', 10, 1 ); ?> Customizing Example – UCF News in a “Masonry” stacked grid layout HEW2016 — #DPA5 SLIDE 32 <?php function news_masonry_template_title( $items, $title, $display_type ) { echo '<h2>' . $title . '</h2>'; } ?>
  • 33. <?php add_action( 'ucf_news_display_masonry_before', 'news_masonry_template_before', 10, 3 ); add_action( 'ucf_news_display_masonry_title', 'news_masonry_template_title', 10, 3 ); add_action( 'ucf_news_display_masonry', 'news_masonry_template', 10, 3 ); add_action( 'ucf_news_display_masonry_after', 'news_masonry_template_after', 10, 3 ); add_action( 'ucf_news_get_layouts', 'add_masonry_layout', 10, 1 ); ?> Customizing Example – UCF News in a “Masonry” stacked grid layout HEW2016 — #DPA5 SLIDE 33 <?php function news_masonry_template( $items, $title, $display_type ) { ob_start(); foreach ( $items as $item ) { ?> <div class="news-item"> <?php echo $item->title; ?> <?php // other item content… ?> </div> <?php } return ob_get_clean(); } ?>
  • 34. <?php add_action( 'ucf_news_display_masonry_before', 'news_masonry_template_before', 10, 3 ); add_action( 'ucf_news_display_masonry_title', 'news_masonry_template_title', 10, 3 ); add_action( 'ucf_news_display_masonry', 'news_masonry_template', 10, 3 ); add_action( 'ucf_news_display_masonry_after', 'news_masonry_template_after', 10, 3 ); add_action( 'ucf_news_get_layouts', 'add_masonry_layout', 10, 1 ); ?> Customizing Example – UCF News in a “Masonry” stacked grid layout HEW2016 — #DPA5 SLIDE 34 <?php function news_masonry_template_after( $items, $title, $display_type ) { echo '</div>'; } ?>
  • 35. <?php add_action( 'ucf_news_display_masonry_before', 'news_masonry_template_before', 10, 3 ); add_action( 'ucf_news_display_masonry_title', 'news_masonry_template_title', 10, 3 ); add_action( 'ucf_news_display_masonry', 'news_masonry_template', 10, 3 ); add_action( 'ucf_news_display_masonry_after', 'news_masonry_template_after', 10, 3 ); add_action( 'ucf_news_get_layouts', 'add_masonry_layout', 10, 1 ); ?> Customizing Example – UCF News in a “Masonry” stacked grid layout HEW2016 — #DPA5 SLIDE 35 <?php function add_masonry_layout( $layouts ) { $layouts = array_merge( $layouts, array( 'masonry' => 'Masonry Layout' ) ); return $layouts; } ?>
  • 36. Plugins We’re Building WordPress Features • Post types and taxonomies • Shortcode WYSIWYG interface • Autocomplete search field for lists of posts by type • Plugin for general utility functions Plugins for Services • UCF search service • Weather data • Map data (map.ucf.edu) • UCF Header (JavaScript brand widget) HEW2016 — #DPA5 SLIDE 36
  • 37. Plugins We’re Not Building • Meta box and meta field management (Advanced Custom Fields/ACF) • SEO optimization (WordPress SEO/Yoast) • Form management (GravityForms) • And a few others… HEW2016 — #DPA5 SLIDE 37
  • 38. Modularization of Plugin Functionality Example – Separation of post type and meta field definitions # Person custom post type 4 Advanced Custom Fields (or other meta field manager) % Theme Code • Email field • Phone number field • Address field % Theme Code HEW2016 — #DPA5 SLIDE 38
  • 39. Utilize a plugin + theme dependency management system HEW2016 — #DPA5 SLIDE 39
  • 40. Dependency Management • Avoid unnecessary dependencies • Simple plugin detection • SemVer plugin detection – In Development HEW2016 — #DPA5 SLIDE 40
  • 41. Theme Development • Focused on: • Layout (Templates) • Styling • Content • Dependency Management • Fail gracefully • Handle dependencies through deployment process HEW2016 — #DPA5 SLIDE 41
  • 42. Yeoman Generators • Allow for quick customization of look and feel • Pick and Choose: • Page templates • Adjust SASS Variables • Create documentation and labels • Use WP CLI to create site, install theme enable plugins HEW2016 — #DPA5 SLIDE 42
  • 43. Looking Forward Advantages • More effective maintenance and upgrade cycles • More rapid development of new themes • Distributed functionality and standard styles • Increased consistency across sites Challenges • Up front investment of time • Additional responsibilities for documenting and testing • Change in culture – being product driven instead of site driven • Balancing these transitions with the need to get production work done HEW2016 — #DPA5 SLIDE 43
  • 45. In Conclusion • D.R.Y. WordPress sites require a different approach to both code and site development as a whole • YMMV! • Code will be available on Github • https://github.com/UCF HEW2016 — #DPA5 SLIDE 45
  • 46. Resources • WordPress best practices • https://codex.wordpress.org/Theme_Develo pment#Functions_File • https://developer.wordpress.com/themes/ • Dependency Management solutions • https://roots.io/using-composer-with- wordpress/ • http://tgmpluginactivation.com • WordPress hooks, actions and filters • https://codex.wordpress.org/Plugin_API • Separation of Concerns (WP StackExchange) • http://wordpress.stackexchange.com/q/73031 • Theme or Plugin? (WP StackExchange) • http://wordpress.stackexchange.com/a/73038 • Meta field management plugins • https://www.advancedcustomfields.com/ • https://wordpress.org/plugins/cmb2/ • UCF on Github • https://github.com/UCF HEW2016 — #DPA5 SLIDE 46

Editor's Notes

  1. Jim Welcome to Stop Repeating Yourself – Modularized WordPress Development Today we’re going to be talking about our strategies for large-scale WordPress site development, why we’re changing those strategies, and some tools and techniques we’re using to transition to more modularized development. #DPA5
  2. Both Introduce ourselves briefly as web developers for UCF Web Communications (Webcom) Maybe note our level of experience with WordPress in general, or other experience that is relevant to the presentation?
  3. Jo UCF Web Communications, or Webcom, consists of 4 total developers and 1 director As part of Webcom, we’re responsible for a large number of top-level websites and applications, as well as many sites for other departments, organizations, and colleges within the university Most of these sites run on WordPress
  4. Jo Webcom currently develops and maintains 36 unique WordPress sites Just about all of them are built off of the same core set of code, with various tweaks and customizations Several sites from other departments are also built off of our code
  5. Jim So, what does our code look like? According to WordPress best practices, we’re doing it the “wrong way”. Back in 2010-2011 when Webcom first started developing custom WordPress themes, a “Generic Theme” was established, which contains a base set of functions, CSS and Javascript Theme includes classes for post type and taxonomy registration, as well as helper classes and methods for registering meta fields and meta boxes New WordPress themes were originally built by cloning the generic theme repo. We’ve since created a Yeoman generator that simplifies this process. Over time, we’ve also incorporated pre-processing tools like Gulp and Sass into our themes. With the exception of the handful of plugins we typically use, all site functionality is contained within themes. The theme is considered the backbone of any given site.
  6. Jim OOP approach to building common features Rapid creation of custom meta fields Rapid configuration changes Useful UI features for users
  7. Jim Run through the before/after of creating a custom post type.
  8. Jim Under our current theme development process, themes are treated like individual sites: all layout, styles and functionality and wrapped up in a single package. This can cause a lot of repetitive code across themes, especially if small customizations are needed to certain functional parts of the themes. Let’s say we have five websites we need to build and support. The primary website is going to use a (transition) news feed, (transition) events feed, (transition) people custom post type, (transition) carousel, along with (transition) our layout and styles specific to the theme. All of this would be written within the theme code (transition). This process would be repeated along the other 4 sites we need to support. (transition) Since each theme has some particular needs for the various functional groups, each code base will be slightly different and the original code base will gradually go out of sync.
  9. Jim - While our current development process has certain benefits, it comes with several drawbacks. Being able to centralize (almost) all site logic and styles within a single repository makes it very easy to deploy site changes, and allows us to heavily customize existing functions and styles without modifying any other sites or code However, with the growth of our department and the number of sites we maintain, this development strategy has become a double-edged sword: If any piece of logic cloned off of our generic theme breaks, it must be fixed individually in every theme that contains that code. It also makes it very time-consuming to update any features that are repeated across multiple themes. Our themes are also not good examples of WordPress best practices. Ideally, we’d like to be a resource for well-written WordPress code for other departments, and for the open-source community in general.
  10. Jim Talk about DRY as it relates to single projects, functions/classes Will I use this function more than once? Is part of my function repeated in other functions? Is the code more understandable split into separate parts? Expand the concept of DRY beyond a single project to talk about its implementation across projects
  11. Jim
  12. Jim Regardless, doing things the “WordPress Way” is not as easy as it seems. One of the biggest pain points with developing complex sites for WordPress is its lack of integrated dependency management. If you were building, say, a Node project, you’d be able to define a set of dependencies for that project using a packages.json file, and simply run a `npm install` command to download those dependencies. WordPress doesn’t have any built-in way of defining a set of required plugins for a single site—they must all be installed manually. This makes it very difficult to automate deployment of site updates when themes and plugins are separated. There are a few third-party solutions to the issue, but none of them quite work for us. Composer – has some unideal setbacks, such as requiring all packages to have a composer.json file—this forces you to depend on third-party mirrors of WordPress itself and the public plugin directory (WordPress Packagist) so that dependencies have a composer.json file. Doesn’t account for premium plugins or public plugins not in the official WordPress directory which may not offer Composer support. TGM Plugin Activation Library – lack of official MultiSite support (at time of writing) Another problem with separating functionality from themes is the necessity for heavy per-site customizations. We are frequently asked to build sites that vary visually and functionally quite a bit from previous projects—we don’t have the luxury of using a single template across most of the sites we build. When you start separating theme logic and plugin logic, you lose the option of “just throwing stuff in your functions.php file”. Which leads to the concept of plugin bloat—generally you want to avoid having tons of plugins activated, mostly for performance reasons and to reduce the number of potential sources for bugs. With modularizing out functionality into plugins, it’s very easy to go overboard with the number of required plugins. And, finally, because plugins are expected to work “out of the box”, they generally have to include and load their own front-end stylesheets and JavaScript. Ideally, we want to be able to condense most, if not all, of the front-end assets needed for a site into single minified files to reduce HTTP requests.
  13. Jim Reduce the amount of time it takes to distribute bug fixes
  14. Jim Consolidate features and logic across sites throughout the university
  15. Jim Modernize our code base bringing it more inline with current development trends, making it easier to modernize further in the future
  16. Jim Create a standard plugin dependency method for ensuring sites work as intended when pushed into production
  17. Jim Distribute our code across campus to developers and non-developers alike. Plug and play AND Customizable
  18. Jim Promote best practices across campus
  19. Jim
  20. Jim Ideally, we want to move away from this…
  21. Jim And move toward a process like this: where discreet functional code is written into plugins (transition), creating a foundation on which we can build our themes. The specific layout and style still needs to be present (transition). However, the individual differences between themes would be reduced to in our theme code by using action hooks and css overrides (transition) reducing the amount of overall code that needs to be maintained between sites (transition).
  22. Jo Step one: If we want to shift to using plugins as the foundation for site functionality, we need to figure out how to separate theme functionality from plugin functionality for projects moving forward.
  23. Jo As Jim mentioned earlier, best practices state that themes should provide look and feel, and plugins should provide functionality. But it can be challenging to figure out exactly what goes where—especially when WordPress is very forgiving and allows you to put pretty much any plugin-related code in your theme. There’s also a lot of conflicting information online regarding putting code in plugins vs your functions.php file. A good way of deciding what functionality goes where is to ask yourself, “if I put this code in a theme, would I miss the functionality after switching themes?”
  24. Jo This is our hard line between the separation of content vs presentation for our projects moving forward. We’ve grouped various common features into more general categories, and this isn’t a total comprehensive list of features, but it covers our most commonly-used WordPress features and functionality. This separation of concerns leaves us with a lot of new plugins to develop.
  25. Jo Obviously, we want these new plugins to work out-of-the-box for non-programmers, but we still need to be able to add theme-specific overrides in an elegant, modular way. So, for reusability and portability, we decided that these new plugins that we’re developing would include some default set of styles and templates, but that those default styles could be disabled when more customization is desired via the theme. For extensibility, these plugins would heavily utilize actions and filters to allow overriding of default templates. They would also include well-documented Sass partials, which could easily be imported into a theme’s Sass files during development.
  26. Jo We’re still in the process of developing the feature plugins we want to transition to using, but we do have a few good examples to show off. Our UCF News and Events plugins provide shortcodes, widgets, and base functions for displaying content from our news site and university-wide events system. The screenshots here show what both plugins would look like out-of-the-box with default styles and markup applied.
  27. Jo CSS provided by the plugins can be disabled for theme developers that want to include styles for the plugin content within their themes. You can see here where we’ve provided an option within the WordPress admin to toggle styles on or off.
  28. Jo A default layout and styles are provided in each plugin, but new layouts are easy to add via actions and filters.
  29. Jo To show off how you can use actions and filters, here’s an example that shows how you can extend the UCF News plugin. You can see how we’ve added actions for defining parts of a “layout” (and, by “layout”, we mean the combination of markup and styles for a chunk of content). This code creates a new “layout” for news content called “masonry”, which would probably display news in a stacked grid layout. The masonry layout would be selectable as an option for the news widget and as a possible attribute value for the news shortcode. This piece of code defines 5 new actions; the first four are run whenever a particular layout called “masonry” is being used to display news content. The functions passed to those actions, the “news_masonry_template_” functions, would print the markup before the news items, print the news items themselves, and print the markup after the news items, respectively. Each action is generated dynamically by the plugin, based on registered layout IDs. The final line of code registers the “masonry” layout in the plugin’s available list of layouts. The “add_masonry_layout” function would push a layout ID and name to an array used by the plugin and return it.
  30. Jo I mentioned earlier that we have a lot of new plugins to build--in addition to the news and events plugins, we’re planning on building a suite of plugins for stuff that we tend to use frequently in our themes. These range from basic WordPress content definitions, like post types and taxonomies, to plugins that replace some of the theme tools we mentioned earlier, like our shortcode GUI, to plugins that integrate with other services we manage, like our search service, weather feed, and campus map. By building out plugins like this, particularly for existing services, we gain the added benefit of promoting our centralized data sources, and reducing data duplication across sites.
  31. Jo But we don’t plan on trying to build *everything* ourselves. It’s not in our best interest to re-invent the wheel, especially when other developers have created tools that accomplish much of what we need already. We are, however, pretty strict with the third-party plugins we install. Most undergo code reviews and testing by our team before being activated in our production environments. Doing this helps us stay ahead of performance issues and potential bugs, and prevents us from wildly activating plugins and ending up with plugin bloat.
  32. Jo On the last slide, we mentioned using the Advanced Custom Fields plugin. In terms of modularization, ACF is pretty powerful—by defining meta box and meta fields separately from the custom post type plugins we’re building, our custom post types become much more flexible and reusable across sites. When you’re creating a new custom post type, it’s easy to think of that post type as the combination of the post type itself and whatever custom meta boxes and fields you assign to it. Generally, one of the biggest reasons for creating a new post type is to be able to save some extra data to those posts that built-in post types aren’t capable of doing. However, by using a plugin such as ACF to define meta fields for a post type separately, post type definitions become more reusable and scalable for a larger number of sites. For example, one site could utilize a “Person” post type with meta fields for an email address and phone number, while another site could use the same “Person” post type but with a field for the person’s address instead. Both sites would use the same plugins but with different ACF configurations. Again, the goal is to find the right balance between reusability and practicality. We’re looking to split out re-usable chunks of logic into plugins where we can, without ending up with too many moving dependencies and parts. *segue to Jim*
  33. Jim
  34. Jim
  35. Jim
  36. Jim
  37. Jim
  38. Both
  39. Jo In conclusion, developing sites for WordPress in a DRY way requires a different approach to both code and the way you and your team approach site development. Ultimately, despite some of the shortcomings of the WordPress ecosystem, it is possible to modularize your code and stop repeating yourself. But your mileage may vary! There may be other techniques that work better for you and your team. We hope our experience with transitioning our codebase can provide some helpful insight into how your team approaches WordPress development. If you’re interested in the work we’ve done so far, it’ll be available publicly on Github. Thank you!
  40. Both