Shaping Your Themes with Style

Presentation at WordCamp San Diego 2015

Transcript

1. Shaping Your Theme with Style David Sutoyo WordCamp San Diego 2015
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
26. http://davidsutoyo.com/wcsd2015 @dsutoyo