SlideShare a Scribd company logo
No More Cowboy Coding
Using 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
Resources
Mac: 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
Resources
SASS
LESS
Build Tools:
Task Runner
• CSS Preprocessing
• Optimize JS assets
• Validate CSS & JS code
• Optimize Image assets
• Manage dev/deploy file
structure
Resources
Grunt.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.io

Bower + 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/

More Related Content

What's hot

Scaling WordPress - WP on AWS
Scaling WordPress - WP on AWSScaling WordPress - WP on AWS
Scaling WordPress - WP on AWS
stk_jj
 
Creating Hyper Performant Web Apps with React
Creating Hyper Performant Web Apps with ReactCreating Hyper Performant Web Apps with React
Creating Hyper Performant Web Apps with React
Jp DeVries
 
Standardizing WordPress Workflow
Standardizing WordPress WorkflowStandardizing WordPress Workflow
Standardizing WordPress Workflow
Digital Strategy Works LLC
 
Training on iOS app development - Samesh Swongamikha & Neetin Sharma
Training on iOS app development - Samesh Swongamikha & Neetin SharmaTraining on iOS app development - Samesh Swongamikha & Neetin Sharma
Training on iOS app development - Samesh Swongamikha & Neetin Sharma
MobileNepal
 
Breaking the eggshell: From .NET to Node.js
Breaking the eggshell: From .NET to Node.jsBreaking the eggshell: From .NET to Node.js
Breaking the eggshell: From .NET to Node.js
Barbara Fusinska
 
Custom coded projects
Custom coded projectsCustom coded projects
Custom coded projects
Marko Heijnen
 
Running MongoDB in the Cloud
Running MongoDB in the CloudRunning MongoDB in the Cloud
Running MongoDB in the Cloud
Tony Tam
 
My Website Is Old Enough To Vote - Kris Howard
My Website Is Old Enough To Vote - Kris HowardMy Website Is Old Enough To Vote - Kris Howard
My Website Is Old Enough To Vote - Kris Howard
WordCamp Sydney
 
Front-End Tools and Workflows
Front-End Tools and WorkflowsFront-End Tools and Workflows
Front-End Tools and Workflows
Sara Vieira
 
A night at the spa
A night at the spaA night at the spa
A night at the spa
Chris Love
 
HTML/CSS for WordPress
HTML/CSS for WordPressHTML/CSS for WordPress
HTML/CSS for WordPress
Kanchha kaji Prajapati
 
Real World HTML5 + ASP.NET MVC - Lessons Learned
Real World HTML5 + ASP.NET MVC - Lessons LearnedReal World HTML5 + ASP.NET MVC - Lessons Learned
Real World HTML5 + ASP.NET MVC - Lessons Learned
Zoltán Dávid
 
Lightswitch
LightswitchLightswitch
Lightswitch
Robert MacLean
 
The Story of Automation
The Story of AutomationThe Story of Automation
The Story of Automation
99X Technology
 
Testing your Single Page Application
Testing your Single Page ApplicationTesting your Single Page Application
Testing your Single Page Application
Wekoslav Stefanovski
 
A Gentle Introduction to Functions-as-a-Service
A Gentle Introduction to Functions-as-a-ServiceA Gentle Introduction to Functions-as-a-Service
A Gentle Introduction to Functions-as-a-Service
Valeri Karpov
 
RubyConf Taiwan 2016 - Large scale Rails applications
RubyConf Taiwan 2016 - Large scale Rails applicationsRubyConf Taiwan 2016 - Large scale Rails applications
RubyConf Taiwan 2016 - Large scale Rails applications
Florian Dutey
 
RDS: Exciting & nerdy things you won't find in the whitepaper
RDS: Exciting & nerdy things you won't find in the whitepaperRDS: Exciting & nerdy things you won't find in the whitepaper
RDS: Exciting & nerdy things you won't find in the whitepaper
G2 Tech Group
 
DevOps essentials from Abel Wang and Steve Jones
DevOps essentials from Abel Wang and Steve JonesDevOps essentials from Abel Wang and Steve Jones
DevOps essentials from Abel Wang and Steve Jones
Red Gate Software
 
