Rajeeb Banstola introduces himself and shares tips for improving a WordPress theme development workflow. This includes using tools like starter themes, task runners like Gulp, LiveReload, deploying with Git and PHPloy, CSS preprocessors, Git shortcuts, offline documentation, easy POT files, and Vagrant for local environments. The document recommends these techniques to save time and improve efficiency when developing WordPress themes.

2. HELLO!
I am Rajeeb Banstola
You can find me at @RajeebTheGreat
I work at @ThemeGrill

3. Better
WordPress
Theme
Development
Workflow

4. “Too Many Tools, Too Much to
Learn, Not Enough Time.

5. 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

6. Why?

7. Saves Time

8. Time == $$
Time == Freedom

9. How do I Integrate
these tools in my
workflow?
1. Note down the process
2. Identify the points where I can use those tools.

10. Story
Time

12. Use Git

13. 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

14. 1. Building
and using
own
starter
Theme

15. Create your own
Starter Theme
1. Your Coding Style
2. Your Common
Codes
3. More accessibility
features

16. CSS/JS Best Practices
▸Minify number of HTTP request
▸Minify the size of downloaded
file
▸Make JavaScript function and
variable names descriptive

17. 2. Best
Practices &
Contradiction

18. 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

19. Gulp Styles Task Example
1. Complies SCSS
2. Runs through
autoprefixer (
CanIUse.com
Database )
3. Minifies CSS
4. Renames the file

20. Gulp Scripts Task Example
1. Concat files at
given directory
2. Minifies the
concatenated file
3. Renames the file

22. 3. Hitting
F5 button
everytime
you make
changes

23. Gulp Watch Task Example
1. Watches for
Changes
2. Runs appropriate
tasks
3. Automatically
refreshes the
browser

25. What’s wrong with FTP?
▸Too Slow
▸Tempting to make live changes
on server
▸No version control

26. 4. Deploy
using Git
and
PHPloy

27. Deploy using
PHPloy
1. Works with Git
2. Deploying as
simple as
writing “phploy”
on command
line

28. 5. CSS
Preproces
sor

29. Partials, Variables,
Nesting
● Divide your CSS into
Logical Sections
● Easy to change
things with variable
● Better Code
Readability

30. Partials
Divide your CSS
into Logical
Sections

31. Variable
s
Define variable
on SCSS file to
use later

32. Nesting
write selectors
that mimic the
structure of
your HTML

33. 6. Git
Aliases

34. Automate
Repetitive Git
Tasks
Set handy shortcuts
for your git
commands

37. 7. Offline
Documentation

38. HTML/CSS, JS, PHP,
WordPress
Documentation
Offline
Dash for Mac
Zeal for Windows
and Linux

39. 8. Easy POT
File

40. Get rid of POEdit
Create .POT files with
task runners ( Gulp )
Package: Gulp-WP-
POT

42. 9. Varying
Vagrant
Vagrants

43. Development
environment for
WordPress
Works with:
Virtualization
Software like
Virtualbox

44. Final Workflow
▸Run vagrant up
▸Clone starter theme
▸A lot of Git commit & Gulp
Watch
▸Deploy the code using PHPloy

45. 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

46. THANKS!
Any questions?
You can find me at @RajeebTheGreat

47. 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