Improving WordPress Theme Development Workflow - Naveen Kharwar.
- 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
- 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
- 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 )
- 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.
- 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
Editor's Notes
- #2: Hi everyone, I am Naveen Kharwar and I am just another WordPress Developer from Varanasi, it’s a great honor for me to discuss about my WordPress development workflow. English mein me itna hi rat ke aaya tha... Toh aaplogo mein se kitne logo ne Wordpress themes install