Designing and creating a base WordPress theme

Presentation given at WordCamp Bournemouth (UK) in July 2014. This presentation is about the why and how of creating a base, client or starter theme. I talk about the processes I went through, various tools I used and other techniques in design and web development

Transcript

1. Creating a base theme Presented by Ngaire Ackerley @ngaireackerley http://designack.com http://lbdesign.tv
2. Who am I? •  Designer and WordPress Developer •  Travelling Kiwi •  Works at LBDesign •  WordPress website at http://designack.com •  Travel Blog on WordPress.com at http://kiwifootprints.com
3. What’s this all about? •  What is a base/client theme •  Why design a base/client theme? •  Process •  Designing •  Coding & Testing •  Future
4. What is a base/client theme?
5. Why design a base/client theme?
6. Saves time
7. Allow for lower budget builds
8. Easy to adjust
9. Coding style
10. Process
11. Planning   Designing   Testing   Coding   (Updates)  
12. Planning
13. Planning: What we want to achieve •  Simple theme •  Easily changeable •  Easy to build onto •  Deal with the common base templates •  Consider different standard layouts •  Has to be responsive •  Consider plugins, widgets etc.
14. Planning: Wireframes
15. Planning: Keep it Simple! •  Simple templates •  Easy to edit code •  Sass Variables •  ‘Bare bones’ functionality
16. Planning: Tools to use •  Sass •  Git/Bitbucket/Github app •  Sublime Text 2 •  Codekit •  BrowserStack •  Test Data •  Dev Tools and Firebug •  Asana for notes/reminders
17. Designing
18. Designing •  Wireframes – flesh out layouts •  Flexibility •  Responsive
19. Designing
20. Designing
21. Coding & Testing
22. Coding •  Templates – page/layouts – tag/archive/category – custom post types/taxonomies – single/single custom posts – author – header, footer …
23. Coding •  Templates
24. Coding •  Sass partials
25. Options •  Plugins •  Custom Post Types/Taxonomies •  Widgets – sidebar, footer •  Sliders, image galleries •  SEO •  Imports/Exports (Forms, ACF)
27. Testing •  Test Data (https://github.com/manovotny/wptest) •  Browsers (BrowserStack) •  Devices •  People •  Another developer •  Be picky!
36. Future •  As easy to edit as possible •  What works, what doesn’t work? •  Homepage templates •  Allow for custom design still
37. Thanks! Questions? @ngaireackerley http://designack.com ngaire@designack.com http://kiwifootprints.com ngaire@lbdesign.tv http://lbdesign.tv