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.
HELLO!
I am Rajeeb Banstola
You can find me at @RajeebTheGreat
I work at @ThemeGrill
Better
WordPress
Theme
Development
Workflow
“Too Many Tools, Too Much to
Learn, Not Enough Time.
1. Starter Theme
2. Task Runner
3. LiveReload
4. Deploy using Git
5. CSS Preprocessor
6. Git Shortcuts
7. Offline Document...
Why?
Saves Time
Time == $$
Time == Freedom
How do I Integrate
these tools in my
workflow?
1. Note down the process
2. Identify the points where I can use those tools.
Story
Time
Use Git
Problems with Current
Approach to Developing New
Theme
Coding from Scratch
1. Repetitive
2. Time Consuming
Using finished ...
1. Building
and using
own
starter
Theme
Create your own
Starter Theme
1. Your Coding Style
2. Your Common
Codes
3. More accessibility
features
CSS/JS Best Practices
▸Minify number of HTTP request
▸Minify the size of downloaded
file
▸Make JavaScript function and
var...
2. Best
Practices &
Contradiction
Gulp
Built On:
Task Runners Come to
Rescue here!
▸ Uses npm packages
to run tasks
▸ Create Tasks in
Gulpfile.js
▸ Add Gulp...
Gulp Styles Task Example
1. Complies SCSS
2. Runs through
autoprefixer (
CanIUse.com
Database )
3. Minifies CSS
4. Renames...
Gulp Scripts Task Example
1. Concat files at
given directory
2. Minifies the
concatenated file
3. Renames the file
3. Hitting
F5 button
everytime
you make
changes
Gulp Watch Task Example
1. Watches for
Changes
2. Runs appropriate
tasks
3. Automatically
refreshes the
browser
What’s wrong with FTP?
▸Too Slow
▸Tempting to make live changes
on server
▸No version control
4. Deploy
using Git
and
PHPloy
Deploy using
PHPloy
1. Works with Git
2. Deploying as
simple as
writing “phploy”
on command
line
5. CSS
Preproces
sor
Partials, Variables,
Nesting
● Divide your CSS into
Logical Sections
● Easy to change
things with variable
● Better Code
R...
Partials
Divide your CSS
into Logical
Sections
Variable
s
Define variable
on SCSS file to
use later
Nesting
write selectors
that mimic the
structure of
your HTML
6. Git
Aliases
Automate
Repetitive Git
Tasks
Set handy shortcuts
for your git
commands
7. Offline
Documentation
HTML/CSS, JS, PHP,
WordPress
Documentation
Offline
Dash for Mac
Zeal for Windows
and Linux
8. Easy POT
File
Get rid of POEdit
Create .POT files with
task runners ( Gulp )
Package: Gulp-WP-
POT
9. Varying
Vagrant
Vagrants
Development
environment for
WordPress
Works with:
Virtualization
Software like
Virtualbox
Final Workflow
▸Run vagrant up
▸Clone starter theme
▸A lot of Git commit & Gulp
Watch
▸Deploy the code using PHPloy
References:
1. https://www.atlassian.com/git/tutorials/
2. https://github.com/RajeebTheGreat/_s/tree/gulp
3. https://codea...
THANKS!
Any questions?
You can find me at @RajeebTheGreat
Special thanks to all the people who made and released these awesome
resources for free:
▸ Simple line icons by Mirko Mont...
Better WordPress Theme Development Workflow
Better WordPress Theme Development Workflow
Better WordPress Theme Development Workflow
Better WordPress Theme Development Workflow
Better WordPress Theme Development Workflow
Better WordPress Theme Development Workflow
Better WordPress Theme Development Workflow
Upcoming SlideShare
Loading in …5
×

Better WordPress Theme Development Workflow

2,117 views

Published on

Presentation Slides of WordCamp Nepal 2015

Published in: Internet
  • Be the first to comment

