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

Avatar for David Sutoyo

David Sutoyo

March 29, 2015
Tweet

Other Decks in Programming

Transcript

  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