Better WordPress Theme Development Workflow
Download as PPTX, PDF5 likes2,479 views
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.
Better WordPress Theme Development Workflow
- 2. HELLO! I am Rajeeb Banstola You can find me at @RajeebTheGreat I work at @ThemeGrill
- 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
- 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
- 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
- 27. Deploy using PHPloy 1. Works with Git 2. Deploying as simple as writing “phploy” on command line
- 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
- 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
- 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