Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Shaping Your Themes with Style

Shaping Your Themes with Style

Presentation at WordCamp San Diego 2015

01dc363a3c2062c09106caa2307c4045?s=128

David Sutoyo

March 29, 2015
Tweet

Transcript

  1. Shaping Your Theme with Style David Sutoyo WordCamp San Diego

    2015
  2. None
  3. None
  4. None
  5. None
  6. None
  7. Going Beyond the Options Panel

  8. What’s ahead • How to add your own CSS •

    Using Chrome Developer Tools • Twenty Fifteen —> WordCamp Maine website • Resources
  9. Adding Your Own CSS

  10. Edit Theme Styles Directly Good idea for • custom themes

    Bad idea for • regularly updated themes (not by you!) • If parent theme, can use a child theme
  11. Plugins Jetpack Slim Jetpack Simple Custom CSS

  12. Adding the Right CSS (what styles go with this element?)

  13. Chrome Developer Tools • Safari and Firefox have their tools

    too (IE, sort of). • Open with View > Developer > Developer Tools • Or just use ⌥⌘I, Control-Shift-I on Windows (learn this well)
  14. Browser Testing Online Testing • browserstack.com • Every combination you

    can think of • Chrome Extension • Paid • Can be slow at times
  15. Browser Testing Virtual Machine • Modern.ie • Every version of

    Internet Explorer • Free • Downloads can be huge • Needs virtualization software (Virtual Box or similar) • Expires
  16. Browser Testing Mobile Testing • Remote debugging with Safari/Chrome •

    Inspect elements just like desktop • Can be a pain to set up
  17. Learning CSS

  18. Learn the Basics First Online • Code School, Treehouse, lynda.com

    Books • O’Reilly, Sitepoint, A Book Apart Blogs • CSS Tricks, Smashing Magazine
  19. All those Frameworks • Bootstrap • Foundation • Susy •

    Pure • Skeleton • The list goes on…
  20. Why Use Frameworks • Up and running quickly • Don’t

    need to reinvent the wheel • Tested for different browsers
  21. Why Not Frameworks? • Bloated code • Less control over

    your HTML/CSS • Doesn’t necessarily work well with WordPress
  22. Bottom line… • Learn the basics first! • Frameworks aren’t

    always the answer • If starting out, just choose one that has good documentation and support
  23. Start Hacking Away • Install WordPress locally • Start playing

    with TwentyFifteen or Underscores • Genesis • BootstrapWP, FoundationPress, Hybrid Foundation
  24. Asking Questions • Google • Stack Overflow/Stack Exchange • Local

    WordPress meetups
  25. None
  26. http://davidsutoyo.com/wcsd2015 @dsutoyo