no more cowboy coding: modern wordpress development workflow that scales
TRANSCRIPT
No More Cowboy CodingUsing a Modern WordPress Development Workflow
by Tom Howard of DigitalEngine.io
WordPress Powers 27% of the internet
As of Nov. 2016
Gaining avg. 2.5% points yearly
Source: W3Techs
WordPress Powers 27% of the internet
As of Nov. 2016 Source: W3Techs
Greater than British Empire at peak! ! (23.8% of world)
Yet So Many Basic Problems• Slow site loading
• Easily preventable hacks
• Content sometimes disappears
• Code randomly breaks
• Glitchy designs
These problems are symptoms of the past
The solution? Modernize your WP stack!
Simple Concepts To Make WP Modern
💻 Code Locally
🚩 Version Control
🗃 Code Organization
🛠 Build Tools
🖼 View & Logic Separation
Code Locally
• Never change code on the server!
• Get it working on local machine • Then move to server
Your Computer
Server
Code
ResourcesMac: MAMP Windows: VVV Advanced: Trellis
Version Control: Git• Never lose code
• Easily revert back
• Quickly deploy code (no more FTP)
• Solves most beginner WP problems
Get started with git
Code Organization
Stay DRY!(Don’t Repeat Yourself)
• Template files with single purpose can be re-used everywhere
• Break code into components
• Use WP’s get_template_part
Build Tools: CSS Pre-processing
• Nested CSS selectors, not long hand
• Variables, no repeated value
• Functions & “Mixins”, no repeated code (DRY!)
• Separate component files instead of one big messy file
• Compile to 1 minified, optimized file
ResourcesSASS LESS
Build Tools: Task Runner
• CSS Preprocessing
• Optimize JS assets
• Validate CSS & JS code
• Optimize Image assets
• Manage dev/deploy file structure
ResourcesGrunt.js Gulp.js
View & Logic Separation
Twig + Timber!
• Retrieve data & logic in .php timber files
• Presentation in .twig template file
Bringing it all together
Starter Themes!
• Sage by roots.ioBower + Gulp + SCSS + More
• Fabrica Gulp + PostCSS + Twig + Timber
Hosting!
Beginner: WP Engine
Advanced: Pantheon
High Traffic: Digital Engine WP Hosting (my company)
Good hosting can solve workflow issues
Taking it to the next level
12 factor WordPress, the same modern principles Heroku uses for scaling web apps
Executing Node.js + React.js in WP PHP code! NodifyWP
We can bring WordPress out of the past!Slides at http://digitalengine.io/modern-wordpress-
development-workflow-talk/