TallyJS #1 - Intro to AngularJS
TallyJS #1 - Intro to AngularJSTallyJS #1 - Intro to AngularJS
TallyJS #1 - Intro to AngularJS
Andrew Hart
 

What's hot (20)

Scaling WordPress - WP on AWS
Scaling WordPress - WP on AWSScaling WordPress - WP on AWS
Scaling WordPress - WP on AWS
 
Creating Hyper Performant Web Apps with React
Creating Hyper Performant Web Apps with ReactCreating Hyper Performant Web Apps with React
Creating Hyper Performant Web Apps with React
 
Standardizing WordPress Workflow
Standardizing WordPress WorkflowStandardizing WordPress Workflow
Standardizing WordPress Workflow
 
Training on iOS app development - Samesh Swongamikha & Neetin Sharma
Training on iOS app development - Samesh Swongamikha & Neetin SharmaTraining on iOS app development - Samesh Swongamikha & Neetin Sharma
Training on iOS app development - Samesh Swongamikha & Neetin Sharma
 
Breaking the eggshell: From .NET to Node.js
Breaking the eggshell: From .NET to Node.jsBreaking the eggshell: From .NET to Node.js
Breaking the eggshell: From .NET to Node.js
 
Custom coded projects
Custom coded projectsCustom coded projects
Custom coded projects
 
Running MongoDB in the Cloud
Running MongoDB in the CloudRunning MongoDB in the Cloud
Running MongoDB in the Cloud
 
My Website Is Old Enough To Vote - Kris Howard
My Website Is Old Enough To Vote - Kris HowardMy Website Is Old Enough To Vote - Kris Howard
My Website Is Old Enough To Vote - Kris Howard
 
Front-End Tools and Workflows
Front-End Tools and WorkflowsFront-End Tools and Workflows
Front-End Tools and Workflows
 
A night at the spa
A night at the spaA night at the spa
A night at the spa
 
HTML/CSS for WordPress
HTML/CSS for WordPressHTML/CSS for WordPress
HTML/CSS for WordPress
 
Real World HTML5 + ASP.NET MVC - Lessons Learned
Real World HTML5 + ASP.NET MVC - Lessons LearnedReal World HTML5 + ASP.NET MVC - Lessons Learned
Real World HTML5 + ASP.NET MVC - Lessons Learned
 
Lightswitch
LightswitchLightswitch
Lightswitch
 
The Story of Automation
The Story of AutomationThe Story of Automation
The Story of Automation
 
Testing your Single Page Application
Testing your Single Page ApplicationTesting your Single Page Application
Testing your Single Page Application
 
A Gentle Introduction to Functions-as-a-Service
A Gentle Introduction to Functions-as-a-ServiceA Gentle Introduction to Functions-as-a-Service
A Gentle Introduction to Functions-as-a-Service
 
RubyConf Taiwan 2016 - Large scale Rails applications
RubyConf Taiwan 2016 - Large scale Rails applicationsRubyConf Taiwan 2016 - Large scale Rails applications
RubyConf Taiwan 2016 - Large scale Rails applications
 
RDS: Exciting & nerdy things you won't find in the whitepaper
RDS: Exciting & nerdy things you won't find in the whitepaperRDS: Exciting & nerdy things you won't find in the whitepaper
RDS: Exciting & nerdy things you won't find in the whitepaper
 
DevOps essentials from Abel Wang and Steve Jones
DevOps essentials from Abel Wang and Steve JonesDevOps essentials from Abel Wang and Steve Jones
DevOps essentials from Abel Wang and Steve Jones
 
TallyJS #1 - Intro to AngularJS
TallyJS #1 - Intro to AngularJSTallyJS #1 - Intro to AngularJS
TallyJS #1 - Intro to AngularJS
 

Similar to No More Cowboy Coding: Modern WordPress Development Workflow That Scales

Building the next generation of themes with WP Rig 2.0
Building the next generation of themes with WP Rig 2.0Building the next generation of themes with WP Rig 2.0
Building the next generation of themes with WP Rig 2.0
Morten Rand-Hendriksen
 
WordPress Development Environments
WordPress Development EnvironmentsWordPress Development Environments
WordPress Development Environments
Josh Cummings
 
Introduction to node.js by jiban
Introduction to node.js by jibanIntroduction to node.js by jiban
Introduction to node.js by jiban
Jibanananda Sana
 
