Improving Development Workflow with Your Own Framework

We’ve realized mind-blowing efficiency gains that have led to more profitable projects and happier developers by building our own WordPress website framework, and we’d like to share it with the community. This isn’t a new concept by any means, but we hope to encourage you to finally take the time and invest in a flexible framework (or use ours) that is lean and gives you a big head start on your WordPress development projects. We’ll tour the framework, discuss technologies and concepts it’s based upon (Bootstrap grid, ACF, etc.), customization, and how it’s influenced our design and development process.

Transcript

1. I M P R O V I N G D E V E L O P M E N T E F F I C I E N C Y W I T H Y O U R O W N F R A M E W O R K W O R D C A M P S T L O U I S 2 0 1 8 Heather Acton | @heatheracton
3. W H Y W E B U I LT O U R O W N F R A M E W O R K Heather Acton | @heatheracton
4. I N C R E A S E P R I C E S A N D / O R W O R K M O R E E F F I C I E N T LY Heather Acton | @heatheracton How can website development be more profitable?
5. T H E F I N A N C I A L I M PA C T O F E F F I C I E N C Y Heather Acton | @heatheracton Our effective hourly rate jumped from $63 to $78. That’s a 25% increase in efficiency, and $28,800 more in our pocket each year, per developer.
6. T H E R E S U LT O F O U R F R A M E W O R K Heather Acton | @heatheracton
7. O U R F R A M E W O R K - F R O N T E N D • Header • Editable logo, primary and secondary menus • Disappearing/reappearing header • ”Blocks” inventory page, with a nice fade-in effect • Standard content page • Blog archive and single post (AddThis ready) • Contact page with form • Privacy Policy • Footer • Editable logo, social links, footer menu, address • Login screen with customizable logo
8. O U R F R A M E W O R K - T H E M E • Based on modular design / development process • A List Apart - The Language of Modular Design • Naming convention according to “blocks” • SASS files, template parts, and ACF layouts have matching names • Underscores, SASSified • Bootstrap Grid • ACF JSON • Slick Slider
9. O U R F R A M E W O R K - T H E M E C O N T. • functions.php has some nice features • Additional image sizes • Additional menus • Custom excerpt read more • Cache buster for local development • Custom formats for Tiny MCE - 2 button styles • Rearrange admin menu • Easy way to turn off comments • Clean up admin dashboard • And more…
10. O U R F R A M E W O R K - P L U G I N S • ACF Pro (& Theme Code Pro add-on) • Migrate DB Pro (& Media Files add-on) • Gravity Forms • WordPress SEO by Yoast • Google Analytics for WordPress by MonsterInsights • Show Current Template • Transients Manager • Breadcrumbs NavXT
11. O U R F R A M E W O R K - W O R K F L O W • Copy sandbox install on remote server to start our new development site • Start a new local WordPress install for the development site • Download the theme and plugins from the remote development site • WP Migrate DB Pro pull from the remote development site (media files too) • Set up version control (local/remote/deployment) • Change references to “CH2” in the theme to client’s identity • Customize existing elements to client specs, then move into client specific custom blocks
12. O U R F R A M E W O R K - S A M P L E S • Vermont Mountain Bike Association • Washing Systems International • Camp Kawaga for Boys • Globalphile • YumUniversity • O&O Academy USA
13. O U R F R A M E W O R K - W H AT ’ S N E X T • Guten-ready version • Add EU required items - cookie acceptance and GDPR consent • Utilize Iubenda for Privacy Policy (current is not GDPR-ready) • Continue to add nice JS effects that aren’t too weighty, and are used on most client projects • Add a “team” block and single team member view • Clean up SASS - client specific scss file is a possibility • Integrate WooCommerce, likely in a separate version or in a way that doesn’t make every site carry around Woo stuff
14. R E S O U R C E S Heather Acton | @heatheracton • Joshua’s “Legos for Developers” talk at 2pm • Download current version of our theme (ACF Pro required) • A List Apart - The Language of Modular Design • https://alistapart.com/article/language-of-modular-design • ACF JSON • https://www.advancedcustomfields.com/resources/local- json/ • https://www.advancedcustomfields.com/resources/local- json/
15. D I S C U S S I O N Heather Acton | @heatheracton