No More Cowboy Coding: Modern WordPress Development Workflow That Scales

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/