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
Tweet

Other Decks in Programming

Transcript

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

    View full-size slide

  2. Going Beyond the
    Options Panel

    View full-size slide

  3. What’s ahead
    • How to add your own CSS
    • Using Chrome Developer Tools
    • Twenty Fifteen —> WordCamp Maine website
    • Resources

    View full-size slide

  4. Adding Your Own CSS

    View full-size slide

  5. 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

    View full-size slide

  6. Plugins
    Jetpack
    Slim Jetpack
    Simple Custom CSS

    View full-size slide

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

    View full-size slide

  8. 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)

    View full-size slide

  9. Browser Testing
    Online Testing
    • browserstack.com
    • Every combination you can think of
    • Chrome Extension
    • Paid
    • Can be slow at times

    View full-size slide

  10. Browser Testing
    Virtual Machine
    • Modern.ie
    • Every version of Internet Explorer
    • Free
    • Downloads can be huge
    • Needs virtualization software (Virtual Box or similar)
    • Expires

    View full-size slide

  11. Browser Testing
    Mobile Testing
    • Remote debugging with Safari/Chrome
    • Inspect elements just like desktop
    • Can be a pain to set up

    View full-size slide

  12. Learning CSS

    View full-size slide

  13. Learn the Basics First
    Online
    • Code School, Treehouse, lynda.com
    Books
    • O’Reilly, Sitepoint, A Book Apart
    Blogs
    • CSS Tricks, Smashing Magazine

    View full-size slide

  14. All those Frameworks
    • Bootstrap
    • Foundation
    • Susy
    • Pure
    • Skeleton
    • The list goes on…

    View full-size slide

  15. Why Use Frameworks
    • Up and running quickly
    • Don’t need to reinvent the wheel
    • Tested for different browsers

    View full-size slide

  16. Why Not Frameworks?
    • Bloated code
    • Less control over your HTML/CSS
    • Doesn’t necessarily work well with WordPress

    View full-size slide

  17. Bottom line…
    • Learn the basics first!
    • Frameworks aren’t always the answer
    • If starting out, just choose one that has good
    documentation and support

    View full-size slide

  18. Start Hacking Away
    • Install WordPress locally
    • Start playing with TwentyFifteen or Underscores
    • Genesis
    • BootstrapWP, FoundationPress, Hybrid Foundation

    View full-size slide

  19. Asking Questions
    • Google
    • Stack Overflow/Stack Exchange
    • Local WordPress meetups

    View full-size slide

  20. http://davidsutoyo.com/wcsd2015
    @dsutoyo

    View full-size slide