Better WordPress Theme Development Workflow

  1. 1. HELLO! I am Rajeeb Banstola You can find me at @RajeebTheGreat I work at @ThemeGrill
  2. 2. Better WordPress Theme Development Workflow
  3. 3. “Too Many Tools, Too Much to Learn, Not Enough Time.
  4. 4. 1. Starter Theme 2. Task Runner 3. LiveReload 4. Deploy using Git 5. CSS Preprocessor 6. Git Shortcuts 7. Offline Documentation 8. Easy POT File 9. Vagrant Local Environment Overview
  5. 5. Why?
  6. 6. Saves Time
  7. 7. Time == $$ Time == Freedom
  8. 8. How do I Integrate these tools in my workflow? 1. Note down the process 2. Identify the points where I can use those tools.
  9. 9. Story Time
  10. 10. Use Git
  11. 11. Problems with Current Approach to Developing New Theme Coding from Scratch 1. Repetitive 2. Time Consuming Using finished theme 1. Undoing old work 2. Often ends up with codes you don’t need for new theme
  12. 12. 1. Building and using own starter Theme
  13. 13. Create your own Starter Theme 1. Your Coding Style 2. Your Common Codes 3. More accessibility features
  14. 14. CSS/JS Best Practices ▸Minify number of HTTP request ▸Minify the size of downloaded file ▸Make JavaScript function and variable names descriptive
  15. 15. 2. Best Practices & Contradiction
  16. 16. Gulp Built On: Task Runners Come to Rescue here! ▸ Uses npm packages to run tasks ▸ Create Tasks in Gulpfile.js ▸ Add Gulp packages in Package.json
  17. 17. Gulp Styles Task Example 1. Complies SCSS 2. Runs through autoprefixer ( CanIUse.com Database ) 3. Minifies CSS 4. Renames the file
  18. 18. Gulp Scripts Task Example 1. Concat files at given directory 2. Minifies the concatenated file 3. Renames the file
  19. 19. 3. Hitting F5 button everytime you make changes
  20. 20. Gulp Watch Task Example 1. Watches for Changes 2. Runs appropriate tasks 3. Automatically refreshes the browser
  21. 21. What’s wrong with FTP? ▸Too Slow ▸Tempting to make live changes on server ▸No version control
  22. 22. 4. Deploy using Git and PHPloy
  23. 23. Deploy using PHPloy 1. Works with Git 2. Deploying as simple as writing “phploy” on command line
  24. 24. 5. CSS Preproces sor
  25. 25. Partials, Variables, Nesting ● Divide your CSS into Logical Sections ● Easy to change things with variable ● Better Code Readability
  26. 26. Partials Divide your CSS into Logical Sections
  27. 27. Variable s Define variable on SCSS file to use later
  28. 28. Nesting write selectors that mimic the structure of your HTML
  29. 29. 6. Git Aliases
  30. 30. Automate Repetitive Git Tasks Set handy shortcuts for your git commands
  31. 31. 7. Offline Documentation
  32. 32. HTML/CSS, JS, PHP, WordPress Documentation Offline Dash for Mac Zeal for Windows and Linux
  33. 33. 8. Easy POT File
  34. 34. Get rid of POEdit Create .POT files with task runners ( Gulp ) Package: Gulp-WP- POT
  35. 35. 9. Varying Vagrant Vagrants
  36. 36. Development environment for WordPress Works with: Virtualization Software like Virtualbox
  37. 37. Final Workflow ▸Run vagrant up ▸Clone starter theme ▸A lot of Git commit & Gulp Watch ▸Deploy the code using PHPloy
  38. 38. References: 1. https://www.atlassian.com/git/tutorials/ 2. https://github.com/RajeebTheGreat/_s/tree/gulp 3. https://codeable.io/community/speed-up-your- theme-development-with-gulp/ 4. https://github.com/banago/PHPloy 5. https://scotch.io/tutorials/getting-started-with- sass 6. https://git-scm.com/book/en/v2/Git-Basics-Git- Aliases 7. https://zealdocs.org/ 8. https://www.npmjs.com/package/gulp-wp-pot 9. https://github.com/Varying-Vagrant- Vagrants/VVV
  39. 39. THANKS! Any questions? You can find me at @RajeebTheGreat
  40. 40. Special thanks to all the people who made and released these awesome resources for free: ▸ Simple line icons by Mirko Monti ▸ E-commerce icons by Virgil Pana ▸ Streamline iconset by Webalys ▸ Presentation template by SlidesCarnival ▸ Photographs by Death to the Stock Photo (license) ▸ Photographs by Unsplash (license) Credits

×