20120306 dublin js
20120306 dublin js20120306 dublin js
20120306 dublin js
Richard Rodger
 
Why ruby and rails
Why ruby and railsWhy ruby and rails
Why ruby and rails
Reuven Lerner
 
20120802 timisoara
20120802 timisoara20120802 timisoara
20120802 timisoara
Richard Rodger
 
Mongo DB at Community Engine
Mongo DB at Community EngineMongo DB at Community Engine
Mongo DB at Community Engine
Community Engine
 
MongoDB at community engine
MongoDB at community engineMongoDB at community engine
MongoDB at community engine
mathraq
 
Shift Remote: JS - Javascript Build Tools: Past & Beyond - Shedrack Akintayo
Shift Remote: JS - Javascript Build Tools: Past & Beyond - Shedrack Akintayo Shift Remote: JS - Javascript Build Tools: Past & Beyond - Shedrack Akintayo
Shift Remote: JS - Javascript Build Tools: Past & Beyond - Shedrack Akintayo
Shift Conference
 
Oxford DrupalCamp 2012 - The things we found in your website
Oxford DrupalCamp 2012 - The things we found in your websiteOxford DrupalCamp 2012 - The things we found in your website
Oxford DrupalCamp 2012 - The things we found in your website
hernanibf
 
SPS Monaco 2017 - The Lay of the Land of Client-Side Development circa 2017
SPS Monaco 2017 - The Lay of the Land of Client-Side Development circa 2017SPS Monaco 2017 - The Lay of the Land of Client-Side Development circa 2017
SPS Monaco 2017 - The Lay of the Land of Client-Side Development circa 2017
Marc D Anderson
 
Wessel Loth - Fire your Frontend Framework with Lit - TEQnation 2022.pdf
Wessel Loth - Fire your Frontend Framework with Lit - TEQnation 2022.pdfWessel Loth - Fire your Frontend Framework with Lit - TEQnation 2022.pdf
Wessel Loth - Fire your Frontend Framework with Lit - TEQnation 2022.pdf
Wessel Loth
 
Using WordPress for leading local newspaper websites
Using WordPress for leading local newspaper websitesUsing WordPress for leading local newspaper websites
Using WordPress for leading local newspaper websites
Christoph Daum
 
321 codeincontainer brewbox
321 codeincontainer brewbox321 codeincontainer brewbox
321 codeincontainer brewbox
Lino Telera
 
Staging and Deployment
Staging and DeploymentStaging and Deployment
Staging and Deployment
heyrocker
 
Super tools to boost productivity in React dev env!
Super tools to boost productivity in React dev env!Super tools to boost productivity in React dev env!
Super tools to boost productivity in React dev env!
Souvik Basu
 
Web technologies for desktop development @ berlinjs apps
Web technologies for desktop development @ berlinjs appsWeb technologies for desktop development @ berlinjs apps
Web technologies for desktop development @ berlinjs apps
Darko Kukovec
 
Real World Windows 8 Apps in JavaScript
Real World Windows 8 Apps in JavaScriptReal World Windows 8 Apps in JavaScript
Real World Windows 8 Apps in JavaScript
Domenic Denicola
 
11 Amazing things I Learnt At Word Camp Sydney 2014
11 Amazing things I Learnt At Word Camp Sydney 201411 Amazing things I Learnt At Word Camp Sydney 2014
11 Amazing things I Learnt At Word Camp Sydney 2014
WordPressBrisbane
 
Be faster then rabbits
Be faster then rabbitsBe faster then rabbits
Be faster then rabbits
Vladislav Bauer
 

Similar to No More Cowboy Coding: Modern WordPress Development Workflow That Scales (20)

Building the next generation of themes with WP Rig 2.0
Building the next generation of themes with WP Rig 2.0Building the next generation of themes with WP Rig 2.0
Building the next generation of themes with WP Rig 2.0
 
WordPress Development Environments
WordPress Development EnvironmentsWordPress Development Environments
WordPress Development Environments
 
Introduction to node.js by jiban
Introduction to node.js by jibanIntroduction to node.js by jiban
Introduction to node.js by jiban
 
20120306 dublin js
20120306 dublin js20120306 dublin js
20120306 dublin js
 
