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

David Sutoyo

March 29, 2015

Other Decks in Programming


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

    Using Chrome Developer Tools • Twenty Fifteen —> WordCamp Maine website • Resources
  2. 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
  3. 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)
  4. Browser Testing Online Testing • browserstack.com • Every combination you

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

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

    Inspect elements just like desktop • Can be a pain to set up
  7. Learn the Basics First Online • Code School, Treehouse, lynda.com

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

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

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

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

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

    with TwentyFifteen or Underscores • Genesis • BootstrapWP, FoundationPress, Hybrid Foundation