This is a presentation for Improving word press theme development workflow.

1. Improving WordPress Theme
Development Workflow

2. Development Environment
1. Install Docker CE (Community Edition)
2. Create docker-compose.yml
3. docker-compose up -d
4. docker ps

3. docker-compose.yml

4. Node Package Manager
npm is a package manager for the JavaScript programming language. It is the default package
manager for the JavaScript runtime environment Node.js. It consists of a command line client, also
called npm, and an online database of public and paid-for private packages, called the npm registry.
With NPM we can install : -
● Task Runners
● Sass/Scss/LeSS Compiler
● Babel
● And many more ;)

5. Task Runners
A task runner a program that can execute tasks based on specific criteria. Common usages are to set
up a task that runs every time a certain file is changed (or group of files) so you don't have to explicitly
recompile every time, or to restart a server every time you restart the database.

6. Gulp
Requirement NPM installed that comes with Node.js.
● > npm install gulp -g
● > npm init
● > npm install gulp --save-dev
● > npm install node-sass gulp-sass --save-dev

7. Sample gulpfile.js

8. Gulp + Sass

9. Emmet

10. SCSS/LESS

11. Git
Git is a distributed version-control system for tracking changes in source code during software
development. It is designed for coordinating work among programmers, but it can be used to track
changes in any set of files. Its goals include speed, data integrity, and support for distributed, non-
linear workflows.
Push Karo Khush Raho

12. Github + Travis CI
➔ Check out the code
➔ Build the code
➔ Run tests
➔ Automate deployment
➢ Travis run our unit tests for every push and every pull request.
● ( https://docs.travis-ci.com/user/tutorial/ )
● ( https://github.com/Automattic/_s/blob/master/.travis.yml )

13. Sample .travis.yml

14. Start loving CLI ❤️
Installing Plugins/Themes from WordPress Dashboard
WordPress Dashboard > Plugins > Add New > Search Plugin > Press Install Button ( Now Wait for
installation ~_~ ) > Click Activate. x4 for installing four plugins
Installing Plugins/Themes using WP-CLI
> wp plugin search xyz
> wp install monster-widget query-monitor debug-info block-unit-test --activate

15. Create POT File in second with WP-CLI
> wp i18n make-pot . languages/my-theme.pot

16. Theme Test
● Plugins
○ Query Monitor By John Blackbourn.
○ Debug This By MachoThemes.
○ Debug Bar By wordpressdotorg
○ Monster Widget By Automattic.
○ Block Unit Test for Gutenberg By Rich Tabor.
● Theme Unit Test Data https://github.com/WPTRT/theme-unit-test .
● Code is Poetry PHPCS for writing clean and beautiful code.

17. WordPress Gulp Workflow
https://github.com/ahmadawais/WPGulp

18. WPGULP
# 1— Install WPGulp in your WordPress theme/plugin.
> npx wpgulp
# 2— Now configure variables inside the `wpgulp.config.js` file.
# 3— Start your npm build workflow.
> npm start

19. What it can do?
● Auto browser reloading.
● SCSS Compiler on save.
● One command to compress all images in theme.
● One command to create pot file.
● One command for RTL stylesheets generator.
● You can customize WPGulp as you want.

20. Why WPGulp?
● WPGulp is Open Source Project.
● Awesome folks contributed in WPGULP.
● Just one command to get start.
● It will save your time that you invest in doing setup of your Workflow.
● Lots of features.
● Always Updated.

21. Resources
● https://make.wordpress.org/cli/handbook/installing/
● http://bit.ly/33pOVhH ( Docker Compose File:- WordPress + PhpMyAdmin + WP-CLI)
● https://github.com/ahmadawais/WPGulp
● https://github.com/WordPress/WordPress-Coding-Standards
● https://deliciousbrains.com/deploying-wordpress-plugins-travis/
● https://www.slideshare.net/HardeepAsrani/automating-wordpress-theme-development

22. Any Question?

24. My Name is Naveen Kharwar.
➔ From Varanasi.
➔ WordPress and Gatsby Developer.
➔ WordPress Contributor.
➔ Part of Varanasi Foss and WordPress Varanasi
Community
https://twitter.com/naveenkharwar0