Why ruby and rails
Why ruby and railsWhy ruby and rails
Why ruby and rails
 
20120802 timisoara
20120802 timisoara20120802 timisoara
20120802 timisoara
 
Mongo DB at Community Engine
Mongo DB at Community EngineMongo DB at Community Engine
Mongo DB at Community Engine
 
MongoDB at community engine
MongoDB at community engineMongoDB at community engine
MongoDB at community engine
 
Shift Remote: JS - Javascript Build Tools: Past & Beyond - Shedrack Akintayo
Shift Remote: JS - Javascript Build Tools: Past & Beyond - Shedrack Akintayo Shift Remote: JS - Javascript Build Tools: Past & Beyond - Shedrack Akintayo
Shift Remote: JS - Javascript Build Tools: Past & Beyond - Shedrack Akintayo
 
Oxford DrupalCamp 2012 - The things we found in your website
Oxford DrupalCamp 2012 - The things we found in your websiteOxford DrupalCamp 2012 - The things we found in your website
Oxford DrupalCamp 2012 - The things we found in your website
 
SPS Monaco 2017 - The Lay of the Land of Client-Side Development circa 2017
SPS Monaco 2017 - The Lay of the Land of Client-Side Development circa 2017SPS Monaco 2017 - The Lay of the Land of Client-Side Development circa 2017
SPS Monaco 2017 - The Lay of the Land of Client-Side Development circa 2017
 
Wessel Loth - Fire your Frontend Framework with Lit - TEQnation 2022.pdf
Wessel Loth - Fire your Frontend Framework with Lit - TEQnation 2022.pdfWessel Loth - Fire your Frontend Framework with Lit - TEQnation 2022.pdf
Wessel Loth - Fire your Frontend Framework with Lit - TEQnation 2022.pdf
 
Using WordPress for leading local newspaper websites
Using WordPress for leading local newspaper websitesUsing WordPress for leading local newspaper websites
Using WordPress for leading local newspaper websites
 
321 codeincontainer brewbox
321 codeincontainer brewbox321 codeincontainer brewbox
321 codeincontainer brewbox
 
Staging and Deployment
Staging and DeploymentStaging and Deployment
Staging and Deployment
 
Super tools to boost productivity in React dev env!
Super tools to boost productivity in React dev env!Super tools to boost productivity in React dev env!
Super tools to boost productivity in React dev env!
 
Web technologies for desktop development @ berlinjs apps
Web technologies for desktop development @ berlinjs appsWeb technologies for desktop development @ berlinjs apps
Web technologies for desktop development @ berlinjs apps
 
Real World Windows 8 Apps in JavaScript
Real World Windows 8 Apps in JavaScriptReal World Windows 8 Apps in JavaScript
Real World Windows 8 Apps in JavaScript
 
11 Amazing things I Learnt At Word Camp Sydney 2014
11 Amazing things I Learnt At Word Camp Sydney 201411 Amazing things I Learnt At Word Camp Sydney 2014
11 Amazing things I Learnt At Word Camp Sydney 2014
 
Be faster then rabbits
Be faster then rabbitsBe faster then rabbits
Be faster then rabbits
 

Recently uploaded

怎么办理(umiami毕业证书)美国迈阿密大学毕业证文凭证书实拍图原版一模一样
怎么办理(umiami毕业证书)美国迈阿密大学毕业证文凭证书实拍图原版一模一样怎么办理(umiami毕业证书)美国迈阿密大学毕业证文凭证书实拍图原版一模一样
怎么办理(umiami毕业证书)美国迈阿密大学毕业证文凭证书实拍图原版一模一样
rtunex8r
 
办理毕业证(NYU毕业证)纽约大学毕业证成绩单官方原版办理
办理毕业证(NYU毕业证)纽约大学毕业证成绩单官方原版办理办理毕业证(NYU毕业证)纽约大学毕业证成绩单官方原版办理
办理毕业证(NYU毕业证)纽约大学毕业证成绩单官方原版办理
uehowe
 
Gen Z and the marketplaces - let's translate their needs
Gen Z and the marketplaces - let's translate their needsGen Z and the marketplaces - let's translate their needs
Gen Z and the marketplaces - let's translate their needs
Laura Szabó
 
