Custom WordPress Theme development toolset & workflow

Transcript

1. Custom WordPress Theme development toolset & workflow Armands Dziļums armandsdz@parks.lv @armandsdz WordPress Latvia meetup October 2017
2. Image from https://www.templatemonster.com/blog/how-to-choose-a-wordpress-theme/ Why Custom WordPress Theme?
3. Free WordPress Theme Premium WordPress Theme Custom built WordPress Theme Why custom? Main options when creating a WordPress website
4. Image from https://thewhitelabelagency.com/custom-wordpress-theme-vs-premium-theme/ Why custom?
5. Free WordPress theme Pros Cons FREE Limited capabilities / design / layout Possible to install without coding knowledge May be hard to add extra functionality or change design/layout (especially without coding knowledge) Many to choose from Why custom?
6. Pros Cons Usually good looking / fancy / premium design Costs (from 30$ - 100$ and up) Rich functionality May be bloated Easy to install & configure (not always) May be hard to add extra functionality or change design/layout (even with coding knowledge)..therefore cost may become larger than in case of custom built theme Many to choose from Premium WordPress theme Why custom?
7. Pros Cons Design & functionality adjusted to client needs May be costly (but not necessarily) Involves custom development as well as may involve requirement analysis & custom design Developer usually knows every line of code...or at least most of them Result completely depends on people involved ..therefore usually comparatively easy to add new functionality & catch bugs if any No reviews on internet Why custom? Custom built WordPress theme
8. Start from scratch Use a Starter Theme • Total control but everything needs to be done by developer • Many repetitive tasks are already done for you • If you are using quality Starter Theme you can learn from it how to structured and do things • Developer can get to creative & custom parts of development straight away Where to start? (let’s assume requirements gathering & design stages are already done)
9. Which Starter Theme to use? Where to start? Underscores https://underscores.me/ Bones https://themble.com/bones/ Sage https://roots.io/sage/ JointsWP http://jointswp.com/ FoundationPress https://foundationpress.olefredrik.com/
10. JointsWP jointswp.com
11. Main features of JointsWP JointsWP
12. JointsWP JointsWP Documentation
13. JointsWP JointsWP template out of the box
14. Clear Directory & File Structure JointsWP
15. Gulp tasks (out of the box) JointsWP
16. Tools & helpers
17. Browsersync browsersync.io Tools & helpers
18. IDE Integrated Development Environment a.k.a. PWYWC (Place Where You Write Code) Tools & helpers PhpStorm https://www.jetbrains.com/phpstorm NetBeans https://netbeans.org Sublime Text https://www.sublimetext.com/ Eclipse https://www.eclipse.org/ide/ Notepad++ https://notepad-plus-plus.org/
19. PhpStorm jetbrains.com/phpstorm Tools & helpers
20. Collaboration between Designers & Developers Tools & helpers Image from https://konceptapp.com/blog/desginer-vs-developer/
21. Zeplin zeplin.io Tools & helpers
22. Invision & Inspect invisionapp.com Tools & helpers
23. Front-end Cross Browser Testing BrowserStack https://www.browserstack.com Endtest http://endtest.io/ Browsershots http://browsershots.org/ Tools & helpers
24. BrowserStack browserstack.com Tools & helpers
25. What else? PHP Unit Testing PHP Debugging File Management Time Tracking Theme Unit Testing JavaScript Unit Testing DevTools CSS Testing Visual/CSS Regression Testing Sass / LESS Linting JavaScript Frameworks JavaScript Debugging
26. Closing thoughts Start small & easy Learn from code of others (Starter Themes, for example) Use tools that suit YOU & YOUR PROJECT best Know about the hype and cool new & shiny things web industry is playing with but don’t follow it blindly
27. Thank you! Questions? @ armandsdz@parks.lv @armandsdz