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.
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 worl...
Yet So Many Basic Problems
• Slow site loading
• Easily preventable
hacks
• Content sometimes
disappears
• Code randomly b...
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 Separa...
Code Locally
• Never change code on the
server!
• Get it working on local machine
• Then move to server
Your
Computer
Serv...
Version Control: Git
• Never lose code
• Easily revert back
• Quickly deploy code (no more
FTP)
• Solves most beginner WP
...
Code Organization
Stay DRY!

(Don’t Repeat Yourself)
• Template files with single
purpose can be re-used
everywhere
• Break...
Build Tools:
CSS Pre-processing
• Nested CSS selectors, not long
hand
• Variables, no repeated value
• Functions & “Mixins...
Build Tools:
Task Runner
• CSS Preprocessing
• Optimize JS assets
• Validate CSS & JS code
• Optimize Image assets
• Manag...
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 +...
Hosting!
Beginner: WP Engine
Advanced: Pantheon
High Traffic: Digital Engine WP Hosting
(my company)
Good hosting can solve...
Taking it to the next level
12 factor WordPress,
the same modern
principles Heroku uses
for scaling web apps
Executing Nod...
We can bring WordPress out of the past!
Slides at http://digitalengine.io/modern-wordpress-
development-workflow-talk/
You’ve finished this document.
Download and read it offline.
Upcoming SlideShare
Develop your own word press theme (overview)
Next
Upcoming SlideShare
Develop your own word press theme (overview)
Next
Download to read offline and view in fullscreen.

Share

No More Cowboy Coding: Modern WordPress Development Workflow That Scales

Download to read offline

WordPress now powers over 27% of the internet, yet WordPress development practices and tech infrastructure are still stuck in the past.

If you are tired of bloated themes, losing code, slow sites, strange server bugs, and other WP headaches, this talk is for you.

Learn how to implement modern development practices and tech stacks like those in use at AirBnB and Facebook.

Resource links: http://digitalengine.io/modern-wordpress-development-workflow-talk/

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

No More Cowboy Coding: Modern WordPress Development Workflow That Scales

  1. 1. No More Cowboy Coding Using a Modern WordPress Development Workflow by Tom Howard of DigitalEngine.io
  2. 2. WordPress Powers 27% of the internet As of Nov. 2016 Gaining avg. 2.5% points yearly Source: W3Techs
  3. 3. WordPress Powers 27% of the internet As of Nov. 2016 Source: W3Techs Greater than British Empire at peak! ! (23.8% of world)
  4. 4. Yet So Many Basic Problems • Slow site loading • Easily preventable hacks • Content sometimes disappears • Code randomly breaks • Glitchy designs
  5. 5. These problems are symptoms of the past The solution? Modernize your WP stack!
  6. 6. Simple Concepts To Make WP Modern 💻 Code Locally 🚩 Version Control 🗃 Code Organization 🛠 Build Tools 🖼 View & Logic Separation
  7. 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. 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. 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. 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. 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. 12. View & Logic Separation Twig + Timber! • Retrieve data & logic in .php timber files • Presentation in .twig template file
  13. 13. Bringing it all together Starter Themes! • Sage by roots.io
 Bower + Gulp + SCSS + More • Fabrica
 Gulp + PostCSS + Twig + Timber
  14. 14. Hosting! Beginner: WP Engine Advanced: Pantheon High Traffic: Digital Engine WP Hosting (my company) Good hosting can solve workflow issues
  15. 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. 16. We can bring WordPress out of the past! Slides at http://digitalengine.io/modern-wordpress- development-workflow-talk/
  • ugommirikwe

    Feb. 11, 2017
  • ThomasHoward2

    Dec. 8, 2016
  • wahyu_taufiq

    Nov. 19, 2016

WordPress now powers over 27% of the internet, yet WordPress development practices and tech infrastructure are still stuck in the past. If you are tired of bloated themes, losing code, slow sites, strange server bugs, and other WP headaches, this talk is for you. Learn how to implement modern development practices and tech stacks like those in use at AirBnB and Facebook. Resource links: http://digitalengine.io/modern-wordpress-development-workflow-talk/

Views

Total views

994

On Slideshare

0

From embeds

0

Number of embeds

229

Actions

Downloads

3

Shares

0

Comments

0

Likes

3

×