Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Stop Repeating Yourself: Modularized WordPress Development

722 views

Published on

Bring D.R.Y. programming concepts to your WordPress development by separating theme and plugin code.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Stop Repeating Yourself: Modularized WordPress Development

  1. 1. Stop Repeating Yourself MODULARIZED WORDPRESS DEVELOPMENT #DPA5
  2. 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. 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
  4. 4. HEW2016 — #DPA5 SLIDE 4
  5. 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. 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. 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
  8. 8. ! 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
  9. 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. 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
  11. 11. D.R.Y. Don’t Repeat Yourself HEW2016 — #DPA5 SLIDE 11
  12. 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. 13. Challenges with the “WordPress Way” • Dependency management • Heavy per-site customizations, in bulk • Plugin bloat • Minified asset delivery HEW2016 — #DPA5 SLIDE 13
  14. 14. HEW2016 — #DPA5 SLIDE 14 ( REDUCE Time to Distribute Bug Fixes
  15. 15. HEW2016 — #DPA5 SLIDE 15 / CONSOLIDATE Similar Features and Logic Across Our Themes
  16. 16. HEW2016 — #DPA5 SLIDE 16 0 MODERNIZE Our Codebase
  17. 17. HEW2016 — #DPA5 SLIDE 17 1 STANDARDIZE Plugin Dependency Management For Themes and Other Plugins
  18. 18. HEW2016 — #DPA5 SLIDE 18 2 DISTRIBUTE Resources for Developers and Non-Developers Across Campus
  19. 19. HEW2016 — #DPA5 SLIDE 19 3 PROMOTE Best Practices
  20. 20. How do we stop repeating ourselves? HEW2016 — #DPA5 SLIDE 20
  21. 21. ! 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
  22. 22. ! News " Events # People $ Carousel % Theme Code % Theme Code % Theme Code % Theme Code % Theme Code HEW2016 — #DPA5 SLIDE 22
  23. 23. Separate theme functionality from plugin functionality HEW2016 — #DPA5 SLIDE 23
  24. 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. 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. 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. 27. Example Plugins UCF News UCF Events HEW2016 — #DPA5 SLIDE 27
  28. 28. Example Plugins HEW2016 — #DPA5 SLIDE 28
  29. 29. Example Plugins HEW2016 — #DPA5 SLIDE 29
  30. 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. 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. 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. 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. 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. 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. 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. 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. 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. 39. Utilize a plugin + theme dependency management system HEW2016 — #DPA5 SLIDE 39
  40. 40. Dependency Management • Avoid unnecessary dependencies • Simple plugin detection • SemVer plugin detection – In Development HEW2016 — #DPA5 SLIDE 40
  41. 41. Theme Development • Focused on: • Layout (Templates) • Styling • Content • Dependency Management • Fail gracefully • Handle dependencies through deployment process HEW2016 — #DPA5 SLIDE 41
  42. 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. 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
  44. 44. Questions? HEW2016 — #DPA5 SLIDE 44
  45. 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. 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

×