一比一原版(USYD毕业证)悉尼大学毕业证如何办理
一比一原版(USYD毕业证)悉尼大学毕业证如何办理一比一原版(USYD毕业证)悉尼大学毕业证如何办理
一比一原版(USYD毕业证)悉尼大学毕业证如何办理
k4ncd0z
 
办理毕业证(UPenn毕业证)宾夕法尼亚大学毕业证成绩单快速办理
办理毕业证(UPenn毕业证)宾夕法尼亚大学毕业证成绩单快速办理办理毕业证(UPenn毕业证)宾夕法尼亚大学毕业证成绩单快速办理
办理毕业证(UPenn毕业证)宾夕法尼亚大学毕业证成绩单快速办理
uehowe
 
不能毕业如何获得(USYD毕业证)悉尼大学毕业证成绩单一比一原版制作
不能毕业如何获得(USYD毕业证)悉尼大学毕业证成绩单一比一原版制作不能毕业如何获得(USYD毕业证)悉尼大学毕业证成绩单一比一原版制作
不能毕业如何获得(USYD毕业证)悉尼大学毕业证成绩单一比一原版制作
bseovas
 
HijackLoader Evolution: Interactive Process Hollowing
HijackLoader Evolution: Interactive Process HollowingHijackLoader Evolution: Interactive Process Hollowing
HijackLoader Evolution: Interactive Process Hollowing
Donato Onofri
 
Ready to Unlock the Power of Blockchain!
Ready to Unlock the Power of Blockchain!Ready to Unlock the Power of Blockchain!
Ready to Unlock the Power of Blockchain!
Toptal Tech
 
Design Thinking NETFLIX using all techniques.pptx
Design Thinking NETFLIX using all techniques.pptxDesign Thinking NETFLIX using all techniques.pptx
Design Thinking NETFLIX using all techniques.pptx
saathvikreddy2003
 
存档可查的(USC毕业证)南加利福尼亚大学毕业证成绩单制做办理
存档可查的(USC毕业证)南加利福尼亚大学毕业证成绩单制做办理存档可查的(USC毕业证)南加利福尼亚大学毕业证成绩单制做办理
存档可查的(USC毕业证)南加利福尼亚大学毕业证成绩单制做办理
fovkoyb
 
快速办理(Vic毕业证书)惠灵顿维多利亚大学毕业证完成信一模一样
快速办理(Vic毕业证书)惠灵顿维多利亚大学毕业证完成信一模一样快速办理(Vic毕业证书)惠灵顿维多利亚大学毕业证完成信一模一样
快速办理(Vic毕业证书)惠灵顿维多利亚大学毕业证完成信一模一样
3a0sd7z3
 
[HUN][hackersuli] Red Teaming alapok 2024
[HUN][hackersuli] Red Teaming alapok 2024[HUN][hackersuli] Red Teaming alapok 2024
[HUN][hackersuli] Red Teaming alapok 2024
hackersuli
 
快速办理(新加坡SMU毕业证书)新加坡管理大学毕业证文凭证书一模一样
快速办理(新加坡SMU毕业证书)新加坡管理大学毕业证文凭证书一模一样快速办理(新加坡SMU毕业证书)新加坡管理大学毕业证文凭证书一模一样
快速办理(新加坡SMU毕业证书)新加坡管理大学毕业证文凭证书一模一样
3a0sd7z3
 
Discover the benefits of outsourcing SEO to India
Discover the benefits of outsourcing SEO to IndiaDiscover the benefits of outsourcing SEO to India
Discover the benefits of outsourcing SEO to India
davidjhones387
 
留学挂科(UofM毕业证)明尼苏达大学毕业证成绩单复刻办理
留学挂科(UofM毕业证)明尼苏达大学毕业证成绩单复刻办理留学挂科(UofM毕业证)明尼苏达大学毕业证成绩单复刻办理
留学挂科(UofM毕业证)明尼苏达大学毕业证成绩单复刻办理
uehowe
 
manuaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaal
manuaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaalmanuaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaal
manuaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaal
wolfsoftcompanyco
 
成绩单ps(UST毕业证)圣托马斯大学毕业证成绩单快速办理
成绩单ps(UST毕业证)圣托马斯大学毕业证成绩单快速办理成绩单ps(UST毕业证)圣托马斯大学毕业证成绩单快速办理
成绩单ps(UST毕业证)圣托马斯大学毕业证成绩单快速办理
ysasp1
 
