0
Three files, unlimited design
options:
Make your site look like anything in
Genesis or Underscores.

Saturday, January 18, ...
30 years a creative.
My firm: Marginhancers.
Site = brand foundation.
Marketing : revenue as brand : margin.

Saturday, Ja...
Are you too old to learn to code?
Saturday, January 18, 14
Saturday, January 18, 14
What does a WP site
look like?

Saturday, January 18, 14
Saturday, January 18, 14
Saturday, January 18, 14
Saturday, January 18, 14
Saturday, January 18, 14
Saturday, January 18, 14
Saturday, January 18, 14
Saturday, January 18, 14
Saturday, January 18, 14
So, great! Let’s just buy
those.

Saturday, January 18, 14
Saturday, January 18, 14
Not a great idea.

Saturday, January 18, 14
Saturday, January 18, 14
So what’s a framework,
anyway?

Saturday, January 18, 14
You may have heard of:

Saturday, January 18, 14
Saturday, January 18, 14
Saturday, January 18, 14
Saturday, January 18, 14
Saturday, January 18, 14
Saturday, January 18, 14
Saturday, January 18, 14
Saturday, January 18, 14
Saturday, January 18, 14
Saturday, January 18, 14
Saturday, January 18, 14
Saturday, January 18, 14
Saturday, January 18, 14
Layout flexibility =
control (widgets + markup).

Saturday, January 18, 14
Three files.
template.php
functions.php
style.css

Saturday, January 18, 14
template.php
Home page:
home.php
front-page.php
index.php
page_whatever.php

Saturday, January 18, 14
A formal Best Practices
workflow:

Saturday, January 18, 14
Planning: strategy, design.
Message strategy/
creative brief.
Visual texture.
PSD mockup
mood board
Style Tiles
whatever.
...
From visuals to code:
CSS defaults.
320 and up,
Foundation,
Bootstrap …
Elements:
Type
Colors
Icons

Saturday, January 18,...
Build!
@import:
type
defaults
style.css.

Saturday, January 18, 14
Three files.
style.css
functions.php
front-page.php

Saturday, January 18, 14
Saturday, January 18, 14
Saturday, January 18, 14
Saturday, January 18, 14
Saturday, January 18, 14
Saturday, January 18, 14
Saturday, January 18, 14
Saturday, January 18, 14
Saturday, January 18, 14
functions.php
Saturday, January 18, 14
Saturday, January 18, 14
index.php

Saturday, January 18, 14
index.php

Saturday, January 18, 14
front-page.php
Saturday, January 18, 14
index.php

Saturday, January 18, 14
front-page.php

Saturday, January 18, 14
style.css
Saturday, January 18, 14
Saturday, January 18, 14
Saturday, January 18, 14
Saturday, January 18, 14
Saturday, January 18, 14
Saturday, January 18, 14
Saturday, January 18, 14
Saturday, January 18, 14
Saturday, January 18, 14
Saturday, January 18, 14
Saturday, January 18, 14
Saturday, January 18, 14
Saturday, January 18, 14
Saturday, January 18, 14
Saturday, January 18, 14
Saturday, January 18, 14
Saturday, January 18, 14
Saturday, January 18, 14
Saturday, January 18, 14
Things we didn’t cover, but
can.

Saturday, January 18, 14
Typography.

Why do I self-host my type?
Choosing faces that work together.

Saturday, January 18, 14
Laying out the header - it was different in the two
frameworks.
Saturday, January 18, 14
Phone versions.
Phones represent more
than half of all web
traffic.
No time for a fully
responsive design?
At least make s...
Meaning:
Body copy we can read.
(Not 2px cap height.)
Do you like modals?

Saturday, January 18, 14
Questions?

Saturday, January 18, 14
Thanks!

Saturday, January 18, 14
Saturday, January 18, 14
Download the files:

Saturday, January 18, 14
Upcoming SlideShare
Loading in...5
×

Three files, unlimited layouts: The designer's guide to WordPress freedom. #wcphx

1,099

Published on

You don't have to be a coding ninja to bend WordPress layouts to your will. Just edit the code in three files! These slides will show you how - and why - in Genesis and Underscores.

