Designing and creating a base WordPress theme

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

9d852ad65e88b3836261a29d427849b2?s=128

Ngaire Ackerley

July 12, 2014
Tweet

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)
  26. None
  27. Testing •  Test Data (https://github.com/manovotny/wptest) •  Browsers (BrowserStack) •  Devices

    •  People •  Another developer •  Be picky!
  28. None
  29. None
  30. None
  31. None
  32. None
  33. None
  34. None
  35. None
  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