Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Design in WordPress: Three files, unlimited layouts #wcstl

1,254 views

Published on

In WordPress, doing creative things with design can seem like a job for a coding superstar. But it's not - you just need to be willing to cut, paste and edit three files. Do that, and you can make a WordPress site look like anything you want!

Published in: Technology
  • Be the first to comment

Design in WordPress: Three files, unlimited layouts #wcstl

  1. 1. Three files, unlimited designs: Make your site look like anything in Genesis or Underscores.
  2. 2. 30 years a designer. My firm: Marginhancers. Site = brand foundation. Marketing : revenue as brand : margin.
  3. 3. Are you too old to learn to code?
  4. 4. Who’s here?
  5. 5. What does a WP site look like?
  6. 6. Some themes will do it for us.
  7. 7. Styling goes into themes. Functionality goes into plugins.
  8. 8. Let’s roll our own!
  9. 9. What’s a framework?
  10. 10. Two meanings: A drop-in code library that [helps us develop] a theme. A standalone base/starter theme that [we can either fork into another theme, or use as a] parent theme template.
  11. 11. The way I think of them: Bland-looking parent themes that actually do have most of the styles defined. We override with our designs - in child themes. Some, like Genesis, have a bunch of child themes you can buy and use – or even download for free.
  12. 12. PageLines.
  13. 13. Thesis.
  14. 14. Hybrid.
  15. 15. Genesis.
  16. 16. Underscores.
  17. 17. But mostly, frameworks give us secret superpowers.
  18. 18. A good framework is consistent.
  19. 19. Layout flexibility = control (widgets + markup).
  20. 20. Three files. template.php functions.php style.css
  21. 21. Home pages. home.php index.php front-page.php page_funky_layout.php
  22. 22. Three files. template.php functions.php style.css
  23. 23. Underscores.
  24. 24. The Underscores demo.
  25. 25. And undressed.
  26. 26. From two widgets to three.
  27. 27. All lined up.
  28. 28. And dressed to play!
  29. 29. Let’s start by making the widget areas.
  30. 30. index.php
  31. 31. front-page.php
  32. 32. Genesis.
  33. 33. “If you don’t know where you’re going, chances are you’ll end up somewhere else.”
 – Yogi Berra
  34. 34. The Genesis default.
  35. 35. The visual reference.
  36. 36. and move.
  37. 37. Underscores: Widgeted area with markup.
  38. 38. home.php
  39. 39. style.css
  40. 40. Widgets panel.
  41. 41. Things we didn’t cover, but can.
  42. 42. Typography.
  43. 43. Why do I self-host my type?
  44. 44. Choosing faces that work together.
  45. 45. Laying out the header. Different in the two frameworks. Especially since I made different aesthetic choices: buttons in Underscores, sticky menu in Genesis.
  46. 46. The phone versions.
  47. 47. A formal Best Practices workflow:
  48. 48. Planning: Strategy, design. Message strategy/creative brief. Visual texture. PSD mockup mood board, Style Tiles, whatever.
  49. 49. From visuals to code. CSS defaults. Colors 320 and up, Icons Foundation, Buttons Bootstrap … Form fields Elements: And more. Type
  50. 50. Build!
  51. 51. 13-Questions?
  52. 52. 14 - Thanks!

×