Published in: Design, Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,099
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
8
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "Three files, unlimited layouts: The designer's guide to WordPress freedom. #wcphx"

  1. 1. Three files, unlimited design options: Make your site look like anything in Genesis or Underscores. Saturday, January 18, 14
  2. 2. 30 years a creative. My firm: Marginhancers. Site = brand foundation. Marketing : revenue as brand : margin. Saturday, January 18, 14
  3. 3. Are you too old to learn to code? Saturday, January 18, 14
  4. 4. Saturday, January 18, 14
  5. 5. What does a WP site look like? Saturday, January 18, 14
  6. 6. Saturday, January 18, 14
  7. 7. Saturday, January 18, 14
  8. 8. Saturday, January 18, 14
  9. 9. Saturday, January 18, 14
  10. 10. Saturday, January 18, 14
  11. 11. Saturday, January 18, 14
  12. 12. Saturday, January 18, 14
  13. 13. Saturday, January 18, 14
  14. 14. So, great! Let’s just buy those. Saturday, January 18, 14
  15. 15. Saturday, January 18, 14
  16. 16. Not a great idea. Saturday, January 18, 14
  17. 17. Saturday, January 18, 14
  18. 18. So what’s a framework, anyway? Saturday, January 18, 14
  19. 19. You may have heard of: Saturday, January 18, 14
  20. 20. Saturday, January 18, 14
  21. 21. Saturday, January 18, 14
  22. 22. Saturday, January 18, 14
  23. 23. Saturday, January 18, 14
  24. 24. Saturday, January 18, 14
  25. 25. Saturday, January 18, 14
  26. 26. Saturday, January 18, 14
  27. 27. Saturday, January 18, 14
  28. 28. Saturday, January 18, 14
  29. 29. Saturday, January 18, 14
  30. 30. Saturday, January 18, 14
  31. 31. Saturday, January 18, 14
  32. 32. Layout flexibility = control (widgets + markup). Saturday, January 18, 14
  33. 33. Three files. template.php functions.php style.css Saturday, January 18, 14
  34. 34. template.php Home page: home.php front-page.php index.php page_whatever.php Saturday, January 18, 14
  35. 35. A formal Best Practices workflow: Saturday, January 18, 14
  36. 36. Planning: strategy, design. Message strategy/ creative brief. Visual texture. PSD mockup mood board Style Tiles whatever. Saturday, January 18, 14
  37. 37. From visuals to code: CSS defaults. 320 and up, Foundation, Bootstrap … Elements: Type Colors Icons Saturday, January 18, 14 Buttons form fields And more.
  38. 38. Build! @import: type defaults style.css. Saturday, January 18, 14
  39. 39. Three files. style.css functions.php front-page.php Saturday, January 18, 14
  40. 40. Saturday, January 18, 14
  41. 41. Saturday, January 18, 14
  42. 42. Saturday, January 18, 14
  43. 43. Saturday, January 18, 14
  44. 44. Saturday, January 18, 14
  45. 45. Saturday, January 18, 14
  46. 46. Saturday, January 18, 14
  47. 47. Saturday, January 18, 14
  48. 48. functions.php Saturday, January 18, 14
  49. 49. Saturday, January 18, 14
  50. 50. index.php Saturday, January 18, 14
  51. 51. index.php Saturday, January 18, 14
  52. 52. front-page.php Saturday, January 18, 14
  53. 53. index.php Saturday, January 18, 14
  54. 54. front-page.php Saturday, January 18, 14
  55. 55. style.css Saturday, January 18, 14
  56. 56. Saturday, January 18, 14
  57. 57. Saturday, January 18, 14
  58. 58. Saturday, January 18, 14
  59. 59. Saturday, January 18, 14
  60. 60. Saturday, January 18, 14
  61. 61. Saturday, January 18, 14
  62. 62. Saturday, January 18, 14
  63. 63. Saturday, January 18, 14
  64. 64. Saturday, January 18, 14
  65. 65. Saturday, January 18, 14
  66. 66. Saturday, January 18, 14
  67. 67. Saturday, January 18, 14
  68. 68. Saturday, January 18, 14
  69. 69. Saturday, January 18, 14
  70. 70. Saturday, January 18, 14
  71. 71. Saturday, January 18, 14
  72. 72. Saturday, January 18, 14
  73. 73. Saturday, January 18, 14
  74. 74. Things we didn’t cover, but can. Saturday, January 18, 14
  75. 75. Typography. Why do I self-host my type? Choosing faces that work together. Saturday, January 18, 14
  76. 76. Laying out the header - it was different in the two frameworks. Saturday, January 18, 14
  77. 77. Phone versions. Phones represent more than half of all web traffic. No time for a fully responsive design? At least make sure the site works on a phone. Saturday, January 18, 14
  78. 78. Meaning: Body copy we can read. (Not 2px cap height.) Do you like modals? Saturday, January 18, 14
  79. 79. Questions? Saturday, January 18, 14
  80. 80. Thanks! Saturday, January 18, 14
  81. 81. Saturday, January 18, 14
  82. 82. Download the files: Saturday, January 18, 14
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×