Shaping Your Themes with Style

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