Should Repositories Participate in the Fediverse?
Should Repositories Participate in the Fediverse?Should Repositories Participate in the Fediverse?
Should Repositories Participate in the Fediverse?
Paul Walk
 
办理新西兰奥克兰大学毕业证学位证书范本原版一模一样
办理新西兰奥克兰大学毕业证学位证书范本原版一模一样办理新西兰奥克兰大学毕业证学位证书范本原版一模一样
办理新西兰奥克兰大学毕业证学位证书范本原版一模一样
xjq03c34
 

Recently uploaded (19)

怎么办理(umiami毕业证书)美国迈阿密大学毕业证文凭证书实拍图原版一模一样
怎么办理(umiami毕业证书)美国迈阿密大学毕业证文凭证书实拍图原版一模一样怎么办理(umiami毕业证书)美国迈阿密大学毕业证文凭证书实拍图原版一模一样
怎么办理(umiami毕业证书)美国迈阿密大学毕业证文凭证书实拍图原版一模一样
 
办理毕业证(NYU毕业证)纽约大学毕业证成绩单官方原版办理
办理毕业证(NYU毕业证)纽约大学毕业证成绩单官方原版办理办理毕业证(NYU毕业证)纽约大学毕业证成绩单官方原版办理
办理毕业证(NYU毕业证)纽约大学毕业证成绩单官方原版办理
 
Gen Z and the marketplaces - let's translate their needs
Gen Z and the marketplaces - let's translate their needsGen Z and the marketplaces - let's translate their needs
Gen Z and the marketplaces - let's translate their needs
 
一比一原版(USYD毕业证)悉尼大学毕业证如何办理
一比一原版(USYD毕业证)悉尼大学毕业证如何办理一比一原版(USYD毕业证)悉尼大学毕业证如何办理
一比一原版(USYD毕业证)悉尼大学毕业证如何办理
 
办理毕业证(UPenn毕业证)宾夕法尼亚大学毕业证成绩单快速办理
办理毕业证(UPenn毕业证)宾夕法尼亚大学毕业证成绩单快速办理办理毕业证(UPenn毕业证)宾夕法尼亚大学毕业证成绩单快速办理
办理毕业证(UPenn毕业证)宾夕法尼亚大学毕业证成绩单快速办理
 
不能毕业如何获得(USYD毕业证)悉尼大学毕业证成绩单一比一原版制作
不能毕业如何获得(USYD毕业证)悉尼大学毕业证成绩单一比一原版制作不能毕业如何获得(USYD毕业证)悉尼大学毕业证成绩单一比一原版制作
不能毕业如何获得(USYD毕业证)悉尼大学毕业证成绩单一比一原版制作
 
HijackLoader Evolution: Interactive Process Hollowing
HijackLoader Evolution: Interactive Process HollowingHijackLoader Evolution: Interactive Process Hollowing
HijackLoader Evolution: Interactive Process Hollowing
 
Ready to Unlock the Power of Blockchain!
Ready to Unlock the Power of Blockchain!Ready to Unlock the Power of Blockchain!
Ready to Unlock the Power of Blockchain!
 
Design Thinking NETFLIX using all techniques.pptx
Design Thinking NETFLIX using all techniques.pptxDesign Thinking NETFLIX using all techniques.pptx
Design Thinking NETFLIX using all techniques.pptx
 
存档可查的(USC毕业证)南加利福尼亚大学毕业证成绩单制做办理
存档可查的(USC毕业证)南加利福尼亚大学毕业证成绩单制做办理存档可查的(USC毕业证)南加利福尼亚大学毕业证成绩单制做办理
存档可查的(USC毕业证)南加利福尼亚大学毕业证成绩单制做办理
 
快速办理(Vic毕业证书)惠灵顿维多利亚大学毕业证完成信一模一样
快速办理(Vic毕业证书)惠灵顿维多利亚大学毕业证完成信一模一样快速办理(Vic毕业证书)惠灵顿维多利亚大学毕业证完成信一模一样
快速办理(Vic毕业证书)惠灵顿维多利亚大学毕业证完成信一模一样
 
[HUN][hackersuli] Red Teaming alapok 2024
[HUN][hackersuli] Red Teaming alapok 2024[HUN][hackersuli] Red Teaming alapok 2024
[HUN][hackersuli] Red Teaming alapok 2024
 
快速办理(新加坡SMU毕业证书)新加坡管理大学毕业证文凭证书一模一样
快速办理(新加坡SMU毕业证书)新加坡管理大学毕业证文凭证书一模一样快速办理(新加坡SMU毕业证书)新加坡管理大学毕业证文凭证书一模一样
快速办理(新加坡SMU毕业证书)新加坡管理大学毕业证文凭证书一模一样
 
Discover the benefits of outsourcing SEO to India
Discover the benefits of outsourcing SEO to IndiaDiscover the benefits of outsourcing SEO to India
Discover the benefits of outsourcing SEO to India
 
留学挂科(UofM毕业证)明尼苏达大学毕业证成绩单复刻办理
留学挂科(UofM毕业证)明尼苏达大学毕业证成绩单复刻办理留学挂科(UofM毕业证)明尼苏达大学毕业证成绩单复刻办理
留学挂科(UofM毕业证)明尼苏达大学毕业证成绩单复刻办理
 
manuaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaal
manuaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaalmanuaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaal
manuaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaal
 
成绩单ps(UST毕业证)圣托马斯大学毕业证成绩单快速办理
成绩单ps(UST毕业证)圣托马斯大学毕业证成绩单快速办理成绩单ps(UST毕业证)圣托马斯大学毕业证成绩单快速办理
成绩单ps(UST毕业证)圣托马斯大学毕业证成绩单快速办理
 
Should Repositories Participate in the Fediverse?
Should Repositories Participate in the Fediverse?Should Repositories Participate in the Fediverse?
Should Repositories Participate in the Fediverse?
 
办理新西兰奥克兰大学毕业证学位证书范本原版一模一样
办理新西兰奥克兰大学毕业证学位证书范本原版一模一样办理新西兰奥克兰大学毕业证学位证书范本原版一模一样
办理新西兰奥克兰大学毕业证学位证书范本原版一模一样
 

No More Cowboy Coding: Modern WordPress Development Workflow That Scales

  • 1. No More Cowboy Coding Using a Modern WordPress Development Workflow by Tom Howard of DigitalEngine.io
  • 2. WordPress Powers 27% of the internet As of Nov. 2016 Gaining avg. 2.5% points yearly Source: W3Techs
  • 3. WordPress Powers 27% of the internet As of Nov. 2016 Source: W3Techs Greater than British Empire at peak! ! (23.8% of world)
  • 4. Yet So Many Basic Problems • Slow site loading • Easily preventable hacks • Content sometimes disappears • Code randomly breaks • Glitchy designs
  • 5. These problems are symptoms of the past The solution? Modernize your WP stack!
  • 6. Simple Concepts To Make WP Modern 💻 Code Locally 🚩 Version Control 🗃 Code Organization 🛠 Build Tools 🖼 View & Logic Separation
  • 7. Code Locally • Never change code on the server! • Get it working on local machine • Then move to server Your Computer Server Code Resources Mac: MAMP Windows: VVV Advanced: Trellis
  • 8. Version Control: Git • Never lose code • Easily revert back • Quickly deploy code (no more FTP) • Solves most beginner WP problems Get started with git
  • 9. 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
  • 10. 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 Resources SASS LESS
  • 11. Build Tools: Task Runner • CSS Preprocessing • Optimize JS assets • Validate CSS & JS code • Optimize Image assets • Manage dev/deploy file structure Resources Grunt.js Gulp.js
  • 12. View & Logic Separation Twig + Timber! • Retrieve data & logic in .php timber files • Presentation in .twig template file
  • 13. Bringing it all together Starter Themes! • Sage by roots.io
 Bower + Gulp + SCSS + More • Fabrica
 Gulp + PostCSS + Twig + Timber
  • 14. Hosting! Beginner: WP Engine Advanced: Pantheon High Traffic: Digital Engine WP Hosting (my company) Good hosting can solve workflow issues
  • 15. 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
  • 16. We can bring WordPress out of the past! Slides at http://digitalengine.io/modern-wordpress- development-workflow-talk/